【HTML+CSS】CSS页面布局：盒子模型+浮动+定位

咕啾啾

已于 2022-03-24 18:26:22 修改

阅读量5.4k

点赞数 10

分类专栏：前端文章标签： css html css3 前端 html5

于 2022-03-17 20:24:00 首次发布

本文链接：https://blog.csdn.net/qq_30148319/article/details/123554096

版权

前端专栏收录该内容

32 篇文章 2 订阅

订阅专栏

学习视频：

https://www.bilibili.com/video/BV14J4114768?p=197&spm_id_from=pageDriver

一、盒子模型

1、盒子模型组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。

2、边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。
边框会影响盒子的实际大小。

/* 边框语法 */
border : border-width || border-style || border-color

/* 边框简写-无顺序 */
border: 1px solid red;

/* 边框分开写 */
border-top: 1px solid red;

/* border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框(是否合并) */
border-collapse: collapse;

属性	作用	值
border-width	边框粗细	单位px
border-style	边框样式	none：没有边框（默认） solid：单实线 dashed：虚线 dotted：点线
border-color	边框颜色	颜色值

3、内边距（padding）

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子；如果盒子本身没有指定width / height属性，则此时padding不会撑开盒子大小。
值的个数：[1]上下左右；[2]上下，左右；[3]上，左右，下；[4]上，右，下，左（顺时针）。

4、外边距（margin）

4.1 基础语法

与边框、内边距类似。

/* 让块级盒子水平居中 */
.header{ width: 960px; margin: 0 auto;}

4.2 外边距合并问题

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

（2）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

4.3 清除内外边距

* {
     padding:0; /* 清除内边距 */
     margin:0; /* 清除外边距 */
 }

5、CSS3新增样式

5.1 圆角边框

border-radius 属性用于设置元素的外边框圆角。
参数值可以为数值或百分比的形式（值是圆的半径）。如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%。
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和

border-bottom-left-radiu。该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。

border-radius: length;
border-radius: 1px 2px 3px 4px;

5.2 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

5.3 文字阴影（了解，用的不多）

text-shadow: h-shadow v-shadow blur color;

二、浮动

1、理解浮动

（1）传统网页布局的三种方式（盒子如何进行排列顺序）？

答：①标准流（按照规定好的默认顺序排列）。②浮动。③定位。

（2）为什么需要浮动？

        答：可以让多个块级元素在一行内排列显示。

        [ 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 ]

        [ 网页布局第二准则：先设置盒子大小，再设置盒子位置 ]

（3）浮动的特性？【重要！】

答：①浮动元素会脱离标准流的控制移动到指定位置（脱标）--> 浮动不占位置。

                ②浮动的元素会具有行内块元素的特性。

          a. 块级盒子没有设置宽度默认和父级一样宽。添加浮动后，大小由内容决定。

b. 浮动的盒子中间是没有缝隙的，紧挨在一起。

（4）多个盒子设置浮动？

答：多个盒子按照属性值一行内显示并且顶端对齐排列，如果父级宽度装不下，则另起一行对齐。

2、浮动语法

选择器 { float: 属性值; }

/* none：不浮动（默认值） */
/* left：元素向左浮动 */
/* right：元素向右浮动 */

3、浮动元素和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。（对浮动约束）
一个元素浮动了，理论上其他的兄弟元素也要浮动。
浮动的盒子只会影响盒子后面的标准流（原因是浮动不占位置），不会影响前面的标准流。

4、消除浮动

4.1 对于消除浮动的理解

① 为什么需要消除浮动？

答：因为父盒子在很多情况下，不方面给高度（比如说文本的长度不确定，产品的数量不确定）。但是子盒子浮动又不占位置，导致父级盒子高度为0，影响下面的标准流盒子。总结就是：父级没高度，子盒子浮动影响下面布局。

② 消除浮动的本质是？

答：消除浮动后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

③ 消除浮动的策略是？

答：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

4.2 消除浮动语法

选择器 { clear: 属性值; }

/* left：消除左侧浮动元素的影响 */
/* right：消除右侧浮动元素的影响 */
/* both：同时清除左右两侧浮动的影响（最常用） */

4.3 消除浮动的方法

（1）额外标签法（隔墙法）

使用：在浮动元素末尾添加一个空的标签，例如<div style=”clear:both”></div>，这个空标签必须是块级元素。

（2）父级添加overflow属性

使用：可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

（3）父级添加after伪元素

/* 感觉添加伪元素就像是写好了一个函数，需要的时候进行调用就行 */

.clearfix:after { 
     content: ""; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
     *zoom: 1;
}

（4）父级添加双伪元素

.clearfix:before,.clearfix:after {
     content:"";
     display:table; 
}
.clearfix:after {
     clear:both; 
}
.clearfix {
     *zoom:1;
}

三、定位

1、理解定位

（1）为什么需要定位？

答：定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

（2）子绝父相：子级是绝对定位的话，父级要用相对定位（重要！！！）

答：①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。②父盒子需要加定位限制子盒子在父盒子内显示。③父盒子布局时，需要占有位置，因此父亲只能是相对定位。总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

（3）定位有什么特殊特性？

答：绝对定位和固定定位也和浮动类似。①行内元素添加绝对或者固定定位，可以直接设置高度和宽度。②块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

（4）脱标的盒子（浮动、绝对定位、相对定位）不会触发外边距塌陷。

（5）绝对定位、固定定位会完全压住盒子（与浮动的不同）。

答：浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。但是绝对定位（固定定位）会压住下面标准流所有的内容。

2、定位组成

2.1 定位模式 + 边偏移

定位 = 定位模式 + 边偏移
定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置。

position属性	语义	是否脱标	相对移动位置
static	静态语义（了解）	否	不能使用边偏移
relative	相对定位（重要）	否（占有位置）	相对于自身位置移动
absolute	绝对定位（重要）	是（不占位置）	相对定位的父级移动
fixed	固定定位（重要）	是（不占位置）	相对浏览器可视区
sticky	粘性定位（了解）	否（占有位置）	相对浏览器可视区

边偏移则决定了该元素的最终位置，有 top、bottom、left 、right 4 个属性。

2.2 静态定位 static（了解）

静态定位就是元素的默认定位方式，相当于无定位，按照标准流摆放位置。

选择器 { position: static; }

2.3 相对定位 relative（重要）

相对定位是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
相对定位并没有脱标。它最典型的应用是给绝对定位当父亲（子绝父相）。

选择器 { position: relative; }

2.4 绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置（脱标）。

选择器 { position: absolute; }

    /* 绝对定位的盒子居中（注意：此时无法通过 margin: 0 auto 实现水平居中） */

    /* 1、让盒子的左侧移动到父级元素的水平中心位置 */
        left: 50%;

    /* 2、让盒子向左移动自身宽度的一半（注意：向左移动时要加负号） */
        margin-left: -100px;

2.5 固定定位 fixed（重要）

固定定位以浏览器的可视窗口为参考点移动元素。①和父元素无关。②不随滚动条滚动。
固定定位不占有原先的位置（脱标）。

选择器 { position: fixed; }

    /* 固定定位小技巧：固定在版心右侧位置 */

    /* 1、走到浏览器可视区的一半位置 */
        left: 50%;

    /* 2、移动版心宽度的一半距离 */
        margin-left: 100px;

2.6 粘性定位 sticky（了解）

以浏览器的可视窗口为参照点移动元素（固定定位特点）。
粘性定位占有原先的位置（相对定位特点）。
必须添加 top 、left、right、bottom 其中一个才有效。
和页面滚动搭配使用。应用场景为：当往上滚动到一定程度后不再滚动。

四、元素的显示与隐藏

本质：让一个元素在页面中隐藏或显示出来。
三种显示隐藏：display 显示隐藏、visibility 显示隐藏、overflow 溢出显示隐藏。

1、display 显示隐藏

display 属性用于设置一个元素应如何显示。隐藏元素后，不再占有原来的位置。

属性	语义
display: none ;	隐藏对象
display：block ;	显示元素

2、visibility 显示隐藏

visibility 属性用于让一个元素应可见还是隐藏。隐藏元素后继续占有位置。

属性	语义
visibility：visible ;	元素可视
display：block;	元素隐藏

3、overflow 溢出显示隐藏

overflow 属性只是对溢出的部分进行处理。

属性	语义
visible	不剪切内容也不添加滚动条（默认）
hidden	不显示超过对象尺寸的内容，超出部分隐藏
scroll	不管内容是否超出，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条