（五）CSS学习笔记:CSS三大特性、CSS盒子模型

he_hongyu

已于 2022-11-08 13:23:52 修改

阅读量316

点赞数

分类专栏：前端学习文章标签： css

于 2022-11-04 14:55:33 首次发布

本文链接：https://blog.csdn.net/he_hongyu/article/details/127676711

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文仅用作学习记录，学习视频为B站的pink老师

文章目录

CSS的三大特性

层叠性、继承性、优先级

CSS的层叠性

层叠性用来解决相同的选择器设置不同的样式，样式产生冲突的情况
层叠性原则：就近原则，之后设置的样式覆盖之前产生冲突的样式(冲突则覆盖，不冲突不变)

CSS的继承性

子标签会继承父标签的某些样式，text-、font-、line-这些元素开头的和color属性可以继承
恰当使用继承性，降低CSS样式的复杂性
行高的继承：可以跟单位px，可以不跟单位

body {
   color: pink;
   font: 12px/1.5 'Microsoft YaHei';
}
div {
   /* 子元素继承了父元素body的行高1.5 */
   /* 1.5就是当前元素文字大小的1.5倍，所以当前div的行高为14*1.5=21像素 */
   font-size: 14px;
}
/* li 没有指定文字大小，则li先继承body的文字大小为12px，然后行高为12*1.5=18px */

<body>
    <div>长江后浪推前浪</div>
    <ul>
        <li>没有指定文字大小</li>
    </ul>
</body>

CSS的优先级

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

选择器	选择器权重
继承或 *	0,0,0,0
元素(标签)选择器	0,0,0,1
类选择器、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=“”	1,0,0,0
!important(重要的)	∞无穷大

注：

继承的权重是0，不管父元素权重多高，子元素得到的权重都是0
a链接浏览器默认指定了一个样式，蓝色，带下划线的。所以不会继承父辈的color

CSS权重叠加----复合选择器

/* 复合选择器权重叠加问题， */
/* 权重虽然有叠加，但不会有进位问题 0,0,0,1 * 10 = 0,0,0,10 */
/* ul li 权重：0,0,0,1+0,0,0,1=0,0,0,2 */
ul li {
	color: green;
}
/* li 权重：0,0,0,1 */
li {
	color: red;
}

CSS 盒子模型

网页布局的本质：利用CSS摆盒子
网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

盒子模型(Box Model)组成

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框，外边距，内边距和实际内容
在这里插入图片描述

边框(border)

/* 设置边框的粗细 */
border-width: 5px;

/* 设置边框的样式 常用：solid-实线边框 dashed-虚线边框 dotted-点线边框*/
border-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset;

/* 设置边框颜色 */
border-color: brown;

/* 边框的复合写法 没有先后顺序*/
border: 5px solid brown;

/* 单独设置四条边 */
border-top: 1px solid brown;
border-bottom: 2px dotted red;
border-left: 3px dashed green;
border-right: 4px inset blue;

/* 相邻边框合并到一起 */
border-collapse: collapse;

注：边框会额外增加盒子的大小

内边距(padding)

/* 设置内边距 */
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;

/* 内边距复合写法 */
/* 一个值，上下左右都是5px */
padding: 5px;
/* 两个值，上下5px,左右10px */
padding: 5px 10px;
/* 三个值，上5px,左右10px,下15px */
padding: 5px 10px 15px;
/* 四个值，上5px,右10px,下15px,左20px */
padding: 5px 10px 15px 20px;

注：

内边距会额外增加盒子的大小
padding不会增加盒子大小的情况：如果盒子本身没有指定width/height属性(即便父辈元素设置了width/height属性)，则此时padding不会增加盒子大小。

外边距(margin)

/* 控制盒子与盒子之间的距离 */
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;

/* margin的复合写法与padding完全一样 */
/* 一个值，上下左右都是5px */
margin: 5px;
/* 两个值，上下5px,左右10px */
margin: 5px 10px;
/* 三个值，上5px,左右10px,下15px */
margin: 5px 10px 15px;
/* 四个值，上5px,右10px,下15px,左20px */
margin: 5px 10px 15px 20px;

外边距可以让块级盒子实现水平居中，必须满足的条件：

盒子必须指定了宽度(width)
盒子左右的margin设置为auto

/* 三种方式均可 */
.header {
	width: 960px;
    margin: 0 auto;
    margin-left: auto;margin-right: auto;
    margin: auto;
}

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

外边距合并

相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom+margin-top，而是max{margin-bottom,margin-top}。取两个值中的较大者称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素执行较大的外边距值，子元素不执行。这称为外边距的塌陷。

<div class="father">
	<div class="son"></div>
</div>

解决方案：

(1)为父元素定义上边框
(2)为父元素定义上内边距
(3)为父元素添加overflow:hidden

.father {
    width: 400px;
    height: 400px;
    background-color: pink;
    margin-top: 50px;

    /* 方法1 */
    border: 1px solid transparent;
    /* 方法2 */
    padding: 1px;
    /* 方法3 */
    overflow: hidden;
}
.son {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin-top: 100px;
}