共计 9086 个字符，预计需要花费 23 分钟才能阅读完成。
CSS 语言的外围性能就是为特定的属性设定特定的值；
CSS 规定集：
选择器：抉择了一个或多个须要增加款式的元素（在这个例子中就是 p 元素）。要给不同元素增加款式只须要更改选择器就行了。
申明：一个独自的规定，如 color: red; 用来指定增加款式元素的属性
属性：扭转 HTML 元素款式的路径。CSS 中，由编写人员决定批改哪个属性以扭转规定。
属性的值：在属性的左边，冒号前面即属性的值，它从指定属性的泛滥外观中抉择一个值
CSS 的引入形式：
内联款式(行内款式)：优先级较高
eg:<div style="color:red"> 设置文字的色彩为红色 </div>
外部样式表: 款式与构造拆散
留神点:
1.style 标签要写在 head 标签的开始标签和完结标签之间(也就是和 title 标签是兄弟关系)
2.style 标签中的 type 属性其实能够不必写, 默认就是 type=”text/css”
3. 设置款式时必须依照固定的格局来设置. key: value; 其中: 不能省略, 分号大多数状况下也不能省略
eg:`<style type=”text/css”>
p{
color:red;
background-color:yellow; }
</style>`
内部样式表: 款式与构造拆散，解耦；款式的复用率高（框架: 例如 bootstrap），共用，定义好的 css 文件能够利用到多个页面中。
eg:<link rel="stylesheet" type="text/css" href="文件的门路"/>
@import url()，还可通过 import 形式导入 CSS 文件
eg:`<style>
/* 要写在 style 标签的最后面，否则不会失效 或者间接在内部 css 文件中间接应用 */@import url(‘./style.css’);
</style>`
引入形式的优先级
行内款式 > 内联款式 / 内部引入
CSS 选择器
标签选择器:
留神点:
1. 标签选择器选中的是以后界面中所有的标签, 而不能独自选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只有是 HTML 中的标签就能够作为标签选择器
id 选择器 :#id 名称{
属性: 值;
}
留神点:
1. 每个 HTML 标签都有一个属性叫做 id, 也就是说每个标签都能够设置 id
2. 在同一个界面中 id 的名称是不能够反复的
3. 在编写 id 选择器时肯定要在 id 名称后面加上#
4.id 的名称是有肯定的标准的
id 的名称只能由字母 / 数字 / 下划线，a-z 0-9 _
id 名称不能以数字结尾
id 名称不能是 HTML 标签的名称，不能是 a h1 img input
5. 在企业开发中个别状况下如果仅仅是为了设置款式, 咱们不会应用 id , 因为 id 是留给 js 应用的
类选择器: . 类名{
属性: 值;
}
留神点:
1. 每个 HTML 标签都有一个属性叫做 class, 也就是说每个标签都能够设置类名
2. 在同一个界面中 class 的名称是能够反复的
3. 在编写 class 选择器时肯定要在 class 名称后面加上.
4. 类名的命名标准和 id 名称的命名标准一样
5. 类名就是专门用来给 CSS 设置款式的
6. 在 HTML 中每个标签能够同时绑定多个类名
后辈选择器: 标签名称 1 标签名称 2{
属性: 值;
}
留神点：
1. 后辈选择器必须用空格隔开
2. 后辈不仅仅是儿子，也包含孙子、重孙子，只有在指定标签中的都是后辈
3. 后辈选择器不仅仅能够应用标签，还能够应用其余选择器
4. 后辈选择器能够通过空格始终延续下去。
子元素选择器：标签名称 1 > 标签名称 2{
属性: 值;
}
留神点:
1. 子元素选择器只会查找儿子, 不会查找其余被嵌套的标签
2. 子元素选择器之间须要用 > 符号连贯, 并且不能有空格
3. 子元素选择器不仅仅能够应用标签名称, 还能够应用其它选择器
4. 子元素选择器能够通过 > 符号始终延续下去
后辈选择器和子元素选择器之间的区别?
1. 后辈选择器应用空格作为连贯符号
2. 子元素选择器应用 > 作为连贯符号
3. 后辈选择器会选中指定标签中, 所有的特定后辈标签, 也就是会选中儿子 / 孙子 …, 只有是被放到指定标签中的特 定标签都会被选中
4. 子元素选择器只会选中指定标签中, 所有的特定的间接标签, 也就是只会选中特定的儿子标签
后辈选择器和子元素选择器之间的共同点：
后辈选择器和子元素选择器都能够应用标签名称 /id 名称 /class 名称来作为选择器
后辈选择器和子元素选择器都能够通过各自的连贯符号始终延续下去
选择器 1 > 选择器 2 > 选择器 3 > 选择器 4{}
交加选择器：给所有选择器选中的标签中, 相交的那局部标签设置属性
选择器 1 选择器 2{
属性: 值;
}
留神点:
1. 选择器和选择器之间没有任何的连贯符号
2. 选择器能够应用标签名称 /id 名称 /class 名称
3. 交加选择器仅仅作为理解, 企业开发中用的并不多
并集选择器：选择器 1, 选择器 2{
属性: 值;
}
留神点：
1. 并集选择器必须应用，连贯
2. 选择器能够应用标签名称 /id 名称 /class 名称
相邻兄弟选择器：给指定选择器前面紧跟的那个选择器选中的标签设置属性
选择器 1 + 选择器 2{
属性: 值;
}
留神点:
1. 相邻兄弟选择器必须通过 + 连贯
2. 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器：给指定选择器前面的所有选择器选中的所有标签设置属性
选择器 1~ 选择器 2{
属性: 值;
}
留神点:
1. 通用兄弟选择器必须用~ 连贯
2. 通用兄弟选择器选中的是指定选择器前面某个选择器选中的所有标签, 无论有没有被隔开都能够选中
伪类选择器：伪类以 ”:” 结尾，用在选择器后，用于指明元素在某种非凡的状态下能力被选中
序选择器（构造伪类选择器）
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最初一个标签
:nth-child(n) 选中同级别中的第 n 个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x 和 y 是用户自定义的, 而 n 是一个计数器, 从 0 开始递增
例如 (3n+1) 别离对应 1,4,7…..
:nth-last-child(n) 选中同级别中的倒数第 n 个标签
:only-child 选中父元素仅有的一个子元素 E。仅有一个子元素时失效
留神点: 不辨别类型
同级别同类型中的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最初一个标签
:nth-of-type(n) 选中同级别中同类型的第 n 个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第 n 个标签
:only-of-type 选中父元素的特定类型的惟一子元素
动静伪类选择器：
E:link（链接伪类选择器）：抉择匹配的 E 元素，而且匹配元素被定义了超链接并未被拜访过。罕用于链接 描点上
E:visited（链接伪类选择器）：抉择匹配的 E 元素，而且匹配元素被定义了超链接并已被拜访过。罕用于 链接描点上
E:active（用户行为选择器）：抉择匹配的 E 元素，且匹配元素被激活。罕用于链接描点和按钮上
E:hover（用户行为选择器）：抉择匹配的 E 元素，且用户鼠标停留在元素 E 上。IE6 及以下浏览器仅反对
a 标签的伪类选择器：
格局
:link 批改从未被拜访过状态下的款式
:visited 批改被拜访过的状态下的款式
:hover 批改鼠标悬停在 a 标签上状态下的款式
:active 批改鼠标长按状态下的款式留神点
a 标签的伪类选择器能够独自呈现也能够一起呈现
a 标签的伪类选择器如果一起呈现, 那么有严格的程序要求
默认状态:link-> 被拜访状态:visited-> 鼠标悬停状态:hover-> 鼠标长按状态:active
编写的程序必须要恪守爱恨准则 love hate
如果默认状态的款式和被拜访过状态的款式一样, 那么能够缩写
否定伪类：能够从已选中的元素中剔除出某些元素
:not(选择器)
伪元素选择器：
::after
示意元素的最初边的局部
个别须要联合 content 这个款式一起应用，通过 content 能够向 after 的地位增加一些内容::before
示意元素最前边的局部
个别须要联合 content 这个款式一起应用，通过 content 能够向 before 的地位增加一些内容
::first-letter
为第一个字符来设置一个款式
::first-line
为第一行设置一个款式
属性选择器：
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于 value 的标签, 而后设置属性
属性的取值是以什么结尾的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2 中的只能找到 value 结尾, 并且 value 是被 - 和其它内容隔开的
CSS3 中的只有是以 value 结尾的都能够找到, 无论有没有被 - 隔开
- 属性的取值是以什么结尾的
[attribute$=value] CSS3
- 属性的取值是否蕴含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2 中的只能找到独立的单词, 也就是蕴含 value, 并且 value 是被空格隔开的
CSS3 中的只有蕴含 value 就能够找到
通配符选择器：给以后界面上所有的标签设置属性
*{
属性: 值;}
因为通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果以后界面上的标签比拟多, 那么性能就会比拟差, 所以在企业开发中个别不会应用通配符选择器
组合选择器：多个选择器组合应用
CSS 三大个性：
继承性：给父元素设置一些属性, 子元素也能够应用, 这个咱们就称之为继承性
留神点:
1. 并不是所有的属性都能够继承, 只有以 color/font-/text-/line- 结尾的属性才能够继承
2. 在 CSS 的继承中不仅仅是儿子能够继承, 只有是后辈都能够继承
3. 继承性中的特殊性
a 标签的文字色彩和下划线是不能继承的
h 标签的文字大小是不能继承的
层叠性：
留神点:
层叠性只有在多个选择器选中 "同一个标签", 而后又设置了 "雷同的属性", 才会产生层叠性
优先级：当多个选择器选中同一个标签, 并且给同一个标签设置雷同的属性时, 如何层叠就由优先级来确定
优先级判断的三种形式：
间接选中就是指继承
如果是间接选中, 那么就是谁离指标标签比拟近就听谁的
- 雷同选择器(间接选中)
如果都是间接选中, 并且都是同类型的选择器, 那么就是谁写在前面就听谁的
- 不同选择器(间接选中)
如果都是间接选中, 并且不是雷同类型的选择器, 那么就会依照选择器的优先级来层叠
id> 类 > 标签 > 通配符 > 继承 > 浏览器默认
优先级之!important：
留神点:
1.!important 只能用于间接选中, 不能用于间接选中
2. 通配符选择器选中的标签也是间接选中的
3.!important 只能晋升被指定的属性的优先级, 其它的属性的优先级不会被晋升
4.!important 必须写在属性值得分号后面
5.!important 后面的感叹号不能省略
6. 然而个别倡议不应用 "!important", 因为它会扭转级联的工作形式，使得调试变得艰难。font-style：用于关上和敞开斜体文本
取值:
italic : 歪斜的
normal：失常的，默认就是失常的
font-weight: 为字体设置粗细水平
取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线，默认就是细线
数字取值：
100-900 之间整百的数字
400 等同于 normal
700 等同于 bold
font-size 为文字指定大小
font-family 为文字指定非凡的字体，浏览器只会应用浏览器能够拜访到的字体
text-decoration: 文本装璜的属性
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用处就是用于去掉超链接的下划线
text-align: 文本程度对齐的属性
取值:
left 左
right 右
center 中
text-indent: 文本缩进的属性
取值:
2em, 其中是 em 单位, 一个 em 代表缩进一个文字的宽度
text-transform : 容许字体扭转，文本变形 , 设置或者勾销字体扭转, 用于使文本显示为全大写或全小写
取值:
none 避免任何扭转
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为相似于一个等宽字体
text-shadow: h-shadow v-shadow blur color;(字体暗影)
取值:
none: 勾销所有暗影
h-shadow : 必须。程度暗影的地位。容许负值。v-shadow : 必须。垂直暗影的地位。容许负值。blur: 可选。含糊的间隔。color: 可选。暗影的色彩。list-style-type : 设置列表项标记类型
list-style-position : 设置列表项标记呈现的地位
取值:
outside : 列表项标记呈现在主块框的内部
inside : 列表项标记呈现在主块框的外部
list-style-image 自定义设置列表项标记
取值:
url() : 指定图标地位
line-height : 设置文本的行高 取值为相对单位或者绝对单位
display :inline 行内显示，宽高有效
block 块级显示，宽高无效
inline-block 行内显示同时宽高无效
none 不显示，不占据屏幕空间
visibility:hidden : 暗藏，占据屏幕空间
visible 显示
overflow : 溢出解决
hidden 超出内容暗藏
auto 超出产生滚动条
scroll 滚动条
cursor: 指定光标的款式
外边距合并景象: 垂直方向上, 外边距是不会叠加的, 会呈现合并景象, 谁的外边距比拟大就听谁的。程度方向上的外边距会叠加.
内边距:
留神点:
1. 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2. 给标签设置内边距之后, 内边距也会有背景色彩
内容盒子:
width 属性仅示意盒子内容所占的宽度
height 属性仅示意盒子内容所占的高度
边框盒子:
内容区的宽：width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高：height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽：width
盒子的高：height
所占屏幕空间的宽 : width+marginLeft+marginRight
所占屏幕空间的高 :height+marginTop+marginBottom
盒子模型留神点:
1. 如果两个盒子是嵌套关系, 那么设置了外面一个盒子 (子元素) 顶部的外边距, 里面一个盒子 (父元素) 也会被 顶下来。
起因:
子元素和父元素上边框重合在一起。因为父元素的第一个子元素的顶部外边距 margin-top 如果碰不到无效的 border 或者 padding，就会一直一层 一层的找本人父元素的麻烦。只有给父元素设置一个无效的 border 或 padding 就能够无效的管制这 margin-top，避免它越级，把本人的 margin-top 当成父元素的 margin-top 执行。
2. 如果里面的盒子不想被一起顶下来, 那么能够给里面的盒子增加一个边框属性。
3. 在企业开发中, 个别状况下如果须要管制嵌套关系盒子之间的间隔, 应该首先思考 padding, 其次再思考 margin，margin 实质上是用于管制兄弟关系之间的间隙的。
4. 只有一般文档流中块框的垂直外边距才会产生外边距合并。行内框、浮动框或相对定位之间的外边距不 会合并。
5. 在嵌套关系的盒子中, 咱们能够利用 margin: 0 auto; 的形式来让外面的盒子在里面的盒子中程度居中
margin:0 auto = margin:0 auto 0 auto，示意高低为 0，左右为 auto；
6.margin: 0 auto; 只对程度方向无效, 对垂直方向有效
background-color 背景色彩
background-image 背景图片
background-repeat 背景平铺属性
取值:
repeat 默认, 在程度和垂直都须要平铺
no-repeat 在程度和垂直都不须要平铺
repeat-x 只在程度方向平铺
repeat-y 只在垂直方向平铺
background-position 背景定位属性
取值
具体的方位名词
程度方向: left center right
垂直方向: top center bottom
具体的像素
例如: background-position: 100px 200px;
记住肯定要写单位, 也就是肯定要写 px
记住具体的像素是能够接管正数的
background-attachment: 用于批改关联形式
取值：
scroll 默认值，会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
浮动流排版形式
1. 浮动流是一种 ” 半脱离规范流 ” 的排版形式
2. 浮动流只有一种排版形式, 就是程度排版. 它只能设置某个元素左对齐或者右对齐
浮动元素字围景象:
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会主动给浮动的元素让地位, 这个就是浮动元素字围景象
- 留神点:
1. 浮动流中没有居中对齐, 也就是没有 center 这个取值
2. 在浮动流中是不能够应用 margin: 0 auto;
- 特点:
1. 在浮动流中是不辨别块级元素 / 行内元素 / 行内块级元素的
无论是块级元素 / 行内元素 / 行内块级元素都能够程度排版
2. 在浮动流中无论是块级元素 / 行内元素 / 行内块级元素都能够设置宽高
3. 综上所述, 浮动流中的元素和规范流中的行内块级元素很像
解决高度塌陷
1. 所以在开发中肯定要避免出现高度塌陷的问题, 咱们能够将父元素的高度写死，以防止塌陷的问题出 现，然而一旦高度写死，父元素的高度将不能主动适应子元素的高度，所以这种计划是不举荐应用的。2. 能够间接在高度塌陷的父元素的最初，增加一个空白的 div，因为这个 div 并没有浮动，所以他是能够 撑开父元素的高度的，而后在对其进行革除浮动，这样能够通过这个空白的 div 来撑开父元素的高度，根本没有副作用。应用这种形式尽管能够解决问题，然而会在页面中增加多余的构造。clear 属性取值:
none: 默认取值, 依照浮动元素的排序规定来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找后面的左浮动元素
right: 不要找后面的右浮动元素
both: 不要找后面的左浮动元素和右浮动元素
3. 通过 after 伪类
能够通过 after 伪类向元素的最初增加一个空白的块元素，而后对其革除浮动，这样做和增加一个 div 的原理一样，能够达到一个雷同的成果，而且不会在页面中增加多余的 div，这是咱们最举荐使 用的形式，简直没有副作用。.clearfix::after{
/* 增加一个内容 */
content: "";
/* 转换为一个块元素 */
display: block;
/* 革除两侧的浮动 */
clear: both;
}
BFC 的布局规定
- 外部的 Box 会在垂直方向一个接着一个地搁置。
- Box 垂直方向上的间隔由 margin 决定。属于同一个 BFC 的两个相邻的 Box 的 margin 会产生重叠。
- 每个盒子的左外边框紧挨着蕴含块的左边框，即便浮动元素也是如此。
- BFC 的区域不会与 float box 重叠。
- BFC 就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素，反之亦然。
- 计算 BFC 的高度时，浮动子元素也参加计算。
哪些元素会生成 BFC
1. 根元素
2.float 属性不为 none
3.position 为 absolute 或 fixed
4.display 为 inline-block table-cell table-caption flex inline-flex
5.overflow 不为 visible
BFC 的作用
- 解决浮动元素令父元素高度坍塌的问题
办法：给父元素开启 BFC
原理：计算 BFC 的高度时，浮动子元素也参加计算
定位布局
动态定位：所有元素的默认定位形式。意味着将一个元素定位在默认文档流中（position: static;）
绝对定位：绝对于本人以前在规范流中的地位来挪动（position: relative;）
绝对定位留神点
- 绝对定位是不脱离规范流的, 会持续在规范流中占用一份空间
- 在绝对定位中同一个方向上的定位属性只能应用一个
- 因为绝对定位是不脱离规范流的, 所以在绝对定位中是辨别块级元素 / 行内元素 / 行内块级元素
- 因为绝对定位是不脱离规范流的, 并且绝对定位的元素会占用规范流中的地位, 所以当给绝对定位 的元素设置 margin/padding 等属性的时会影响到规范流的布局
相对定位：相对定位就是绝对于 body 来定位（position: absolute;）
相对定位参考点：
1. 法则
默认状况下所有的相对定位的元素, 无论有没有先人元素, 都会以 body 作为参考点
2. 如果一个相对定位的元素有先人元素, 并且先人元素也是定位流, 那么这个相对定位的元素就会以定位流 的那个先人元素作为参考点。
2.1 只有是这个相对定位元素的先人元素都能够
2.2 指的定位流是指相对定位 / 绝对定位 / 固定定位
2.3 定位流中只有动态定位不行
3. 如果一个相对定位的元素有先人元素, 并且先人元素也是定位流, 而且先人元素中有多个元素都是定位流, 那么这个相对定位的元素会以离它最近的那个定位流的先人元素为参考点。
- 相对定位程度居中
只须要设置相对定位元素的 left:50%;
而后再设置相对定位元素的 margin-left: - 元素宽度的一半 px;
固定定位：position: fixed;
留神点:
1. 固定定位的元素是脱离规范流的, 不会占用规范流中的空间
2. 固定定位和相对定位一样不辨别行内 / 块级 / 行内块级
粘滞定位：position: sticky;
应用条件：
父元素不能 overflow:hidden 或者 overflow:auto 属性。
必须指定 top、bottom、left、right4 个值之一，否则只会处于绝对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内失效
z-index：默认取值 0
留神点:
1. 从父景象
1.1 如果两个元素的父元素都没有设置 z -index 属性, 那么谁的 z -index 属性比拟大谁就显示在下面。
1.2 如果两个元素的父元素设置了 z -index 属性, 那么子元素的 z -index 属性就会生效, 也就是说谁的父元素的 z -index 属性比拟大谁就会显示在下面。