CSS三大特性与盒子模型

Bub_ble___

已于 2023-04-04 09:38:57 修改

阅读量72

点赞数

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

于 2023-03-31 19:09:07 首次发布

本文链接：https://blog.csdn.net/Bub_ble___/article/details/129886414

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、行高的测量

行高可以让一行文本在盒子中垂直居中对齐。做法就是：文字的行高等于盒子的高度。

总结：

1. 上距离和下距离总是相等的，因此文字看上去是垂直居中的。

2. 如果行高等于height高度，文字会垂直居中

3. 如果行高大于高度，文字会偏下

4. 如果行高小于高度，文字会偏上

二、CSS三大特性

1.CSS层叠性（要求不同选择器优先级处于同级）

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。记住：就近原则。

2.CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。

text-，font-，line-这些元素开头的都可以继承，以及color属性。

3.CSS优先级

. 继承的权重是0

总结优先级：

使用了!important声明的规则。

内嵌在HTML元素的style属性里面的声明。

使用了ID选择器的规则。

使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

使用了元素选择器的规则。

只包含一个通用选择器的规则。

同一类选择器则遵循就近原则。

注：在能选中要修饰的标签的这些选择器里，先找优先级高的；优先级相同则对比选择器数量，数量多的起作用；若数量也相同，则遵循就近原则。

三、盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

四、盒子模型之边框

语法：border : border-width || border-style || border-color

1.边框的风格样式（border-style）

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

2.边框写法综合

设置内容	样式属性	常用属性值
上边框	border-top-width:宽度; border-top-style:样式; border-top-color:颜色; border-top:宽度样式颜色;
下边框	border-bottom-width:宽度; border-bottom-style:样式; border-bottom-color:颜色; border-bottom:宽度样式颜色;
左边框	border-left-width:宽度; border-left-style:样式; border-left-color:颜色; border-left:宽度样式颜色;
右边框	border-right-width:宽度; border-right-style:样式; border-right-color:颜色; border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认） solid单实线 dashed虚线 dotted点线 double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值 #十六进制 rgb(r,g,b) rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

3.表格的细线边框

table{ border-collapse:collapse; } collapse单词是合并的意思，表示相邻边框合并在一起。

五、盒子模型之内边距

1.内边距

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

2.内边距写法综合

值的个数	表达意思
1个值	padding：上下左右边距。比如：padding: 3px;表示：上下左右都是3像素
2个值	padding: 上下边距左右边距。比如：padding: 3px 5px;表示：上下3像素左右 5像素
3个值	padding：上边距左右边距下边距。比如：padding: 3px 5px 10px;表示：上是3像素左右是5像素下是10像素
4个值	padding：上内边距右内边距下内边距左内边距比如：padding: 3px 5px 10px 15px;表示：上3px 右是5px 下 10px 左15px 顺时针

六、盒子模型之外边距

1.外边距

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

2.外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1、必须是块级元素。

2、盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

示例：.header{ width:960px; margin:0 auto;}

3.内容居中和盒子居中区别

文字水平居中是text-align: center

盒子水平居中左右margin改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中左右margin 改为 auto 就阔以了 */

4.清除元素的默认内外边距

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

注意：行内元素是只有左右外边距的，是没有上下外边距的。

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

使用margin定义块元素的垂直外边距时，当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。