CSS:（4）CSS的三大特性盒子模型

最新推荐文章于 2022-04-27 18:47:15 发布

urcecilie

最新推荐文章于 2022-04-27 18:47:15 发布

阅读量180

点赞数

文章标签： css

本文链接：https://blog.csdn.net/urcecilie/article/details/115428282

版权

CSS盒子模型

CSS的特性
盒子模型

CSS的特性

1.层叠性

相同选择器给设相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（后来居上）
样式不冲突，不会层叠

2.继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-,这些元素开头的都可以继承，以及color属性)

行高的继承性

body {
         font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5 这样写法的最大优势就是里面子元素可以根据自己文字大小自动设置行高

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important 重要的	无穷大

优先级注意点

权重是由4组数字组成，但是不会进位
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
可以简单记忆：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!important无穷大
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

div ul li —— 0，0，0，3
.nav ul li——0，0，1，2
a:hover——0，0，1，1
.nav a——0，0，1，1

盒子模型

1.盒子模型的组成

在这里插入图片描述
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容

2.边框

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细），边框样式边框颜色
语法：

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式（solid实线，dashed虚线，dotted点线）
border-color	边框颜色

CSS边框属性允许指定一个元素边框的样式和颜色。
边框简写：

border:1px solid red;  //没有顺序

边框分开写法

border-top:1px solid red; //只设定上边框

举例：做一个200*200的盒子，设置上边框为红色，其余边框为蓝色

/* 一个200*200的盒子 上边框为红色，其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
            /* border-top: 3px solid red;
            border-bottom: 3px solid blue;
            border-left: 3px solid blue;
            border-right: 3px solid blue; */
            border: 1px solid blue;
            /* 层叠性 只层叠上边框 */
            border-top: 1px solid red;

        }

显示如图所示：
在这里插入图片描述

3.表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：

border-collapse:collapse

collapse是合并的意思
border-collapse:collapse;表示相邻边框合并在一起

4.边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含边框，则需要width/height减去边框宽度

5.padding内边距

padding属性用于设置内边框，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达含义
padding:5px	1个值，代表上下左右都有5px的内边距
padding:5px 10px	2个值，代表上下内边距都是5像素，左右内边距是10像素
padding:5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素下内边距20像素
padding:5px 10px 20px 30px	4个值：上5像素，右10像素下20像素左30像素（顺时针）

在给盒子指定padding值时：

内容和边框有了距离，添加了内边距
padding影响了实际盒子的大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案： 如果保证盒子和效果图大小一致，则让width/height减去多出来的内边距大小即可
如果盒子本身没有指定width/height，则此时的padding不会撑开盒子大小

6.margin外边距

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的含义和padding完全一致

7.外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件

盒子必须指定宽度（width）
盒子左右的外边距都设置为auto

.header{width:970px ;margin:0 auto}

以下三种常见的写法都可以使用：（块级）

margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;(最常用)

行内元素或行内块元素水平居中，给其父元素添加text-align:center即可

8.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

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

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

解决方法：尽量只给一个盒子添加margin值
在这里插入图片描述
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框(border)
可以为父元素定义上内边框(padding)
可以为父元素添加overflow:hidden

9.清除内外边距

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

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

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

10.CSS3新增盒子属性

1.圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法：

border-radius:lengrh;

radius半径（圆的半径）原理：圆与边框的交集形成圆角效果

参数值可以为数值或百分比形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形，设置为高度的一半，就可以把矩形的高整个设置为圆角
该属性是一个简写属性，可以跟四个值，分别是：左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

2.盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法：

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

注意：

默认的时外阴影（outset）,但是不可以写这个单词，否则会导致阴影没有效果
盒子阴影不占用空间，不会影响其他盒子的排列

3.文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本
语法:

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色