选择器进阶：{
复合选择器：{ 后代选择器：
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器 1 选择器2{cSs}
结果：
在选择器1所找到标签的后代（儿子、孙子、重孙子.)中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子、孙子、重孙子…
2.后代选择器中，选择器与选择器之前通过空格隔开
子代选择器：{
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{CSs}
结果：在选择器1所找到标签的子代（儿子)中，找到满足选择器2的标签，设置样式
注意点：
1.子代只包括：儿子
2.子代选择器中，选择器与选择器之前通过>隔开
}
}
并集选择器：{
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
结果：找到选择器1和选择器2选中的标签，设置样式
注意点：
1.并集选择器中的每组选择器之间通过 ，分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性
}
交集选择器：{
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2{css}
结果：(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面
}
hover伪类选择器：{
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
注意点：
1.伪类选择器选中的元素的某种状态
}
Emmet语法：{
}
背景相关属性：{
背景颜色：{
属性名：background-color(bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制.
注意点：
1.背景颜色默认值是透明：rgba(O,0,0,0)、transparent
2.背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
}
背景照片：{
属性名：background-image(bgi)
属性值：background--image:urL('图片的路径')；
注意点：
1.背景图片中u中可以省略引号
2.背景图片默认是在水平和垂直方向平铺的
3.背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
如果照片大小和盒子大小有问题，那么会 进行调整
}
背景平铺：{
}
背景位置：{
正数：向右向下移动；负数：向左向右移动
注意：背景色和背景图只显示在盒子里面
}
背景相关属性连写：{
属性名：background(bg)
属性值：
单个属性值的合写，取值之间以空格隔开
书写顺序：
推荐：background:color image repeat position
省略问题：
可以按照需求省略，不分先后顺序
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url0
注意点：
如果需要设置单独的样式和连写
①要么把单独的样式写在连写的下面、
②要么把单独的样式写在连写的里面
如果背景图位置是按照数值来，那么我们需要按照先水平后垂直的顺序来写
}
(拓展)img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
方法一：直接写上mg标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
}}
元素显示模式：{
块级元素：{
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer..
}
行内元素：{
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del.…
}
行内块元素：{
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表标签：input、.textarea、button、select..
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
}
元素显示模式转换：
拓展1：HTML嵌套规范注意点
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.
但是：p标签中不要嵌套div、p、h等块级元素
2.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
}
css特性：{
继承性：{
特性：子元素有默认继承父元素样式的特点（子承父业)
可以继承的常见属性（文字控制属性都可以继承）
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent,text-align
4.line-height
注意点：
可以通过调试工具判断样式是否可以继承
继承失败情况：
a标签的color会继承失效
h系列标签的font-size会继承失效
}
层叠性：{
特性：
1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
}}
优先级：{
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important
注意点：
1.!important?写在属性值的后面，分号的前面！
2.!important不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用！important。
权重叠加运算：{
都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效
} }
扩展：{
调试工具：
}
css盒子模型：{
盒子模型介绍：{
盒子的概念
1.页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型：
CSS中规定每个盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型
记忆：可以联想现实中的包装盒
}
内容区域的宽度和高度：{
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px
}
边框（border）—连写形式：{
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border:10px solid red; （边框像素 线条种类 颜色）
快捷键：bd+tab
}
内边距：{
}
盒子模型自动内减：{
这个地方我们通过在css内加一行代码，就可以让其自动内减：（box-sizing：border-box）
}
外边距：{
外边距的具使用方式与内边距使用方式一直，可以用四个数值了控制
注意：下图只是显示使用方式，外边距的属性名：margin
}
清除默认内外边距：{
场景：因为每一个标签都相当于一个盒子，所以浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
比如：body标签默认有margin:8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left
解决方法：
按照上面图片里的代码，将所有的内外边距清除
}
版心居中：
扩展知识点：{
外边距折叠现象一①合并现象{
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为marg的最大值
解决方法：避免就好
只给其中一个盒子设置margin即可 }
外边距折叠现象-②塌陷现象{
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
1.给父元素设置border--top或者padding-top(分隔父子元素的margin-top)
2.给父元素设置overflow:hidden
3.转换成行内块元素
4.设置浮动 }
行内元素的内外边距的问题：{
}}
扩展知识点：如果需要去掉无序列表前的点， 可以使用：list-style：none }
css浮动：{
结构伪类选择器：{
}
伪元素：{
默认是行内元素，宽高不生效，content属性必须添加，否则伪元素不生效
}
标准流：{
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
}
浮动：{ 可以让标签之间没有间隙
作用：环绕文字，属性名：（float：）
作用：网页布局，属性名：（float：）
注意两个作用的属性运用方式、
浮动的标签顶对齐
浮动：在一行排列，宽高生效-·浮动后的标签具备行内块特点
特点：
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
}
扩展：
清除浮动：{
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标→不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
如果子元素有浮动，父元素没有高度，后面的标准流盒子会受影响，显示到上面的位置
清除浮动的方法一②额外标签法
操作：
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
清除浮动的方法一③单伪元素清除法
注意：补充写法多的两行代码是为了代码有更好的兼容性
清除浮动的方法一④双伪元素清除法
清除浮动的方法一④双伪元素清除法
清除浮动的方法一⑤给父元素设置overflow:hidden
操作：1.直接给父元素设置overflow:hidden
特点：
优点：方便
}
扩展：
}
定位：{
网页常见布局方式：{
标准流：
1.块级元素独占一行→垂直布局
2.行内元素/行内块元素一行显示多个→水平布局
浮动：
1.可以让原本垂直布局的块级元素变成水平布局
定位：
1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况 }
定位的常见应用场景：
1.可以解决盒子与盒子之间的层叠问题
2.定位之后的元素层级最高，可以层叠在其他盒子上面
3.可以让盒子始终固定在屏幕中的某个位置
使用定位的步骤：{
相对定位：{
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position:relative;
特点：
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置一没有脱标
如果在使用过程中，没有配合方位属性来实现移动，那么就不会移动
如果left和right都有，以left为准；top和bottom都有以top为准，按照左上原则进行移动
应用场景：
1,配合绝对定位组CP(子绝父相：父级相对定位；子级绝对定位，)
2.用于小范围的移动
}
绝对定位：{
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position:absolute;
特点：
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置一已经脱标
应用场景：
1,配合绝对定位组CP(子绝父相：父级相对定位；子级绝对定位，若是没有父级，那就按照浏览器界面作为参照物)
注意：1.绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位。、
2.绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是
}
扩展1：
}
固定定位：{
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed;
特点：
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置→已经脱标
4.具有行内块的特点
应用场景：
1.让盒子固定在屏幕中的某个位置
}
元素层级关系：{
不同布局方式元素的层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对、绝对、固定默认层级相同，此时HTML中写在下面的元素层级更高，会覆盖上面的元素
默认情况下，定位的盒子后来者居上，
z-index:整数；取值越大，显示顺序越靠上，z-index的默认值是0
注意：z-index必须配合定位才生效
}}
装饰：{
垂直对齐方式：
光标类型：
边框圆角：
注意，这个地方的border-radius是个个方位的，有几个方位就可以设置几个值，若只是设置一个值，那么就表示四个方位的值都是一样的，若是其他方位没有啥子，看相对的方位，按照从左上顺时针转一圈
overflow溢出部分显示效果：
元素本身隐藏：
场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
常见属性：
1.visibility:hidden
2.display:none
}
(拓展)元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacitys
属性值：0-1之间的数字
1：表示完全不透明
0:表示完全透明
注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等..
}
精灵图：
精灵图的使用步骤：
背景图片大小：
盒子阴影：
过渡：
扫一扫
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
