常规流布局、浮动、定位

    <style>
        .dad{
            width: 500px;
            height: 500px;
            background: red;
            border: 2px solid;
            padding: 50px;
            margin: 50px;
        }
        .child{
            width: 250px;
            margin: 0 auto;
            background: green;
            border: 2px solid;
            height: 250px;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="child"></div>
    </div>
</body>
</html>

2.每个块盒垂直方向上的auto值

height：auto，适应内容的高度

margin：auto，表示0

3.百分比取值

padding，width，margin可以取值为百分比

以上所有的百分比相对于包含块的宽度

高度百分比：

当父元素有高度值时，才可以设置子元素高度值的百分比，且有效，否则无效

4.上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并

且取值取的是最大值

解决办法：

给上面的盒子设置border，padding即可解决

5.注意：

body元素有自带margin，在开发中需使用重置样式或手动将body的margin改为0

浮动

1.浮动应用场景

1）文字环绕

2）横向排列

2.浮动的基本特点

修改float属性值为：

left:左浮动，元素靠左靠上

right:右浮动，元素靠右靠上

默认值为none

1）当一个元素浮动后，元素必定为块盒(更改display为block)

2）浮动元素的包含块和常规流一样，为其父元素的包含块

3.盒子尺寸

1）宽度为auto时，适应内容宽度

2）高度为auto时，与常规流一样，适应内容的高度

3）margin为auto，为0

4）边框，内边距，百分比设置与常规流一致

4.盒子排列

1）左浮动的盒子靠上靠左排列

2）右浮动的盒子靠上靠右排列

3）浮动的盒子在包含块中排列时，会避开常规流盒子（常规流盒子在最上方）

4）常规流块盒在排列时，无视浮动盒子（常规流块盒排列时，宽度一定撑满，若没看见，则可能被覆盖了）

5）行盒在排列时，会避开浮动盒子（若要让他们离的远一些，则需设置浮动盒子的margin，而不是设置行盒的margin）

6）外边距合并不会发生

5.高度坍塌

高度坍塌的根源：

常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动：涉及css属性，clear

默认值：none

left：清除左浮动，该元素必须出现所有左浮动盒子的下方

right：清除右浮动，该元素必须出现所有右浮动盒子的下方

both：清除左右浮动，该元素必须出现所有浮动盒子的下方

即在常规流盒子写上元素选择器 clearfix

样式表中写上伪元素选择器 .clearfix::after{

content:"";

display:block;

clearfix:both;

}

定位

1.定位

手动控制元素在包含块中的精确位置

涉及CSS属性：position

2.position属性

默认值：static 静态定位（不定位）

relative：相对定位（一般用于被锁定）

absolute：绝对定位

fixed：固定定位

一个元素，只要position取值不是static，认为该元素是一个定位元素

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

1）文档流中的元素摆放时，会忽略脱离了文档流的元素

2）文档流中元素计算自动高度时，会忽略脱离了文档流的元素

3.相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移

可以通过4个CSS属性设置其位置

left right top botton

盒子的偏移，不会对其他元素造成影响

4.绝对定位（用于图片重叠）

1）宽高为auto，适应内容

2）包含块变化:找祖先元素中第一个元素，该元素的填充盒（padding）为包含块

若找不到，则它的包含块为整个网页(初始化包含块)

4.固定定位（广告、回到顶部、菜单）

其他情况和绝对定位完全一样

包含块不同：固定为视口（浏览器的可视窗口）

视口即整个HTML元素网页，可视窗口即当前屏幕所示

5.定位下的居中（绝对与固定定位）

某个方向居中

1）定宽高

2）将左右上下距离设置为0

3）将左右上下margin设置为auto

绝对和固定定位中，margin为auto时，会自动吸收剩余空间

6.多个定位元素重叠时

堆叠上下文

设置Z-index，通常情况下，该值越大，越靠近用户

且只有定位元素设置Z-index有效

Z-index可以为负数，如果是负数，则遇到常规流，浮动元素会被覆盖

堆叠上下文是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序

一、创建堆叠上下文的元素

1.HTML元素（根元素）

2.设置了Z-index数值的定位元素（非auto值）

二、同一个堆叠上下文中元素在Z轴排列顺序

1.创建堆叠上下文的元素的背景和边框（即body、html）

2.堆叠级别为负值的堆叠上下文

3.常规流的非定位块盒

4.非定位的浮动盒子

5.常规流非定位行盒

6.任何Z-index值是auto的定位子元素，以及Z-index值是0的堆叠上下文

7.堆叠级别为正值的堆叠上下文

以上序号为从后到前的排列顺序

每个堆叠上下文，独立其他堆叠上下文，他们之间不能相互穿插

7.补充

绝对定位，固定定位一定是块盒

绝对定位，固定定位一定不是浮动

没有外边距合并

Fraser207

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常规流布局、浮动、定位

css中布局规则又叫视觉格式化模型是指页面中多个盒子排列规则比如：盒模型是指规定单个盒子的规则视觉格式化模型大体上将页面中盒子的排列分为三种方式1.常规流2.浮动3.定位常规流布局常规流又叫文档流，普通文档流，常规文档流所有元素默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列包含块：每个盒子都有它的包含快，包含块决定了盒子的活动范围（排列区域）绝大部分情况下，盒子的包含块，为其父元素的内容盒1.块盒1）每个块盒的总宽度，必须刚好等于
复制链接

扫一扫