CSS 进阶（盒子模型、浮动、定位、伪类、伪元素）

Zhanghx1234567

已于 2023-04-15 16:20:41 修改

阅读量401

点赞数 2

文章标签： html css

于 2023-04-08 17:58:51 首次发布

本文链接：https://blog.csdn.net/nidielaila6/article/details/129976923

版权

一、盒子模型

所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

1.边框（border）

border用于设置元素的边框。边框由三部分组成：边框宽度（粗细）、边框样式和边框颜色

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

（1）border-style（具有层叠性）参数：

none：无边框，与任何指定的border-width无关

solid：实线边框

double：双线边框，两条单线与其间隔的和等于指定的bolder-width的值

dashed：虚线

dotted：点线

div{
    width: 300px;
    height: 200px;
    border-width: 5px;
    border-style: dotted;
     border-color: blue;
     border-top-color: greenyellow;
}

（2）表格的细线边框

（border-collapse）控制相邻单元格的边框。

语法：

border-collapse: collapse;

表示把相邻边框合并在一起。（collapse单词是合并的意思）

（3）边框会影响盒子的实际大小

方法：

测量盒子大小的时候，不计算边框

如果测量的时候包含了边框，则需要widh/height减去边框宽度

2.内边距（padding）

padding用于设置边框与内容之间的距离

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding-left: 20px;
            padding-top: 20px;
        }
    </style>

padding会影响盒子的实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

如果要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小（默认和父亲一样宽）

3.外边距（margin）

margin用于设置外边距，即控制盒子和盒子之间的距离

（1）让盒子水平居中：

盒子需要有宽度width

盒子的左右外边距都设置为auto

（2）让盒子内的行内元素水平居中：

给父元素添加text-align:center;

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-left:auto ;
            margin-right: auto;
            text-align: center;;
        }
    </style>

（3）清除内外边距
网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除网页元素的内外边距

*{

padding:0; /*清除内边距*/

margin:0; /*清除外边距*/

}

二、float浮动

floa属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块内或另一个浮动框的边缘

语法：

float ：属性值 (none/left/right);

浮动有一系列控制它的规则：

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
如果float取值为none或者设置float时，不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示

特点：

（1）浮动元素会脱离标准流（脱标）不再保留原来的位置

（2）浮动的元素会一行内显示并且元素顶部对齐

（3）CSS允许任何元素浮动float，无论是图像、段落还是列表。浮动的元素都会成为块级元素：如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度，浮动元素的默认宽度为auto

清除浮动：

本质：清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

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

语法：

clear:属性值;

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的方法：

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

在浮动元素末尾添加一个空的标签（必须是块级元素特殊<br />可以，不能是行内元素）

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签

（2）父级添加overflow属性，将其属性值设置为hidden、auto或scroll

优点：代码简介

缺点：无法显示溢出的部分

（3）父级添加after伪元素

（4）父级添加双伪元素

三、position定位

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

position的原意为位置、状态、安置，很多特殊容器的定位必须用position来完成。

position允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素或者相对于浏览器窗口本身。每个显示元素都可以用定位的方法来表述，而其位置由此元素的包含块来决定

定位 = 定位模式（指定定位方式） + 边偏移（决定元素的最终位置）

1.定位模式

语法：

Position: static/absolute/fixed/relative;

属性	说明
static	静态（默认），无定位
absolute	绝对，将对象从文档中拖出，通过width、height、left、right、top、bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义
fixed	固定，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动
relative	相对，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置

2.边偏移

属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

总结：
1.明白了浮动的使用和对标准流的影响，以及清除浮动的几种方式和作用

2.搜索了几种定位的区别和使用方法，相对定位的初始空间会保留，绝对定位脱离文档流相对于已定位的最近的祖先元素定位