这一章主要记录定位与浮动常用的。
1.浮动
说到浮动我们要先说说标准流和浮动流。
1.标准流
标准流很常见,浏览器默认的方式就是标准流。
标准流怎么理解呢?
实现我们得知道CSS中的三种元素分类。
行内元素,块级元素,行内块级元素
行内元素 块级元素 行内块级元素不独占一行独占一行不独占一行默认和内容一样宽默认和父元素一样宽默认和内容不可以设置宽高可以设置宽高可以设置宽高
大概三种元素的去区别就出来了。
在这里插入另外一个知识点:
在HTML中通常把元素(标签)分为两类:
p h ul ol li dt等span/p/em/ins等可以嵌套其他的所有标签只可以嵌套文字/图片/超链接
现在可以讲讲标准流了:
立即学习“前端免费学习笔记(深入)”;
在标准流中有两种排版方式,块级元素按照垂直排版,行内元素和行内块级按照水平排版,顺着来
2.浮动流
浮动的属性:
clear 清除 float 浮动left/right左/右不允许浮动left/right左浮动/右浮动both/none均不可/不清除none不浮动
浮动有几点要注意:
浮动是指设置浮动之后的元素会怎么浮动在他周围!!!
例如right表示后面的元素会排在他左边!!!
浮动流不区分是什么元素,只可以水平排版,没有居中(center),不可以使用margin: 0 auto;均可以设置宽高。
特点前一个浮动后面一个没有,那么前面一个会盖住后面一个(文字不会盖住,会环绕在周围),这里可以试着去想想都浮动的排列景象。先浮动的会在前面,后浮动的会在后面浮动之后的位置由浮动之前在标准流中的位置来确定,这里主要是理解为浮动后什么元素会受影响左浮动会去找左浮动,右浮动会跟在右浮动后面当父元素宽度可以显示所有浮动时,并排显示浮动的贴靠主要是指当父元素宽度不够时会往前靠,怎么理解呢,就是假如你一个窗口放了很多图片把窗口宽度缩小时图片会自动往下排的现象
以上就是CSS浮动写法的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3121972.html