本文详细讲解了CSS的基础概念，包括层叠规则中的重要性、特殊性和源次序，以及继承机制。深入探讨了盒模型的运作，如内容、填充、边框和外边距，及其在实际布局中的应用，如宽度调整、背景覆盖和溢出处理。此外，还介绍了常规流、浮动和定位的原理及使用技巧，帮助理解元素在页面中的定位和排列。
文章目录
三.CSS基础
4.层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1.比较重要性
重要性从高到底：
作者样式表：开发者书写的样式
1） 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性(重要性相同的情况下)
看选择器
总体规则：选择器选中的范围越窄，越特殊
例：
<style>
a{
color:red;
font-style:italic;
text-decoration: none;
}
.selected{
color:#008c8c;
background-color:red;
}
</style>
<a href="" class="selected">Lorem.</a>
类选择器比元素选择器特殊，所以文本的样式的背景颜色为red 文字颜色：#008c8c;
具体规则：通过选择器，计算出一个4位数（x x x x）
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
<style>
a{
/* 000? */
color:red;
font-style:italic;
text-decoration: none;
}
.selected{
/* 0010 */
color:#008c8c;
background-color:red;
}
</style>
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
例：
<style>
a{
/*0001*/
color:red;
}
div ul a{
/*0003*/
color:green;
}
#mydiv #myul a {
/*0201*/
color:gray;
}
#mydiv #myul .mylink{
/*0210*/
color:#008c8c;
}
#mydiv #myul a:link{
/* 0211*/
color:chocolate;
}
</style>
逢256进1，把四个数分开进行比较
3. 比较源次序(当特殊一样的情况下)
代码书写靠后的胜出——最后仍为巧克力色
#mydiv #myul .mylink{
/0210/
color:#008c8c;
}
#mydiv #myul :link{
/* 0210*/
color:chocolate;
}
4.应用
- 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表覆盖掉浏览器的默认样式
先引用重置样式把浏览器的默认样式覆盖掉（通用CSS），再引用我们自己的样式表（如果再重置样式表和我们自己的样式表出现冲突，源次序靠后的就会覆盖之前的）
常见的重置样式表：normalize.css、reset.css、meyer.css
- 爱恨法则
link > visited > hover > active
5.继承
子元素会继承父元素的# 继承
子元素会继承父元素的某些CSS属性
并不是所有的CSS属性都继承的
通常，跟文字内容相关的属性都能被继承
font-varient:将文章中的小写字母转换为大写字母 small-caps;
font 简写属性(语法糖) 可以设置font-style font-weight font-size line-height font-family;
font一般会设置在body里
可以在mdn中查看那些属性能不能被继承
rgba(0,0,0,0)透明
6.属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
*渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
属性值计算过程简介
1.确定声明值:参考样式表中没有冲突的声明，作为CSS属性
声明值：作者样式表 浏览器默认样式
开发者写了一些样式
浏览器默认了一些样式
2.层叠冲突:对样式表有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承：对仍然没有值的属性，若可以继承(与文字相关的属性)，则继承父元素的值
4.使用默认值：对仍然没有值的属性，使用默认值（w3c）
transparent:透明
每一个CSS属性都有默认值
例2：
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">
举个例子
</a>
<p>
p元素
</p>
</div>
</body>
举个例子：应该是浏览器默认颜色；
p元素：应该是红色
浏览器默认的CSS属性是一定的？
是不是不是每个元素都会有浏览器默认值
在CSS中：
a{
/* 继承父元素的属性*/
color:inherit; /* 强制继承，颜色在层叠冲突中确定 */
}
在html:
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">
举个例子
</a>
<p>
p元素
</p>
</div>
</body>
则：所以举个例子是 红色；
特殊的两个CSS取值：
- inherit：手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
7.盒模型(CSS里面的概念)
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
1.盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
2.盒子的组成部分
行盒和块盒，都由下面几个部分组成，从内到外分别是：
1. 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2. 填充(内边距) padding
盒子边框到盒子内容的距离 单位:px;
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左(当上和下相同 右和左相同时只写上 右 若四个方向都一样只写一个值)
padding:10px 20px 10px 20px;
可以写成：padding:10px 20px;
padding:20px 20px 20px 20px;;
可以写成：padding:20p;
填充区+内容区 = 填充盒 padding-box
3. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style(上 下 左 右)
边框宽度：border-width
边框颜色：border-color
（以上三个都是简写属性，语法糖，分别都有四个）
边框颜色根据字体颜色来定
border:也是速写属性（当边框样式，边框宽度，边框颜色分别都一样时）
boder:宽度 样式 颜色；
边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
8.盒模型的应用
1.改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
页面重构师：将psd文件（设计稿）制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
- 精确计算
- CSS3：box-sizing（默认值为content-box）
box-sizing:border-box;——表示盒子的宽高为边框盒的宽高
box-sizing:content-box;——表示盒子的宽高为内容盒的宽高
2.改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
border-box:表示背景覆盖边框盒
content-box:表示背景覆盖内容盒
padding-box:表示背景覆盖填充盒
3. 溢出处理
overflow，控制内容溢出边框盒后的处理方式
可设置的值有 1.visible 2.hidden(溢出部分看不见) 3.scroll(生成滚动条) 4.auto（需要滚动条的时候出现，不需要滚动条就不出现）
4. 断词规则
word-break，会影响文字在什么位置被截断换行
normal：普通。CJK字符（中国日本韩国 文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断或在空格处截断
5. 空白处理(对溢出的文字进行处理)
white-space: nowrap(不换行 会发生空白折叠)
white-space:normal(会发生空白折叠)
只能控制单行文本 让多余的字不换行并隐藏起来，并且在后面加上点
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
呈现效果：
让多余的字…
多行文本用JS处理
<pre>
var i=1;
alert("a");
</pre>
可以写成
<div style="white-space:pre;">
var i=1;
alert("a");
</div>
9. 行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio
1.显著特点
1. 盒子沿着内容沿伸
2. 行盒不能设置宽高
行盒的宽高取决于内容的宽高
如果调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
3. 内边距（填充区）
水平方向有效，垂直方向可以看到效果，但不会实际占据空间。
4. 边框
水平方向有效，垂直方向可以看到效果，但不会实际占据空间。
5. 外边距
水平方向有效，垂直方向没有效果，不会实际占据空间。
2.行块盒
display：inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
3.空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
行盒和行盒（行块盒和行块盒）之间的空隙使消不掉的（除非在源代码中a元素与a元素之间没有空格）
4.可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素 div p span a
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img(行盒，宽高可以设置)、video、audio
绝大部分可替换元素均为行盒。
可替换元素"类似于"行块盒，盒模型中所有尺寸都有效。
图片跟着宽高走的，适应整个图片的高度和宽度
改变适应方式（视频 图片）
object-fit:contain(不能改变图片的比例，但要保证图片不能溢出)
fill（把整个图片全部显示，但是不能保持比例，比例可能会变化）——默认情况
cover(把区域填充满，但是不能改变比例，可能会损失图片的部分信息)
图片的高度和宽度是自适应的，只设置高度，宽度会跟随着随比例增加
10.常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，横向撑满包含块，纵向有外边距的合并，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
包含块在哪里，盒子就跟在哪里
绝大部分情况下：盒子的包含块(参考坐标系)，为其父元素的内容盒
块盒
1. 每个块盒的总宽度(margin border padding 内容区之和)，必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉
width吸收能力强于margin(水平)
当width:0 margin:0
剩下的所有长度被width吸收
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。
margin:10px auto;
2. 每个块盒垂直方向上的auto值
height:auto， 适应内容的高度
margin:auto， 垂直方向上表示0
3. 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比:
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
父元素的高度没有设置，而子元素高度设置百分比,则该百分比无效；
2）. 包含块的高度不取决于子元素的高度（父元素的高度已经设置），则其百分比相对于父元素高度
4. 上下外边距的合并margin
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值。
解决办法，给其中一个加上border
或在父元素加上padding-top:50px;
11.浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
1.应用场景
- 文字环绕（将图片浮动起来 float:left）
- 横向排列(一般使用浮动，行块盒会空白折叠)
2. 浮动的基本特点
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none(常规流)
- 当一个元素浮动后，元素必定为块盒(更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
3.盒子尺寸
- 宽度为auto时，或不设置宽度的时候，适应内容宽度,如果没有内容的话，width=0;
- 高度为auto时,或就是不设置高度的时候，与常规流一致，适应内容的高度
- margin为auto，为0.
- 边框、内边距、百分比设置与常规流一样
4.盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，(文字永远只可能在行盒里面，行盒可以看作是内容，该生成的行盒看不见)该行盒叫做匿名行盒。
在文字环绕中，想让文字与照片有一段距离，设置照片的margin-right;
5.高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
浮动盒子脱离了常规流，因此常规流盒子在高度计算的时候不会考虑浮动盒子；（手动设置常规流盒子的高度就不一样了）
解决高度坍塌的方法：清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方(设置个div,然后给div元素添加clear属性：both,就可以解决高度坍塌的问题)
12.定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动：float
- 定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
1.position属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
1.相对定位
position:relative;
通常为绝对定位的元素提供包含块
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移,原来是常规流，相对定位后仍然是常规流，原来是浮动，仍然是浮动。
可以通过四个CSS属性对设置其位置：
相对于原来的位置
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响，实际盒子还在原处
当上下出现矛盾的时候，以上边为准；
当左右出现矛盾的时候，以左边为准。
3.绝对定位
position:absolute;
left:是该元素左边离包含块的的距离；
- 宽高为auto，适应内容。
- 包含块(参考坐标系)变化：找祖先中第一个定位元素，该元素的填充盒(padding&&content)为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
应用：
将一个图片放在另一个图片上面
4.固定定位
position:fixed;
其他情况和绝对定位完全一样。
包含块不同：固定为视口**（浏览器的可视窗口）**
box-sizing:border-box;盒的尺寸就是宽高加上边框的宽度；当设置了以后，盒的尺寸就是宽 高
5.定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
position：fixed；
left:0;
right:0;
top:0;
bottom:0;
margin:auto;——将会位于视口正中央；
position：fixed；
left:0;
right:0;
top:0;
margin:auto;——将会位于上层正中央
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
应用：广告
6.多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
常规流元素会完全忽略固定定位元素和绝对定位元素
常规流会避开浮动元素
绝对定位元素默认情况下覆盖常规流元素，但z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
当border-radius:50%;则展示出来的为圆
7.补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
position:absolute;
float:left;
计算过后，其为定位元素，float强行被转变为none,float:none; - 没有外边距合并
扫一扫
7055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
