## 复杂选择器 ```python 1：群组选择器：控制多个标签（用逗号隔开） #h1,p,.a{color:red} style中内联式控制id为h1,标签名p,类名为a的标签 2：后代（子代）选择器：控制一个标签，前面都是装饰 body .div2 .p2(后代，空格隔开标签之间的后代关系){ color:orange: } .div>div>.p2：子代选择器（绝对子代关系），用>号隔开，控制一个标签！前面都是装饰 {color:pink;} 3：兄弟（相邻）选择器：控制一个标签，前面装饰，用~隔开，相同层级，可以相邻，也可以不相邻，但必须是上方修饰下方 .p3~.i3{color:greenyellow;} 相邻选择器：控制一个标签，前面装饰，用+号隔开，必须上方修饰下方 .div3+.i3{color:green;} #优先级：id>class>标签 #种类相同的话，比个数。 #个数也相同的话，看修饰的先后顺序，后的覆盖前面的。 #复杂选择器种类不影响优先级。 ``` ## 伪类选择器： ```python 两种伪类选择器nth-child(n){color:red}/nth-of-type(n){color:red} i:nth-child(n){color:red}:i:可以是id名、类名、标签名。n:是确定层级的中的第n个标签。它的选择标准是，先选择所有各个层级中第n个标签，然后再看该标签是否是i标签，是的话匹配成功，否则不匹配。大括号内的是各类型样式属性设置。 i:nth-of-type(n){color:red}:它和上例伪类选择器区别主要在于选择标准不同：先选择各个层级的i标签，然后在各个层级的i标签中找第n个，有则匹配，无则放弃。每个层级n的编号不继承不干扰。 共同点：1.()内填的是编号，所以从1开始，都用冒号：标识符 2.伪类选择器可以单独出现，相当于省略了统配 3.伪类选择器的优先级相当于class. ``` ## a标签的四大伪类： ```python a:link{} 链接初始状态 a:visited{} 链接已访问完状态 a:hover{} 链接鼠标放上去的悬浮状态 ，此伪类，其他普通标签也可用 a:active{} 链接鼠标点击下去的状态 ，此伪类，其他普通标签也可用 有链接属性的标签，它的显示状态可以有四种设置，每种设置对应一个伪类：也可以说，一个值有四个属性，每个属性相互独立可以并列存在且每个属性又有多个属性值可以设置。 例： <style> /*链接的初始状态*/ a:link { color: deepskyblue; } /*链接的悬浮状态*/ a:hover { cursor: pointer; color: blue; } ``` ## 文本样式 ```python 文本样式：主要是对标签中文本的修饰。特定修饰关键字对应着相应的文本属性，根据需求设置相应的值即可。 例：/*字体大小: 最小12px，还需要更小就更换字体库*/ font-size: 30px; 字体库(字族)：字体, 备用1, ..., 备用 font-family: "STSong", "微软雅黑" 字重: 100~900 bold normal lighter font-weight: lighter; 字体颜色 color: tomato; 水平位置: left center right text-align: center; 行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高 line-height: 200px; 文本划线: underline line-through overline none text-decoration: underline; ``` ## 背景样式： ```python 背景样式：设置标签的 背景 这个属性的值。背景这个属性也有很多属性： 例： 背景颜色 background-color: red; 背景图片（背景图片会覆盖背景颜色） background-image: url("img/001.png"); 平铺: no-repeat repeat repeat-x repeat-y （可单选x轴、y轴平铺） background-repeat: no-repeat; 背景定位: x轴(left center right) y轴(top center默认 bottom) background-position: right top（右上角） 指定尺寸移动 background-position: 100px 100px; 反向移动 background-position: 10px -10px; ``` ## 边界圆角 ```python 边界圆角：就是标签的四个角进行圆弧修饰。主要操作就是确定大小、位置、同角横向、纵向圆弧进行区别设置。 例：border-radius: 10px 20px 30px 40px;（值和角的对应关系：从左上角开始，顺时针） border-radius: 10px 100px;（只有两个值，则采用对角的值） border-radius: 100px;（共用一个值） border-radius: 10px 30px 50px 100px / 50px 100px（用横向/纵向值。“/”进行区分） border-radius: 50% / 50px（可以通过百分比进行设置圆角，常用） #注意：边角圆弧为0的时候，记得要赋值0，不能省略不设置，否则会采用对角的值，进行设置。 border-radius: 200px 200px 0 0 / 200px 200px 0 0; ``` ## 显示方式 ```python block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式 inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式 inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式 '常用嵌套关系 block：可以嵌套block、inline、inline-block div、li搭架构的，可以任意嵌套 h1~h6、p 建议只嵌套inline，就是用来转文本的 inline：只用来嵌套inline span、i、b、em、strong a一般都会修改其display为block inline-block：不建议嵌套任何 img input系统都设计成了单标签 none：没有显示方式，就会在页面中隐藏 '特点： block：默认显示规则:宽继承父级，高由内容撑开 inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然 inline: 同行显示，不用去关宽高，不用额外操作 有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align使得有文本和没有文本的标签不能水平对齐。 ``` ## overflow属性 ```python 情况：1、规定了标签的宽高，标签的内容超出范围 2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围 这是可以根据需求设置父标签的overflow属性 overflow：hidden（隐藏超出的内容） overflow:auto(有超出内容，可以通过滚动条显示) overflow：scroll(不管有没有超出，都通过滚动条显示) ``` ## 盒模型v ```python 什么是盒模型：页面中的每一个标签都可以称之为一个盒子 盒子的组成并发：外边距、边框、内边距、内容四部分组成，每部分都有独立区域 外边距 - margin - 控制位置 边框 - border - 控制边框 内边距 - padding - 控制内容与边框的间距 内容 - content(width*height) - 文本内容或子标签显示的区域 margin参考系：自身原有位置 margin的left和top控制自身位置 margin的right和bottom控制兄弟位置 盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调 例：.abc { 上右下左 margin: 10px 20px 30px 40px; 快速居右 margin-left: auto; 快速居中 /*margin-left: auto;*/ /*margin-right: auto;*/ margin: 0 auto;（上面两个值设置后显示效果跟这一步相同） } ``` ## 浮动布局 ```python 浮动布局：给标签添加float属性，浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的浮动框之后的块框表现的就像浮动框不存在一样. (注意 这里是块框而不是内联元素; 浮动框只对它后面的元素造成影响 )让它“浮”起来，浮动只影响后面元素（当给一个元素添加浮动属性时，后面元素会顶替它的位置，由于它是“浮动”的，所以他会覆盖顶替上来的元素。如果后面是文本的话，会有“字围”效果） #一般情况下，一个大盒子内有一个小盒子需要浮动，，会让所有盒子都浮动起来，以避免浮动带来的影响。 浮动：父级的高度不会被撑起了，需要清浮动，避免对父级的兄弟造成影响。父级的宽度会影响子级浮动的显示效果：浮动显示区域小于父级同排显示，大于父级则会换行。 ``` ## 清浮动 ```python 如何让父级刚刚好包含所有子标签：清浮动 - 不是清除子标签的浮动效果，而是让父级获得一个刚好的高度. .wrap:after { display: block; content: ""; /*清浮动的关键*/ clear: both; } #伪类after:父类的所有内容、样式加载完之后再加载此处设置。 #原理是：向目标标签插入一个伪元素，这个元素是inline内联的，无换行、无宽高默认值，所以需要重设成block。必须要有content，因为，需要它来撑起父级的高。clear：both就是清除前后浮动的影响。 ```