CSS网页布局方式--浮动流、定位流
来源:互联网 发布:欧盟对华反倾销数据 编辑:程序博客网 时间:2024/05/16 14:53
网页布局方式定义:
- 网页的布局方式就是浏览器如何对网页中的元素进行排版
主要分三种
- 标准流
- 浮动流
- 定位流
标准流(文档流/普通流)排版
- 定义:浏览器默认的排版方式
- 在
css
中元素分三类:行内元素、块级元素以及行内块级元素 - 标准流中分两种排版方式
- 垂直排版:元素是块级元素
- 水平排版:行内元素及行内块级元素
浮动流排版float
- 作用:可以实现文字环绕效果
- 一种“半脱离标准流”的排版方式
- 只有一种水平排版方式,只能设置某个元素左对齐或右对齐
- 特点:
- 浮动流中不区分行内元素/块级元素/行内块级元素,无论哪种元素都可以进行水平排版
- 在浮动流中无论是行内元素/块级元素/行内块级元素都可以进行宽高设置
- 综上所述,浮动流中的元素和标准流中的行内块级元素很像
- 注意点:
- 浮动流中没有居中对齐
- 浮动流中不可以使用
margin: 0 auto;
的,这是无效的
浮动元素的脱标
- 定义:脱离标准流
- 当某一个元素浮动之后,这个元素看上去像似被从标准流中删除了一样
- 浮动元素脱标之后的影响
- 如果前面一个元素浮动了,而后面一个元素没有浮动,那么这时前面的一个元素就会覆盖后面的一个元素
浮动元素排序规则
- 相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素显示在后面
- 不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动
- 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置确定
浮动元素贴靠现象
- 当父元素的宽度足够放下所有浮动元素时,它就会并列显示,当宽度不足够放下所有元素时,会从最后一个元素开始往前面的元素贴,直到贴到父元素的左边位置,此时不管父元素的宽度够不够,都会显示在父元素的位置。
浮动元素字围效果
- 当前一个元素浮动了,后面一个元素没有浮动,后面一个元素中的文字会紧贴前面一个元素显示。
- 浮动元素不会盖住没有浮动元素中的文字,没有浮动的元素会给浮动元素让位置
重点:
- 在以后的企业开发中,一般在整体网页垂直方向上采用标准流布局,水平方向上采用浮动流布局
- 面对一个很复杂的界面时,遵循从上到下,由外到内的布局顺序,水平方向上可以根据从左到右的顺序
浮动元素高度的问题
- 在标准流中内容的高度可以撑起父元素的高度
- 在浮动流中浮动的元素不可以撑起父元素的高度
清楚浮动的方式
清楚浮动方式一
- 给前面一个父元素设置高度
- 注意:
- 在企业开发中能不写高度就不写高度,所以这种方法用的很少
清楚浮动方式二
- 给后面的元素添加
clear
属性 clear
属性取值:none
:默认取值,按照浮动元素的排序规则(左浮动找左浮动,右浮动找右浮动)left
:不要找前面的左浮动元素right
:不要找前面的右浮动元素both
:不要找前面的左浮动和右浮动元素
- 注意点:
- 当给某个元素添加
clear
属性之后,那么这个元素的margin
属性就会失效 - 这里
margin
为啥会失效?(留个疑问)
- 当给某个元素添加
清楚浮动方式三
- 隔墙法
- 外墙法
- 在两个盒子中间添加一个额外的块级元素
- 给这个额外添加的元素添加
clear:both;
属性
- 注意:
- 可以让第二个盒子使用
margin-top
属性 - 不可以让第一个盒子使用
margin-bottom
属性 - 在企业开发中用外墙法直接给这个额外的元素添加高度就可以了,不用给第二个元素加
margin-top
属性
- 可以让第二个盒子使用
- 内墙法
- 在第一个盒子所有子元素最后添加一个额外的块级元素
- 给这个额外添加的块级元素设置
clear:both;
属性
- 注意点
- 可以让第二个盒子使用
margin-top
属性 - 可以让第一个盒子使用
margin-bottom
属性
- 可以让第二个盒子使用
外墙法和内墙法的区别:
- 外墙法可以让第一个盒子设置
margin-bottom
属性,内墙法不可以 - 外墙法不能撑起第一个盒子的高度,内墙法可以
在企业开发中不常用隔墙法来清楚浮动
伪元素选择器
- 作用:给指定标签的内容前面添加一个子元素或者给指定标签的后面添加一个子元素
- 格式
- 给指定标签前面添加一个子元素
标签名称::before{ 属性名称:值}
- 给指定标签后面添加一个子元素
标签名称::after{ 属性名称:值}
例如:
div::after { /*指定添加的子元素中存储的内容*/ content:"test"; /*指定添加的子元素的宽度和高度*/ width:50px; height:0px; /*指定添加的子元素的显示模式*/ display:block; /*隐藏添加的子元素*/ visibility:didden;}
清除浮动的方式四 (最推荐使用)
- 用伪元素选择器和内墙法结合使用来给元素清除浮动
- 例如:
.box1::after{ /*设置添加的子元素内容为空*/ content:""; /*设置添加的子元素为块级元素*/ display:block; /*设置添加的子元素高度为0*/ height:0px; /*设置添加的子元素内容隐藏*/ visibility:hidden; /*给添加的子元素设置clear:both;属性*/ clear:both;}.box1 { /*用来兼容IE6*/ *zoom:1;}
清除浮动方式五
- 通过
overflow:hidden;
来清除浮动 overflow
作用:- 将超出标签范围的内容拆剪掉
- 清除浮动
- 可以通过
overflow:hidden;
让里面的盒子设置margin-top
之后,外面的盒子不被顶下来
overflow:auto;
作用- 如果包含图片的元素的高度没有图片高,而且它是浮动的,可以使用
overflow:auto;
来清除浮动
- 如果包含图片的元素的高度没有图片高,而且它是浮动的,可以使用
定位流排版
static,relative,absolute,fixed
默认定位
- 该关键字指定元素使用正常的布局行为,即元素在文档流中当前的布局位置。此时
top, right, bottom, left
和z-index
属性无效。
相对定位position:relative
top,right,bottom,left
- 概念:相对于自己以前在标准流中的位置来移动
- 注意点:
- 不脱离标准流,会继续在标准流中占用一份空间
- 需要结合
top/right/bottom/left
属性来使用,但是一个方向上的定位属性只能使用一个 - 由于相对定位是不脱离标准流的,所以相对定位是区分块级元素,行内元素以及行内块级元素的
- 相对定位不脱离标准流,并且相对定位会占用标准流中的位置,所以当给相对定位的元素设置
margin/padding
等属性时会影响标准流的布局
- 相对定位应用场景
- 对元素进行微调
- 配合后面学习的绝对定位使用
- 相对定位弊端
- 相对定位不会脱离标准流,会继续在标准流中保留一份空间,所以不利于布局
绝对定位position:absolute
- 概念:相对于
body
来定位 - 注意点:
- 脱离标准流
- 绝对定位的元素不区分块级元素,行内元素以及行内块级元素
- 规律:
- 默认情况下,所有的绝对定位元素无论有没有祖先元素,都会以
body
作为参考 - 如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点
- 只要是这个绝对定位元素的祖先都可以
- 指的定位流是指绝对定位/相对定位/固定定位
- 定位流中只有静态定位不行
- 如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且有多个祖先元素都是定位流,那么这个绝对定位元素会以离它最近的元素作为参考点
- 默认情况下,所有的绝对定位元素无论有没有祖先元素,都会以
绝对定位注意点
- 如果一个绝对定位是以
body
作为参考点,那么其实是以网页首屏的宽度和高度为作为参考点,而不是以整个网页的高度和宽度为参考点 - 一个绝对定位的元素会忽略祖先元素的
padding
- 绝对定位弊端
- 默认情况下绝对定位的元素会以
body
作为参考点,所以会随着浏览器的宽度高度的变化而变化
- 默认情况下绝对定位的元素会以
相对定位与绝对定位结合使用
- 子绝父相:子元素用绝对定位,父元素用相对定位
绝对定位的元素水平居中
- 只需设置绝对定位元素的
left:50%
,然后再设置margin-left:- 元素宽度的一半
;
固定定位position:fixed
top,right,bottom,left
- 概念:
- 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
- 注意点:
- 固定定位的元素是脱离标准流的,不会占用标准流中的空间
- 固定定位和绝对定位一样不区分行内/块级/行内块级
静态定位
z-index
属性
- 概念:默认情况下所有的元素都有一个
z-index
属性,取值为0; - 作用:专门用于控制定位流元素的覆盖关系
- 1、默认情况下定位流的元素会覆盖标准流的元素
- 2、默认情况下定位流的元素后面编写的会覆盖前面编写的
- 3、如果定位流的元素设置了
z-index
属性,那么谁的z-index
属性值大,谁就显示在上面
注意点
- 从父现象
- 如果两个元素的父元素都没有设置
z-index
属性,那么谁的z-index
属性比较大谁就显示在上面 - 如果两个元素的父元素设置了
z-index
属性,那么子元素的z-index
属性就会失效,也就是说谁的父元素的z-index
属性比较大谁就会显示在上面
- 如果两个元素的父元素都没有设置
学了这么多知识点来做个练习消化消化吧百度前端学院_小薇课堂_task_4
可参看下面的两篇文章,夯实基础
系统学习前端之HTML基础
系统学习前端之CSS基础
阅读全文
0 0
- CSS网页布局方式--浮动流、定位流
- CSS:网页混合布局,浮动,绝对定位,相对定位
- XHTML CSS利用浮动与定位进行网页布局
- css3种布局方式:默认文档流、浮动布局、定位布局-----看张鹏老师视频笔记
- CSS之定位、居中、浮动及利用浮动设计网页布局和导航
- 流式布局、浮动布局及绝对定位布局
- css 浮动和定位的两种三栏布局
- DIV+CSS布局之解读浮动定位
- css浮动于定位-布局的基础
- css/网页布局方式
- div+css定位网页布局
- 【CSS】瀑布流布局的两种方式:传统多列浮动和绝对定位布局
- CSS定位机制——普通流、浮动、定位
- CSS定位:普通流定位属性和浮动
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- 利用DIV的浮动与定位进行网页布局
- Div+CSS教程----DivCSS布局绝对定位和浮动
- HAWQ取代传统数仓实践(十七)——事实表技术之累积度量
- centos samba 挂载
- 数论总结一
- caffe:cmake编译指定glog,gflag路径
- AI 2
- CSS网页布局方式--浮动流、定位流
- iOS YYKit理解
- 修改mysql数据库的密码
- AI 3
- 调试px4串口升级固件
- 判断素数的几种方法
- 华为蛇形矩阵
- 百度前端学院_小薇课堂_task_4
- Laravel的console使用方法