关于CSS （Cascading Style Sheets）
Posted Tap? taq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于CSS （Cascading Style Sheets）相关的知识，希望对你有一定的参考价值。
CSS规则
包含选择器和声明块
选择器：选中元素
1. 元素选择器（h1,p,a,span...）
2. id选择器（#选择器名称）唯一的 在html中的写法：id=选择器名
3. 类选择器（.选择器名称）在html中的写法：class=选择器名
声明块：出现在大括号中
声明块中含多个声明，声明以分号结束
每一个声明表达了某一方面的样式（如：背景颜色，字体颜色等属性）
添加样式的方法
1. 内部样式表（在head里面插入style标签）
2. 外部样式表（在head里面使用link标签插入css文件链接（相应属性写在此独立文件中））
3. 内联样式表（在html中的各个标签中写style的相应属性）
推荐用第二种，原因：1.可以解决多个页面样式重复的问题
2.有利于浏览器缓存，从而提高页面响应速度
3.有利于把html和css代码分离，更容易阅读和维护
CSS常见的样式声明
1. color：元素内部的文字颜色（预设值（定义好的单词），三原色（红绿蓝，每个颜色用0-255之间的数字来表达））
rgb表示法：rgb(红,绿,蓝)
十六进制表示法：#红绿蓝
2. background-color：元素背景颜色
3. font-size：元素内部文字的尺寸大小
单位：px（像素） 绝对单位
em 相对单位（相对于父元素的字体大小）
每个元素必须有字体大小，若没有声明，则使用父元素的字体大小。若没有父元素（html），则使用基准字号。
4. font-weight：文字粗细程度，可取值数字，可取值为预设值。
5. font-family：文字类型（用户计算机中存在的字体才会生效）
一般使用多个字体来匹配不同环境
6. font-style：字体样式，通常设置为斜体。
i元素：默认样式，斜体字体。实际使用中，通常用它表示图标（icon）
7. strong,em：默认加粗
8. text-decoration：文本修饰，给文本加线
a元素，del元素和s元素默认自带线
9. text-indent：首行文本缩进
10. line-height：每行文本的高度（该值越大，每行文本的距离越大）
设置行高为容器的高度，可让单行文本垂直居中。
行高可设置为纯数字，表示相对于当前元素的字体大小（推荐使用）
11. width：宽度
12. height：高度
13. letter-space：文字间隙
14. text-align：元素内部文字的水平排列方式
选择器
帮助你准确的选中想要的元素
简单选择器： 1. id选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器（*）
5. 属性选择器（[属性]）
6. 伪类选择器（选中某些元素的某种状态，如:hover（鼠标悬停状态）,:active（激活状态，鼠标按下状态）,:link（超链接未访问时的状态），:visited（超链接访问过的状态））
若同时都写上，则书写顺序为：link,visited,hover,active（记忆：love hated）
7. 伪元素选择器（::before,::after,...）
xxx::before{
content:\'xxx\'
}
选择器的组合：1. 后代元素 -- 空格
2. 并且
3. 子元素 -- >
4. 相邻兄弟元素 -- +
5. 后面出现的所有兄弟元素 -- ~
选择器的并列：多个选择器，用逗号分隔 （语法糖）
有关层叠问题
层叠：解决声明冲突的过程（浏览器自动处理（权重计算））
（声明冲突：同一个样式多次应用到同一个元素）
解决过程：1.比较重要性（重要性从高到低：作者样式表中的!important样式。作者样式表的普通样式。浏览器默认样式表中的样式。）
2.比较特殊性（总体规则：选择器选中的范围越窄越特殊。具体规则：通过选择器计算出一个4位数（千位：如果是内联样式则计为1，否则计为0。百位：等于选择器中所有id选择器的数量。十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量。个位：等于选择器中所有元素选择器，伪元素选择器的数量。））
3.比较源次序（代码书写靠后的）
应用：1.重置样式表（书写一些作者样式，覆盖浏览器的默认样式）
常见的重置样式表：normalize.css，reset.css，meyer.css
有关继承问题
子元素继承父元素的某些css属性
通常，跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有css属性必须有值
属性值计算过程：一个元素从所有属性都没有值，到所有的属性都有值
过程的四个步骤：1. 确定声明值：参考样式表中没有冲突的声明，作为css属性
2. 层叠冲突：对样式表有冲突的声明使用层叠规则（比较重要性，特殊性，源次序），确定css属性值
3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4. 使用默认值：对仍然没有值的属性，使用默认值
e.g：<div><a></a><p></p></div>
div{color:red}
a在参考样式表（浏览器默认样式表）中有声明了，所以a元素没有变为红色。而p没有声明，则继承了div的color属性，变为红色。
特殊的两个css取值：inherit（手动继承，将父元素的值取出应用到该元素）
initial（初始值，将该属性设置为默认值）
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：1.行盒（display等于inline的元素）
2.块盒（display等于block的元素）
行盒在页面中不换行，块盒独占一行
常见的块盒：容器元素，h1~h6，p...
常见的行盒：span，a，img，video...
盒子的组成部分：无论是行盒还是块盒，都由下面几个部分组成
从内到外分别是：1. 内容（content）：width，height，设置的是盒子内容的宽高
（内容区=内容盒）
2. 填充（paddig）：padding-left/right/top/bottom，设置的是盒子边框到盒子内容的距离
（填充区+内容区=填充盒）
3. 边框（border）：边框样式（border-style）+边框宽度（border-width）+边框颜色（border-color）
（边框+填充区+内容区=边框盒）
4. 外边距（margin）：margin-left/right/top/bottom，设置的是边框到其他盒子的距离
盒模型应用：
改变宽高范围：默认情况下，width和height设置的是内容盒宽高
CSS3有个box-sizing属性
box-sizing:border-box（改变宽高的影响）
背景覆盖范围：默认情况下，背景覆盖边框盒
可通过background-clip进行修改
溢出处理：overflow控制内容溢出边框盒后的处理方式
断词规则：word-break会影响文字在什么位置被截断换行
空白处理（单行文本溢出部分打点）：
white-space:no-wrap
overflow:hidden
text-overflow:ellipsis
行盒盒模型：
常见行盒：包含具体内容的元素（span，strong，em，i...）
特点：1. 盒子沿着内容延伸。
2. 行盒不能设置宽高。
调整行盒的宽高，应使用字体的大小，行高，字体类型，间接调整。
3. 内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。
4. 边框
水平方向有效，垂直方向不会实际占据空间。
5. 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒：
display：inline-block
特点：不独占一行
盒模型中所有尺寸都有效
空白折叠发生在行盒（行块盒）内部或行盒（行块盒）之间
可替换元素和非可替换元素：
非可替换元素：大部分元素，页面上显示的结果取决于元素内容。
可替换元素：少部分元素，页面上显示的结果取决于元素属性。（img，video，audio...）
（绝大部分可替换元素均为行盒。可替换元素类似于行块盒，盒模型中所有尺寸都有效）
块盒：
每个块盒的总宽度必须刚好等于包含块的宽度
宽度默认值是auto
margin的取值也可以是auto，默认值为0
auto：将剩余空间吸收掉
width吸收能力强于margin
若宽度，边框，内边距计算后仍然有剩余空间，该剩余空间被margin-right全部吸收
每个块盒垂直方向上的auto值：height:auto（适应内容的高度）
margin:auto（表示0）
百分比取值：padding，宽，margin可以取值为百分比
所有百分比相对于包含块的宽度
高度百分比：包含块的高度是否取决于子元素的高度，设置百分比无效
包含块的高度不取决于子元素的高度，百分比相对于父元素的高度
上下外边距的合并：两个常规流块盒，上下外边距相邻，会进行合并
两个外边距取最大值
常规流
盒模型：规定单个盒子的规则
视觉格式化模型：页面中多个盒子排列规则
视觉格式化模型大体将页面中盒子的排列分为3种方式：
1. 常规流
2. 浮动
3. 定位
常规流（文档流，普通文档流，常规文档流）布局：
所有元素默认情况下都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块为其父元素的内容盒
在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto
浮动：
应用场景：文字环绕，横向排列
基本特点：修改float属性值为：left（左浮动，元素靠上靠左）
right（右移动，元素靠上靠右）
默认为none
当一个元素浮动时，元素必定为块盒（会更改display属性为block）
浮动元素的包含块和常规流一样，为父元素的内容盒
盒子尺寸：宽度为auto时，表示适应内容宽度
高度为auto时，表示适应内容高度
margin为auto时，为0
边框，内边距，百分比设置与常规流一样
盒子排列：左浮动的盒子靠左排列
右浮动的盒子靠右排列
浮动盒子在包含块中排列时，会避开常规流盒子
常规流块盒在排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子
外边距合并不会发生
若文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
高度坍塌造成的原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
解决方式：清除浮动（涉及css属性clear）
.clearfix::after{content:\'\'; display:block; clear:both}
浮动的一些细节：浮动盒子的顶边不得高于上一个盒子的顶边
若剩余无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
定位：
手动控制元素在包含块中的精准位置（涉及css属性position）
position取值：static（默认值）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位：不会导致元素脱离文档流，只是让元素在原来位置上进行偏移（盒子的偏移不会影响其他盒子）
绝对定位：宽高为auto时，适应内容
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则其包含块为整个网页（初始化包含块）
固定定位：其他情况和绝对定位完全一样，而包含块不一样（固定为视口（浏览器的可视窗口））
定位下的居中（主要是绝对定位和固定定位）：定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto
绝对定位，固定定位元素一定是块盒
绝对定位，固定定位元素一定不是浮动
没有外边距合并
多个定位元素重叠时：堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，若为负数，则遇到常规流/浮动元素，将会被其覆盖
其他选择器扩展
更多伪类选择器：first-child（选中第一个子元素）
last-child（选中最后一个子元素）
nth-child（选中指定的第几个子元素）
nth-of-type（选中指定的第几个元素类型）
更多伪元素选择器：first-letter（选中元素中的第一个字母）
first-line（选中元素中第一行的文字）
selection（选中被用户框选的文字）
更多样式
透明度：opacity（设置整个元素的透明度，取值为0~1）
鼠标：cursor（取值pointer，auto，grab...）
设置鼠标图片样式：cursor:url(\'xxx\'),auto
盒子隐藏：display:none
visibility:hidden
背景图：属于css概念
当图片属于网页内容时，必须使用img元素（HTML）
当图片仅用于美化页面，必须使用背景图（CSS）
背景图涉及的css属性：background-image（背景图图片）
background-repeat（背景图是否重复）
background-size（背景图大小）
background-position（背景图位置，可应用在精灵（雪碧）图）
background-attachment（背景图是否固定（相对于视口））
background-color（背景图和背景颜色混用）
简写形式：background:background-color background-image background-position/background-size bakcground-repeat background-attachment...
设置body背景：画布（一块区域）
特点：最小宽度为视口宽度
最小高度为视口高度
HTML元素的背景：覆盖画布
若HTML元素有背景，BODY元素正常（背景覆盖边框盒）
若HTML元素没有背景，BODY元素的背景覆盖画布
关于body的背景图：有背景图的宽度百分比，相对于视口
有背景图的高度百分比，相对于HTML元素（网页）的高度
背景图的横向位置百分比，预设值都相对于视口
背景图的纵向位置百分比，预设值都相对于网页
@规则
@import "路径" （导入另外一个css文件）
@charset "utf-8"（告诉浏览器该css文件使用的字符编码集是utf-8，要写到css文件的第一行）
web字体和图标
web字体：解决用户电脑上没有安装相应的字体，强制让用户下载该字体
制作新字体（使用@font-face指令）：@font-face{font-family:\'newfont\',src:url(\'字体路径\')} p{font-family:\'newfont\'}
字体图标（常用）：网址:iconfont.cn
块级格式化上下文
简称BFC，它是一块独立的渲染区域，规定了该区域中，常规流块盒的布局。
常规流块盒的布局：
常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距的合并
常规流块盒的自动高度和摆放位置，无视浮动元素
BFC渲染区域：
此区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：根元素（<html>）
浮动和绝对定位元素
overflow不等于visible的块盒
不同的BFC区域，它进行渲染时互不干扰
创建BFC的元素，他的自动高度需要计算浮动元素（副作用最小的创建方式为overflow：hidden）
创建BFC的元素，他的边框盒不会与浮动元素重叠
创建BFC的元素，不会和他的子元素进行外边距合并
布局
多栏布局：两栏布局，三栏布局
等高布局实现：CSS3的弹性盒
JS控制
伪等高（某一栏的height写大一点，然后加上margin-bottom，主区域溢出部分隐藏从而实现伪等高）
元素书写顺序：主区域代码靠前书写
后台页面布局：部分区域实现溢出滚动
行高的取值（扩展）
1. px（像素值）
2. 无单位数字（行高为字体大小的几倍（先继承，再计算像素值））
3. em单位（行高为字体大小的几倍（先计算像素值，再继承））
4. 百分比（相当于em单位）
行盒的垂直对齐
多个行盒在垂直方向上的对齐：给没有对齐的元素设置vertical-align属性（有预设值和数值）
图片的底部白边：图片的父元素是个块盒，块盒高度自动，图片底部和父元素底部之间往往会出现空白
解决底部白边：设置父元素字体大小为0（有文字的话不建议使用）。设置图片为块盒（display：block）
字体的参考线（扩展）
一个字体，有5条线（从上到下）：顶线，上基线，基线，下基线，底线（不同文字类型参考线不一样）
决定参考线：font-size,font-family,line-height
font-size：字体大小，设置的是文字的相对大小
文字的相对大小：1000,2048,1024
文字顶线到底线的距离为文字的实际大小（content-area 内容区）
行盒的背景，覆盖content-area
行高：顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做gap（空隙）
gap默认情况下是字体设计者决定的
top（顶线上面）到bottom（底线下面）叫做virtual-area（虚拟区/行高）
错误说法：文字一定出现一行的最中间
正确说法：content-area一定出现在virtual-area的中间
vertical-align：一个元素如果子元素出现行盒，该元素内部也会产生参考线
设置的值为baseline时表示该元素的基线与父元素的基线对齐
设置的值为super时表示该元素的基线与父元素的上基线对齐
设置的值为sub时表示该元素的基线与父元素的下基线对齐
设置的值为text-top时表示该元素的virtual-area的顶边对齐父元素的text-top（文本顶边）
设置的值为text-bottom时表示该元素的virtual-area的底边对齐父元素的text-bottom（文本底边）
设置的值为top时表示该元素的virtual-area的顶边对齐父元素的顶边（该行中的最高顶边）
设置的值为bottom时表示该元素的virtual-area的底边对齐父元素的底边（该行中的最低底边）
设置的值为middle时表示该元素的中线（content-area的一半）与父元素的x字母高度一半对齐
设置的值为数值时表示相对于基线的偏移量。向上为正数，向下为负数
设置的值为百分比时表示相对于基线的偏移量。百分比时相对于自身virtual-area的高度
行盒组合起来可以形成多行，每一行的区域叫做line-box。
line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
实际上一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
line-box是承载文字内容的必要条件，以下情况不生成行框（line-box）：某元素的内部没有任何行盒。某元素字体大小为0。
可替换元素和行块盒的基线：
图片：基线位置位于图片的下外边距
表单元素：基线位置在内容底边
行块盒：行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线
若行块盒内部没有行盒，则用下外边距作为基线
堆叠上下文
是一块区域，这块区域由某个元素创建，他规定了该区域中的内容在z轴上排列的先后顺序。
创建堆叠上下文的元素：html元素（根元素）
设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在z轴上的排列（从后到前）：1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插
svg（扩展）
可缩放的矢量图
使用代码书写而成，缩放不会失真，内容轻量
svg可嵌入浏览器，也可单独成为一个文件
svg使用xml语言定义
书写svg代码：<svg width=\'\' height=\'\' xmlns=\'xxxxxx\'>...</svg>
矩形：<rect/>
圆形：<circle/>
椭圆：<ellipse/>
线条：<line/>
折线：<polyline/>
多边形：<polygon/>
路径：<path/>
某些属性：fill（填充颜色）
stroke（描边）
stroke-width（描边的宽度）
x,y（位置）
width,height（宽高）
cx,cy（圆形（椭圆）的中心点坐标）
r（圆形半径）
rx,ry（椭圆的短半径和长半径）
x1,y1,x2,y2（线条的首尾坐标）
points（折线（多边形）的点坐标）
d（书写路径）： M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc（设值：半径1，半径2，顺时针旋转角度，小弧（0）大弧（1），顺时针（1）逆时针（0））
Z = closepath
数据链接（扩展）
data url
书写：将目标文件的数据直接书写到路径位置
语法：data:MIME,数据
意义：优点：减少了浏览器的请求
有利于动态生成数据
缺点：增加了资源的体积
导致传输内容增加，从而增加单个资源的传输时间
不利于浏览器缓存
会增加原资源的体积到原来的4/3
应用场景：当请求单个图片体积较小，并且该图片因为各种原因不适合制作雪碧图，可使用数据链接
图片由其他代码动态生成，并且图片较小，可使用数据链接
base64：一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示
浏览器的兼容性
厂商前缀：IE：-ms-
Chrome，safari：-webkit-
opera：-o-
firefox：-moz-
浏览器在处理样式或元素时，使用如下方式：当遇到无法识别的代码时直接略过
css hack：根据不同的浏览器（主要针对IE），设置不同的样式和元素
样式：IE中，CSS的特殊兼容符号
*属性：兼容IE5，IE6，IE7
_属性：兼容IE5，IE6
属性值\\9：兼容IE5~IE10
属性值\\0：兼容IE8~IE11
属性值\\9\\0：兼容IE9~IE10
IE5~IE7的外边距bug：浮动元素的左外边距翻倍
IE的条件判断：<!--[if IE]>
<p>
这是IE浏览器
</p>
<![endif]-->
<p>
这是非IE浏览器
</p>
两种解决兼容性问题的思路（会影响代码的书写风格）：渐进增强和优雅降级
渐进增强：先适应大部分浏览器，然后针对新版本的浏览器加入新的样式
书写代码时，先尽量避免书写有兼容性问题的代码，完成后再逐步加入新标准中的代码
优雅降级：先制作完整的功能，然后再针对低级版本浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能后，再针对低版本浏览器处理样式
推荐网址：caniuse，可查看各属性在不同浏览器版本的兼容性
居中总结
水平居中：
行盒（行块盒）水平居中：直接设置行盒（行块盒）父元素 text-align:center
常规流块盒水平居中：定宽，设置左右margin为auto
绝对定位元素水平居中：定宽，设置左右的坐标为0（left：0，right：0），将margin设置为auto
（实际上，固定定位是绝对定位的特殊情况）
垂直居中：
单行文本的垂直居中：设置文本所在元素的行高为整个区域的高度
行块盒或块盒内多行文本的垂直居中：设置盒子上下内边距相同，达到类似的效果（没有完美方案）
绝对定位的垂直居中：定高，设置上下的坐标为0（top：0，bottom：0），将上下margin设置为auto
样式补充
display：list-item
设置该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列
涉及的css属性：list-style-type（设置次盒子中内容的类型）
list-style-position（设置次盒子相对于主盒子的位置）
图片失效时的宽高问题：若img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
行盒中包含行块盒或可替换元素：行盒的高度与它内部的行块盒或可替换元素的高度无关
text-align：left（左对齐）
right（右对齐）
center（居中）
justify（除最后一行外，分散对齐）
利用颜色属性值的transparent制作三角形
direction和writing-mode：
direction设置的是开始到结束的方向
writing-mode设置的是文字书写方向
以上是对CSS的部分整理和总结，希望有用，有什么建议欢迎提出哦！
大家一起进步~
以上是关于关于CSS （Cascading Style Sheets）的主要内容，如果未能解决你的问题，请参考以下文章