概述
HTML是页面的结构，CSS是美化页面
CSS（Cascading Style Sheets）：层叠样式表
样式表：存储样式的地方，多个样式
CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等），图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
作用：修饰HTML页面，更丰富多彩的展示超文本信息
因为HTML在单独使用设置属性会有一定的局限性，所以用CSS样式。
样式类型
1.行内样式表（内联样式）:<div style="width:400px;height:200px;background-color:#FFF"></div>
一般写在标签头部
放置规范：在<style>标签内容体中书写css样式代码</style> <style>标签放置在<head>标签之中
格式规范：选择器名称｛属性名1：属性值1； 属性名2：属性值2；……｝
代码规范：属性名和属性值之间是键值对关系 ：连接 ；结尾
如果一个属性名有多个值，多个值之间用空格隔开：border:1px solid red;
CSS注释：/*注释内容*/ 等同于java的多行注释
缺点:样式只能操作某一个标签 优点:十分灵活，可以进行细节的调节,更加针对性修改某个标签的样式
2.嵌入式样式表（嵌入样式）:<style type="text/css"></style>
一般写在<head></head>标签内。可以通过一条语句操作多个标签或类，但是仅限本页面内
3.引用式样式表（外联样式）:<link href="css文件路径" rel="stylesheet" type="text/css" />
rel=”stylesheet” 固定值，表示样式表
type=”text/css” 固定值，表示css类型
href表示css文件位置
(能用引用式样式表的地方就尽量用引用式)
一般写在<head></head>标签内。(多个HTML文件可以引用一个CSS样式表文件)
优点:占用空间资源少，修改方便，只要修改CSS文件就可以修改多个HTML页面的属性，适合不同页面进行样式复用
CSS注释写法:/* */ HTML注释写法:<!-- -->
当三种样式表操作同一元素时，优先级依次为:行内样式表，嵌入式样式表，引用式样式表。 即后出现的先应用。引用式样式表一般放在嵌入式样式表的前面
书写规则
不要忘记每条属性的“;”结尾
如果缺少符号或者书写错误则样式表失效
需要单位的值要加上单位，例如:px(像素单位)
选择器
选择器：指定CSS样式作用在哪些HTML标签上
1.标签选择器：HTML标签又名html元素，就是以HTML标签名作为选择器名称。
作用：选择CSS样式代码，对应标签名的标签上。
格式：
1 | 标签名｛ |
适用范围：适用于将相同样式，作用在多个同名标签上
2.类选择器：以HTML的类名（class属性值）作为选择器名称
每个HTML标签都有一个class属性，class属性即为类名。
作用：选择CSS样式代码作用于对应类名的HTML标签上。
格式：
1 | .类名｛ |
使用范围：适用于将样式一次作用在相同类名的标签上（即使标签名不同）。
3.id选择器：以HTML的id（id属性值）作为选择器名称
每个HTML标签都有一个id属性，这个id属性值必须在本页面是唯一的
作用：选择CSS样式代码作用于某个规定id值的html标签上
格式：
1 | #id值｛ |
适用范围：适用于将样式作用某个标签上（更有针对性）
4.属性选择器
1 | a[href="segmentfault.com"]{ |
5.伪类选择器
1 | :hover{ |
6.伪元素选择器
1 | ::before{ |
7.通配选择器
1 | *{ |
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
1 | 后代选择符： |
CSS样式的优先级
CSS 的继承性
1.最近的祖先样式比其他祖先样式优先级高
2.”直接样式”比”祖先样式”优先级高
（总结就是看最近的元素的样式）
选择器的优先级
3.优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
1 | // HTML |
4.计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照”就近原则”来判断
如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢？这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高，其实这仍然可以用规则 4 来解释
5.属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级
px、rpx、em、rem
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，em是相对于父元素的字体属性而计算的，一般都是以<body>的“font-size”为基准。em指字体高，任意浏览器的默认字体高都是16px。其他比如WordPress官方主题Twenntytwelve的基准就是14px=1em。
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
CSS样式
字体属性：(font)
样式：
color : #999999; 文字颜色
font-family : sans-serif; 字体类型 “Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana
font-size: 字体大小 inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small |数值 单位：pt，px
font-weight: 字体粗细 bold,bolder; (文字粗体） lighter;(细体) normal;(正常) 100-900
font-style: 字体风格 itelic; (文字斜体） normal;(正常) oblique;(偏斜体) inherit(继承)
letter-spacing : 字间距离 数值|inherit|normal
word-spacing: 单词间距 数值|inherit|normal
line-height : 设置行高 normal;(正常) inherit(继承) 数值 单位：PX、PD、EM
text-shadow: 阴影颜色 {16位色值}
font-variant: 字体变形 {inherit|normal|small-cps（小字体，小型大写字母） }
font-size-adjust:字体变形 {inherit|none}
font-stretch:字体 {condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
修饰：inherit|none|underline|overline|line-through|blink
text-decoration:line-through; 加删除线
text-decoration: overline; 加顶线（上划线）
text-decoration:underline; 加下划线
text-decoration:none; 删除链接下划线
text-decoration:blink; 闪烁
大小写：
text-transform:inherit|none|capitalize|uppercase|lowercase
text-transform : capitalize; 首字大写
text-transform : uppercase; 英文大写
text-transform : lowercase; 英文小写
背景属性： (background)
色彩：
background-color:#F5E2EC; 背景颜色
两种方式：
①英文单词
②颜色代码 格式：#红绿蓝，每一个颜色用两个16进制位数表示 例如：#ff1100 红色ff 绿色11 蓝色00 红色颜色最重，绿色其次，没有蓝色 （数值代表每个颜色的色重）
background:transparent; 透视背景
图片：
background-image : url(/image/bg.gif); 背景图片 url(URL)|none
重复： inherit|no-repeat|repeat|repeat-x|repeat-y
background-repeat : repeat; 重复排列-网页默认
background-repeat : no-repeat; 不重复排列
background-repeat : repeat-x; 在x轴重复排列
background-repeat : repeat-y; 在y轴重复排列
滚动：
background-attachment : fixed; 浮水印固定背景 scroll;(滚动)
位置：
background-position : 90% 90%; 背景图片x与y轴的位置
background-position : top; 向上对齐
background-position : buttom; 向下对齐
background-position : left; 向左对齐
background-position : right; 向右对齐
background-position : center; 居中对齐
简写： 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
例： {background:#000 url(..) repeat fixed left top;}
区块属性： (Block)
排列方式：
text-align:right; 文字右对齐
text-align:left; 文字左对齐
text-align:center; 文字居中对齐
text-align:justify; 文字分散对齐（两端对齐）
vertical-align:baseline; 基线
vertical-align:top; 垂直向上对齐
vertical-align:bottom; 垂直向下对齐
vertical-align:middle; 垂直居中对齐
vertical-align:text-top; 文字垂直向上对齐
vertical-align:text-bottom; 文字垂直向下对齐
vertical-align:sub; 下标字
vertical-align:super; 上标字
显示属性：（display）
display属性可以使得元素在行内元素和块元素之间相互转换
格式： 选择器{display:属性值 }
属性值：block：此元素显示为块元素（块元素默认的display属性值）
inline：此元素显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间
display: 显示 {block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
text-indent: 缩进，段首空格 { 数值px; inherit}
white-space: 空格；控制空白 pre;(保留) nowrap;(不换行) normal
writing-mode: 书写方式 {lr-tb（从左到右，从上到下）|tb-rl（从上到下，从右到左）}
visibility: 是否可见 inherit; visible; hidden;collapse
即使不可见的元素也会占据页面上的空间。使用 “display” 属性来创建不占据页面空间的不可见元素
overflow: 当内容溢出元素框时发生的事情
visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
clip: (裁切)剪裁绝对定位元素:这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小
rect (top, right, bottom, left)
auto:默认值。不应用任何剪裁
方框属性： (Box)
CSS盒子模型：所有的HTML元素，都可以看作一个四边形，即一个盒子。
用CSS来设置元素盒子的内边距（padding）、边框(border)和外边距(margin)的样式的方式相当于设置盒子的样式，我们称之为盒子模型。
边框：（HTML元素盒子的框体）简写：border:1px solid red;
宽度：宽度值： thin|medium|thick|数值 100vh 100% 33rem 3em window.screen.width
width:长度|百分比| auto
border-top-width
border-right-width
border-bottom-width
border-left-width
高度：
height:数值|auto
颜色：
border-color:数值 数值 数值 数值； 数值：分别代表top、right、bottom、left颜色值
风格：
border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove
漂浮：
float:left|right|none
通常默认的排版方式，将页面的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，所以需要使用到浮动属性：float
格式： 选择器{float：属性值；}
常用属性值：none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动
因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整。
清除：规定元素的哪一侧不允许其他浮动元素
clear:none|left|right|both
注：这个规则只能影响使用清除的元素本身，不能影响其他元素。这个元素与float对应
外边距，边界留白：HTML元素边框到其他元素边框的距离
margin-top:10px; 上边界
margin-right:10px; 右边界值
margin-bottom:10px; 下边界值
margin-left:10px; 左边界值
通用性设置：margin: 10px;
内边距，补白：HTML元素里的内容体到HTML元素边框的距离
padding-top:10px; 上边框留空白
padding-right:10px; 右边框留空白
padding-bottom:10px; 下边框留空白
padding-left:10px; 左边框留空白
通用性设置：padding: 10px;
边框属性： (Border)
所有的HTML标签都有边框，默认边框不可见
简写： 格式：宽度 样式 颜色
border：width style color;
border-top : 1px solid #6699cc; 上框线
border-bottom : 1px solid #6699cc; 下框线
border-left : 1px solid #6699cc; 左框线
border-right : 1px solid #6699cc; 右框线
也可以使用常规的方式 如下:
border-top-color : #369 设置上框线top颜色
border-top-width :1px设置上框线top宽度
border-top-style : solid设置上框线top样式
其他框线样式：
solid 实线框
dotted 虚线框（点线）
double 双线框
groove 立体内凸框 (槽线)
ridge 立体浮雕框 (脊状)
inset 凹框
outset 凸框
width：边框的宽度
height：边框的高度（只是边框，不是字体）
列表属性： (List-style)
符号列表： disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
list-style-type:none; 不编号
list-style-type:decimal; 阿拉伯数字
list-style-type:lower-roman; 小写罗马数字
list-style-type:upper-roman; 大写罗马数字
list-style-type:lower-alpha; 小写英文字母
list-style-type:upper-alpha; 大写英文字母
list-style-type:disc; 实心圆形符号
list-style-type:circle; 空心圆形符号
list-style-type:square; 实心方形符
图像：
list-style-image:url(/dot.gif); 图片式符号
位置：
list-style-position: outside; 凸排
list-style-position:inside; 缩进
定位属性： (Position)
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position: absolute; 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
position: fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
position:relative; 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素
position:static; 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
position:inherit;规定应该从父元素继承 position 属性的值
Z-index仅能在定位元素上奏效，可被用于将在一个元素放置于另一元素之后,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
连接属性：（a）
a /所有超链接/
a:link 超链接文字格式
a:visited 浏览过的链接文字格式
a:active 按下链接的格式
a:hover 鼠标转到链接
鼠标光标样式： hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize
链接手指 cursor: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
表单属性
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
伪元素::after和::before
::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。它显示的内容是其自身的“content”属性，默认是内联元素。
兼容问题!important
CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。 IE6不认识它的，IE7和别的浏览器中可以用，用来处理浏览器的兼容性。
让两个组件变为一行
1 | <div align="left" style="float:left"> |
vue的样式
<style scoped>
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。
/deep/ >>>
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所有子组件都生效，可以使用 /deep/ 深度选择器
把 /deep/ 换成 >>>，也可以达到同样的效果
lang=”scss”
SCSS是一种CSS预处理语言。定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
SCSS和SASS有什么区别：
· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”
· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；
· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；
注释分为三种：/* */css中显示，//css中不显示，/重要注释!/压缩不会被删掉
@import 命令导入外部sass、scss、css文件
1 | < style lang = "scss" > |
声明变量：语法是：$+变量名+：+变量值；
$color : red ; //声明变量 $color
默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值；
1 | $color : red !default ; //声明默认变量 $color |
区分全局变量和局部变量
全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；
1 | $height : 200px ; //全局变量声明不在大花括号内 |
局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；
1 | body { |
·变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹
1 | $left : left ; |
·变量计算
1 | $left : left ; |
·嵌套
选择器嵌套不多说了
属性嵌套（有相同属性前缀）如下
1 | border:{ |
在嵌套时候可以使用 & 来引用父元素
1 | .container { |
·继承
继承 .class 使用 @extend
1 | .container { |
·SCSS占位符 %
使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。
1 | %m5 { background-color : lightblue ;} |
·重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin
1 | @mixin normalStyle { |
在使用@mixin和@include时，传入参数和默认值
1 | @mixin normalStyle ( $width , $height , $color , $defaultValue : orange ) { |
SCSS使用编程式方法
·条件语句
1 | .container { |
·SCSS中的三种循环
1.for循环
在sass中的@for循环有两种方式：
①@for $i from
②@for $i from
其中$i表示变量，start表示开始值，end表示结束值；
through表示包括end这个数值；to表示不包括end这个数值；
2.while循环
只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；
3.each in循环
就是去遍历一个列表，然后从列表中取出对用值；他的指令形式为：@each $var in ($var为变量值，list为sassscript表达式）
1 | //for 循环 |
·使用@function 自定义函数及使用
1 | @function double ( $sn ){ //SCSS允许自定义函数 |
·可以直接使用SCSS内置的颜色函数，
1 | .myText { |
一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是隐患；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display：inline拘。
css三大特性
层叠性：css样式冲突采取的原则(后者覆盖前者)
继承性：对于部分属性样式会有天生的继承
优先级：选择器优先级算法
选择器
在讲这三个特性之前我们需要来全面了解下选择器。
种类
下面我将选择进行划分为三大部分，对于基本选择器我就不说了，主要讲下伪类选择器，组合选择器及它们各自的使用场景。
基本选择器
类名：.box
标签: div
属性: input[type=“eamil”] | a[href*=“http://www.beige.world”]
ID: #box
伪类选择器
结构伪类: :nth-child(n) | :nth-of-type(n) | :hover
伪元素: ::before | ::after
组合选择器
相邻兄弟 A + B
普通兄弟 A ~ B
子选择器 A > B
后代选择器 A B
基本选择器
算了还是讲下属性选择器吧🤔，这个选择器我在项目开发中还是用到过的
直接看例子：
/* 匹配包含title属性的a标签 => */
a[title] {color: purple;}
/* 存在href属性并且属性值为”http://beige.world"的标签*/
/* */
a[href=“http://beige.world”] {color: green;}
/* 存在href属性并且属性值包含”baidu”的标签*/
/*
*/
a[href*=“baidu”] {font-size: 20px;}
/* 存在id属性并且属性值结尾是”-wrapper”的
标签 */
/*
*/
div[id$=”-wrapper”] {display: flex;}
/* 存在class属性并且属性值包含以空格分隔的”logo”的
元素 */
/*
*/
div[class~=“logo”] { padding: 2px; }
复制代码
伪类选择器
结构伪类
“ alt=”” width=“28” height=“30” align=””>
先讲这两比较作用类似的：nth-child(n) | nth-of-type(n)
结构
1
a1
b1
a2
b2
3
4
5
复制代码
CSS
// 第一个li =>
1
ul li:first-child { background-color: lightseagreen;}
// 最后一个li =>
5
ul li:last-child { background-color: lightcoral;}
// 第三个li =>
3
ul li:nth-child(3) { background-color: aqua; }
// 第二个li下的第一个div(不是div标签的都不算) =>
b1
ul li:nth-child(2) > div:nth-of-type(1) {background-color: red}
复制代码
它俩的区别
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素
下面讲讲nth-child()括号中的公式，这个算是这个选择器的亮点了。
“ alt=”” width=“28” height=“30” align=””>
注意⚠：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略
对于这里面的公式平常也用不到太复杂的，我说下我的技巧：nth-child(3n + 3); 这里的n可以看做几个为一组，3可以看做选这组的第几个。
例： nth-child(5n + 3) ：5个为一组，选一组中的第三个。 对于”-“号就表示选择的是前面的。
组合选择器
组合选择器本质上就是通过连接符来对两个选择器进行组合
子选择器 A > B
后代选择器 A B
上面这两我就不说了，相信大家都用烂了。主要说说下面这两个。
相邻兄弟 A + B
普通兄弟 A ~ B
结构
One
Two!
Three
pppp
One2
pppp1
Two2!
pppp2
复制代码
选择器解析
复制代码
好了，在讲完这些选择器之后我们来看看它们的使用场景。
组合选择器可以用于：hover伪类操纵自己包含的子元素及以外的元素。举个例子
元素1
元素2
元素3
元素2
同级元素1
同级元素2
同级元素3
复制代码
#a:hover > #b{…}
#a:hover ~ div{…} // 鼠标停留在a元素的时候让所有同层级元素有某某样式
// 防止选择器层级替换了下面的样式
#a:hover + #c{…} // 鼠标停留在a元素的时候让同层级中的c元素有某某样式
#a:hover + #c > #b{…} // 鼠标停留在a元素的时候让同层级中的c元素下的b元素有某某样式
复制代码
上面这两选择器在做一些特效页的时候应该是会用到的。
综合例子
效果
结构
标题名称
Bei Ge
这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介
…
2
3
4
5
复制代码
样式
布局样式
复制代码
定义了一个animation动画
@keyframes textAnimation {
/* 0% {
transform: translateX(150%);
} */
100% {
transform: translateX(0);
}
}
复制代码
悬浮在盒子设置样式
.img-box:hover {
transform: scale(1.1);
box-shadow: 2px 2px 13px 3px #ccc;
}
.img-box:hover img {
opacity: .5;
}
.img-box:hover .cover h3 {
opacity: 1;
}
.img-box:hover p {
animation: textAnimation .6s ease-out forwards;
/* forwards让动画停留在最后一帧 */
}
.img-box:hover .cover .handle {
bottom: 5px;
}
.enter-box:hover ~ .img-box {
background-color: transparent;
color: wheat;
}
.enter-box:hover + .img-box {
color: red;
}
复制代码
上面这个例子有些还没有讲，但是相信大家之前也都学过，后文中也会说。主要会说些细节方面的东西。
flex(弹性布局)
transform: translate3D rodate3D
animation(设定动画)
3D or 透视(perspective)
这里需要注意在使用伪类Hover的注意点，在使用他影响子级元素的时候尽量将选择器写全。例：
先看下效果😗
上面的效果相信大家都能写出来，所以我要讲的肯定不是怎么去实现这个效果，我要说下使用Hover时的一些细节。
结构比较简单
flex类名用于布局实现重置和水平居中，box: 绿色盒子;center: 紫色盒子 inner: 橙黄色盒子
复制代码
我们用了一个:hover让鼠标虚浮的时候让盒子变红
.box:hover div {
background-color: red;
}
复制代码
这里有一个问题不知道大家想过没有，为什么我这段代码只让center盒子变红了，inner为什么没有变红呢???
展开查看
因为CSS选择器的优先级!复制代码
我们在实现的时候一般都会像下面这样写吧，这个时候使用伪类选择器改变元素样式的时候就要注意选择器优先级的问题了。
.box .center {
width: 150px;
height: 150px;
background-color: blueviolet;
}
.box .center .inner {
width: 100px;
height: 100px;
background-color: coral;
}
复制代码
这段代码的优先级比 .box .center高，所以他也就只能覆盖它了。
.box:hover div {
background-color: red;
}
复制代码
相信我们很多人如果在写鼠标悬浮大盒子让最里面的inner盒子变色的时候，都会这么写吧：
.box:hover .inner {
background-color: red;
}
复制代码
有用吗?没用!
注意⚠: 优先级还是没有.box .center .inner高。
层叠性
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠
CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
复制代码
继承性
：子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将它应用于父元素即可。简单的理解就是： 子承父业
CSS继承性口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞
复制代码
我们恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多后代元素都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
注意点：在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
可继承的属性
控制继承
注意点: 对于天生自带的继承属性我们可以控制它是否需要继承
四个属性
inherit: 被应用属性继承父级的该属性(默认就是该值)
initial初始化，把应用属性初始为它默认的样式，并且排除继承的干扰(默认会继承的属性也不在默认继承，而是表现出没有任何设置时候的默认样式)
unset：意思是恢复其原本的继承方式。对color属性而言，就相当于inherit;而对于诸如border这样默认不继承的属性，就相当于initial。
revert: 效果等同于unset且浏览器支持有限，这里不做演示
效果图
“ alt=”” width=“28” height=“30” align=””>
演示
Default link color
Inherit the link color
Reset the link color
Unset the link color
复制代码
default中的a标签没有写默认为inherit属性，但是使用了浏览器预设样式表：可以理解为浏览器帮我们为写了个style，其优先级自然就高于其父元素了。
inherit中的a标签在行内写了inherit，于是使用其父(或祖父，etc)元素的颜色值，在这里是绿色;
initial中的a标签使用color属性初始值(黑色), 注意不要混淆属性初始值和浏览器样式表指定值，样式预设表是浏览器事先写好的样式，但是我color默认值就是黑色啊。
unset，意思是恢复其原本的继承方式。对color属性而言，就相当于inherit;而对于诸如border这样默认不继承的属性，就相当于initial。
如果我们需要控制元素所有属性的继承使用all属性
.inherit a {
all: initial;
/* 将所有的属性都恢复成默认值(天生继承也不再继承) */
/* 行内设置过的除外：你的层级干不过人家 */
}
复制代码
继承的权重是0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。
(1) 如果选中了，那么以上面的公式来计权重。谁大听谁的。(2) 如果没有选中，那么权重是0，因为继承的权重为0.
控制继承在我们封装自己的组件的时候是会用到的，我们在封装组件需要沿用样式，有些默认情况下不可继承父元素的属性：box-sizing，这个其实用的就很多。
优先级
要想了解优先级，肯定得了解选择器;但是选择器非常多的，前面列举的是日常开发用的比较多，其他的你可能一辈子都用不到，这里贴出C1~C4的选择器，感兴趣的同学可以看看。
定义CSS样式时，经常出现两个或更多选择器应用在同一元素上，此时，
选择器相同，则执行层叠性(后者覆盖前者)
选择器不同，就会出现优先级的问题。
权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity(特殊性)
标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素(标签选择器)0,0,0,1
每个类，结构伪类(如:hover),属性选择器[type=“number”]0,0,1,0
每个ID0,1,0,0
每个行内样式 style=””1,0,0,0
h1 + p::first-line0,0,0,3
li > a[href*=“beige.world”] > .inline-warning0,0,2,2
每个!important 重要的∞ 无穷大
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
常用的选择器记法：
行内: 1,0,0,0
#id: 0,1,0,0
.class | :hover | :nth-child(): 0,0,1,0 (:hover这种一个冒号叫结构伪类)
::after | ::before | ::first-line: 0,0,0,1 (这种两冒号的叫伪元素，在书写的时候虽然你可以写一个冒号但是浏览器还是给你补上去了，本质上就是两冒号)
权重叠加
我们经常用组合选择器，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover —–—> 0,0,1,1
.nav a ——> 0,0,1,1
注意⚠: 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
important适用优先级💡
#id .box div {
color: red !important;
}
#id div.box div {
color: green !important; // 使用这个选择器中的颜色
}
复制代码
通关答题
下面来几道题，全对才算通过了噢😗
文字
复制代码
什么颜色??
展开查看答案
yellow 上面两选择器的层级都是一样的, 后者覆盖前者 复制代码
试问这行字体是什么颜色的?
复制代码
展开查看答案
blue 复制代码
123
复制代码
展开查看答案
字体：80，有文字阴影，真实内容的宽：290px 高190px复制代码
讲下这最后一题
文字阴影有：因为从父元素中继承到了,字体: 80px;
真实内容宽290px, 高190px
常问的属性flex(弹性布局)
transform: translate3D rodate3D
animation(设定动画)
3D or 透视(perspective)
flex
flex布局相信大家也都用烂了，用来让盒子垂直和水平居中好用的一批
父项常用属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式(多行)
align-items：设置侧轴上的子元素排列方式(单行)
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction
在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下
<img src=
“ width=“185” height=“30” align=””>
： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
flex-wrap设置是否换行
默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。
nowrap 不换行
wrap 换行
justify-content 设置主轴上的子元素排列方式
<img src=
“ width=“185” height=“30” align=””>
效果图
： 这里讲下space-around和space-evenly
space-around：项目之间的间距为左右两侧项目到容器间距的2倍。
space-evenly：项目两侧之间的间距与项目与容器两侧的间距相等，相当于除去项目宽度和容器和项目的两侧间距，剩下的平均分配了剩余宽度作为项目左右margin。
**设置侧轴上的子元素排列方式：align-items(单行)/align-content(多行) **
上图写能设置多行只能用于子项出现 换行 的情况(多行)，在单行下是没有效果的。
效果跟上面是一样的只不过是方向换了，上面是元素在主轴上排列，这个是在侧抽上，至于侧轴是不是Y轴就看你的flex-direciton怎么设置的了
子项常见属性
flex(复合属性): 默认: flex: 0 1 auto;
flex-grow
flex-shrink
flex-basis
align-self：控制子项自己在侧轴的排列方式
order：定义子项的排列顺序(前后顺序), 0是第一个
flex-grow
默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大;注意，即便设置了固定宽度，也会放大。
假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。
可以这么理解:
flex: 1 => 在剩余的空间里我就占一份
flex: 2 => 在剩余的空间里我就占两份
flex: 3 => 在剩余的空间里我就占三份
假设三个盒子分别都设置了上面的属性: 那就将剩余空间分成6份, 各占自己的份数
假设前两个没有设置, 就最后一个设置了flex: 3 === flex: 1, 那就将剩余空间都给它
复制代码
flex-shrink
默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小;注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
“ alt=”” width=“28” height=“30” align=””>
上图中第二个项目flex-shrink为0，所以自身不会缩小。
flex-basis
默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
“ alt=”” width=“28” height=“30” align=””>
上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。
注意⚠: 如果当容器中有多个盒子并且还宽度100%, flex-basis会被影响, 如下图
“ alt=”” width=“28” height=“30” align=””>
解决办法就是在我们设置flex-basis宽度时, 最好给他设置flex-shrink为0不缩放
“ alt=”” width=“28” height=“30” align=””>
transform
2D的属性相信大家都会用了, 本文主要深究transform的3D属性
透视：perspctive
3D呈现：transfrom-style
3D 位移：translate3d(x, y, z)
3D旋转：rotate3d(x, y, z)
透视(perspective)
在讲3D之间先来了解一下透视(视距)，只有了解了透视我们才能理解3D的物体投影在2D平面上
透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
实际上模仿人类的视觉位置，可视为安排一直眼睛去看
距离透视点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素
“ alt=”” width=“28” height=“30” align=””>
注意: 透视需要写在被视察元素的父盒子上面
拿图说话👇
d：就是视距，视距就是指人的眼睛到屏幕的距离
z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
来个栗子🌰
给实例的父元素设置: perspective: 200px;
复制代码
上面我们在div的父盒子上设置了perspective，也就是说从3D成像的角度来讲我们人眼距离屏幕div是200的视距，translate3D设置Z轴让div往前挪了100，视距变小距离我们人眼距离也就越小，所以看到的div也就变大了。 (可以想像成在500米远看见的人， 和5米看见的人。)
translate3d(x, y, z)
3D的特点
近大远小
物体和面遮挡不可见
三维坐标系
x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值
“ alt=” “ width=“35” height=“30” align=””>
3D 呈现 transform-style
transform-style：控制子元素是否开启三维立体环境，代码写给父级，但是影响的是子盒子
transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
效果图
“ alt=”” width=“28” height=“30” align=””>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
复制代码
rotate3d(x, y, z)
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
transform: rotate3d(x, y, z, 45deg)` – 沿着自定义轴旋转 45 deg 为角度
例子：
公众号:
前端自学驿站
复制代码
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者其他样式，必须先写我们的移动 */
transform: translateY(17.5px) rotateX(-90deg);
}
复制代码
animation
动画(animation)是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果, 先定义动画在调用定义好的动画
动画序列
0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
@keyframes move{
0% {
transform: translate(0px)
}
form {
transform: translate(0px)
}
100% {
transform: translate(500px, 0)
}
to {
transform: translate(500px, 0)
}
}
复制代码
动画常见属性
“ alt=”” width=“28” height=“30” align=””>
动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
复制代码
除了名字，持续时间，何时开始有严格顺序要求其它随意
CSS实现扫描二维码
效果
“ alt=”” width=“28” height=“30” align=””>
代码篇幅过长我放到gitHub仓库了，大家可以pull下来自行研究。
地址：https://github.com/it-beige/blog
面试常问题BFC相关
BFC(Block formatting context)直译为”块级格式化上下文”。
在讲BFC之前得先说下display的属性值，只有它符合成为条件才资格触发BFC机制
“ alt=“display属性值” width=“113” height=“30” align=””>
那些属性值会具有BFC的条件
不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC.
大家有没有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们下面研究。
这个BFC 有着具体的布局特性：
“ alt=”” width=“28” height=“30” align=””>
有宽度和高度，有 外边距margin 有内边距padding 有边框 border。就好比，你有了练习武术的体格了。 有潜力，有资质。
什么情况下可以让元素产生BFC
以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢?
就好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先…
“ alt=”” width=“28” height=“30” align=””>
同样，要给这些元素添加如下属性就可以触发BFC。
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性：
在BFC中，盒子从顶端开始垂直地一个接一个地排列
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)。
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。
复制代码
“ alt=”” width=“28” height=“30” align=””>
BFC的主要用途
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式
主要用到
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
复制代码
(2) 解决外边距合并(塌陷)问题
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
复制代码
属于同一个sBFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
“ alt=”” width=“28” height=“30” align=””>
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
复制代码
“ alt=”” width=“28” height=“30” align=””>
BFC 总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
IFC相关
IFC(inline Formatting Context)叫做“行级格式化上下”相对BFC比较简单且问的也不是很多，这里大该做个了解
布局规则如下：
内部的盒子会在水平方向，一个个地放置(默认就是IFC);
IFC的高度，由里面最高盒子的高度决定(里面的内容会撑开父盒子);
当一行不够放置的时候会自动切换到下一行;
哪些属性开启了性能加速
何为硬件加速：就是将浏览器的渲染过程交给GPU(Graphics Processing Unit)处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅
我们可以在浏览器中用CSS开启硬件加速，使GPU发挥功能，从而提升性能
所谓GPU，就是图形处理器的缩写，相当于PC中的显卡。手机中的GPU也是为了对图形、图像处理而存在的，所谓强制渲染，就是hwa(hardware acceleration硬件加载)的一种，其存在的意义就是为了分担cpu的负担，其原理是通过GPU对软件图形的处理来减轻CPU的负担。从而使应用软件能够以更快的速度被处理，以达到提速的目的。
硬件加速的原理
浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含大量的渲染元素，每个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中transform是不会触发repaint的，最终这些使用transform的图层都会由独立的合成器进程进行处理, CSS transform会创建了一个新的复合图层，可以被GPU直接用来执行transform操作。
浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下：
3D或者CSS transform
和标签
css filters(滤镜效果)
元素覆盖时，比如使用了z-index属性
为什么硬件加速会使页面流畅
因为transform属性不会触发浏览器的repaint(重绘)，而绝对定位absolute中的left和top则会一直触发repaint(重绘)。
为什么transform没有触发repaint呢?
简而言之，transform动画由GPU控制，支持硬件加载，并不需要软件方面的渲染。并不是所有的CSS属性都能触发GPU的硬件加载，事实上只有少数的属性可以，比如transform、opacity、filter
如何用CSS开启硬件加速
CSS animation、transform以及transition不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行，那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。
当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素是3D变化。
.cube{
translate3d(250px,250px,250px);
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5,0.5,0.5);
}
复制代码
可能在一些情况下，我们并不需要对元素应用3D变幻的效果，那怎么办呢?这时候我们可以使用“欺骗”浏览器来开启硬件加速。虽然我们可能不想对元素应用3D变幻，可我们一样可以开启3D引擎。例如我们可以用transform:translateZ(0);来开启硬件加速
.cube{
transform: translateZ(0);
}
复制代码