3.标签选择器（tag选择器）
在style标签中写入某标签名，映射下方所有对应标签（如下列div标签）。
使用场景：
1.去掉某些选择器的默认样式。
2.复杂的选择器中，如：层次选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
4.群组选择器（分组选择器）
可以通过逗号隔开的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。（注：以下代码省略了部分初始代码，主要是为了表示群组选择器）
<style>
div,#text,.title{background-color: red;}
</style>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落 </p>
<h2 class="title">这是一个标题</h2>
</body>
5.通配选择器
*{background-color: red;}
注：尽量避免使用通配选择器，因为通配选择器会给所有的标签添加样式，一般是用来去掉所有标签的默认样式。
6.层次选择器
后代 M N{}
寻找对应M（M也可以是ID选择器或者class选择器）嵌套的所有N（N也可以是ID选择器或者class选择器）进行添加样式
父子 M > N{}
寻找对应M第一层嵌套的N添加样式，N中再嵌套的N不起作用。
兄弟 M ~ N{}
寻找对应M，对M下面的（不是嵌套关系）所有与M并列的N（若N被嵌套在其他标签里不起作用）添加样式。
相邻 M + N{}
寻找对应M，对M下面相邻的一个N进行添加样式。（注意粗体字提醒）
属性选择器
M[N] {}
省略了部分初始代码
<style>
div[class="box"]{background-color: red;}
</style>
<body>
<div>aaaaaaaa</div>
<div class="box">bbbbbbbbb</div>
<div class="search">ccccccc</div>
<div class="search-button">dddddddd</div>
<div class="button-search">eeeeeeee</div>
</body>
寻找对应M中的N属性（可以对N属性加具体值）添加样式。
=：完全匹配，完全一样才能匹配
*=：部分匹配，只要部分值一样就匹配
^=：起始匹配，值的起始位置一样就能匹配
$=：结束匹配，值的结束位置一样就能匹配
[][][]…[]：多个属性，组合匹配，要所有属性一样才能匹配
8.伪类选择器：
CSS选择器用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M为要添加样式的标签
M:link{} 访问前的样式（只能添加给a标签）
M:visited{} 访问后的样式（只能添加给a标签）
M:hover{} 鼠标移入时的样式（可以添加给所有样式）
M:active{} 鼠标按下时的样式（可以添加给所有样式）
注：如果四个伪类都生效，一定要注意顺序link→visited→hover→active。一般网站不会给a标签设置四个伪类，一般都是a{}，a：hover。visited访问后浏览器会有缓存，需要清除数据还原样式。
M:after{}
M:before{} after和before都是通过伪类的方式给元素添加一段文本内容，使用content属性
after和before可以用于对部分文字添加样式而不影响整个文段。
三个都是针对表单的伪类选择器。
:disabled{} 针对失效的表单才起效果
:checked{} 针对被选中的表单才起效果
:focus{} 获取光标时才起效果
结构性伪类选择器：
（目前只了解到对列表使用）
li:nth-of-type(){}
li:nth-child(){}
小括号内输入数字可以指定列表的第几项，输入对于n的表达式可以设置从0开始到无穷的规律设置，如：输入2n是对2，4，6...2n项进行设置。
li:first-of-type{}
li:first-child{}
对列表第一项起作用
li:last-of-type{}
li:last-child{}
对列表最后一项起作用
li:only-of-type{}
li:only-child{}
列表中仅有该（一）项时才起作用
type与child区别：前者是对同一类进行作用，非同类忽略，后者是对同一组中的第几项作用，如果与冒号前的索引的标签不同则不起作用（个人浅显的认知，并不准确）
CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承，但是可以设置继承属性）
例如：在div块中有一个段落p标签，CSS中对div设置了布局样式还有文字样式，但只有文字样式也对p标签起了作用，布局样式没起作用（这就是样式继承），若要设置继承，在CSS中添加p标签的选择器然后写入要继承的属性并赋值为inherit。
p{border:inherit;} (对border（边框）属性进行继承)
注：实际上有些文字样式不能继承，有些布局样式被设置可继承后仍不能继承（具体需要实践）
CSS优先级
1.相同样式优先级
当设置相同样式时，后面写入的优先级较高，但不建议出现重复设置样式的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写入的引入方式优先级更高。
3.单一样式优先级
style行间内联>id>class>tag>*>继承
权重等级：style行间内联（1000），id（100），class（10），tag（1）
4.!important
提升样式优先级，非规范方式，不建议使用，只有样式非常多并且不方便大量改动时才使用。（不能针对继承的属性进行优先级的提升）使用方法：在属性后加空格后输入!important
5.标签+类与单类
标签+类选择器的优先级比单类选择器高
6.群组优先级
群组选择器与单一选择器的优先级相同，后写入的优先级更高。
7.层次优先级
权重比较
根据权重等级之和来比较，权重等级之和大的优先级高。
ul li .box p inout{} 1+1+10+1+1
.hellow span #elem{} 10+1+100
约分比较
同权重等级相消，剩余权重等级和高的优先。
ul li .box p input{} 相消后→ li p input{}
.hello span #elem{} #elem{}
CSS盒子模型
组成：content→padding→border→margin（由内到外）就像快递的内容物品、填充物、包装盒、盒子与盒子之间的间距。
1.content：内容区域，由width和height组成
2.pandding：内边距（内填充）通过数字设置，如：pandding:30px，内填充还可以单独设置一边，和边框相似，如：pandding-top:30px；，还可以通过pandding:输入多个数字并用空格隔开（最多四个数字）如：两个数字pandding:20px 30px，对应上下、左右边距；四个数字padding:10px 20px 30px 40px，对应上、下、左、右边距（三个数字不推荐）
3.margin：外边框（外填充）边距设置方法和padding一样。
注：
1.背景颜色会填充到margin以内（不会填充到margin）的区域。
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。
4.box-sizing：盒子尺寸，可以改变盒子模型的展示形态。box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值），此时width、height设置给content部分；若取值为border-box，此时width、height设置后是content、padding、border加起来的总大小。
border-box使用场景：
1.同样设置一个盒子的大小，如果不使用border-box的话在设置了border和padding的情况下还需要自己去计算content的值来设置。在使用border-box后，直接设置盒子大小然后设置border和padding的大小后就不用自己再去计算content的值来设置了。
2.解决一些百分比问题，比如想设置一个输入框占屏幕的100%，但是又想设置一个边框，这样会超出屏幕范围多出一个横向滚动条。加上border-box就可以达到需求，减少了百分比和像素的换算。
margin叠加问题
当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题只在上下的边距有，左右是没有叠加问题的。
解决方案：
1.BFC规范。（暂不研究，留在笔记第二大部分）
2.只给其中一个盒子添加边距。
margin传递问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递问题，其他三个方向是没有传递问题的。
例：
<div id="box1">
<div id="box2"></div>
</div>
两个块中，box1设置了200px*200px，背景颜色红；box2设置了100px*100px，
背景颜色蓝并且设置了margin-top:100px，按理说应该是box2位置跑到box1的
左下角，但是却使box1和box2这个整体添加了上边距，没有达到只是想设置box2
的上边距来使box2向下移动。
解决方案：
1.BFC规范。（暂不研究）
2.给父容器加边框。（如果需求不需要边框不推荐使用）
3.margin换成padding。（需要调整content大小）
扩展：
1.margin自适应。margin:auto（左右自适应，即居中）margin-right:auto（向右自适应，即居右），不设置时是默认左自适应。margin自适应只能左右，不能上下。（上下自适应暂不深入，笔记第二大部分再填坑）
2.width、height（content大小）不设置的时候会根据外容器大小进行适应填充，节省代码。例如设置两个盒子嵌套中里面pandding和border时会超出外盒子，不设置内盒子的width和height就不会有这种情况。
1.2.2 标签分类
按类型分类
block（块）：div、p、ul、li、h1（h2…）…
1.独占一行，不能左右并排
2.支持所有样式
3.不写宽的时候，和外容器的宽相同
4.所占一个区域是一个矩形
inline（内联）：span、a、em、strong、img…
1.不独占一行，可以左右挨在一起
2.有些样式不支持，例如：width、height、margin、padding…（img是个例外，width、height支持）
3.不写宽的时候，宽度由内容决定
4.所占空间不一定是矩形
5.内联标签之间有空隙，原因是代码中有折行，即两个标签代码上下排列
注：布局一般用块标签，修饰文本用内联标签，所以内联标签之间空隙问题可以忽略，如果非要解决可以将两个标签并排在一行（影响代码可读性，不建议），或者在CSS中利用优先级先给body标签添加font-size: 0px,然后给内联标签添加font-size: 16px
inline-block（内联块）：input、select…
1.可以左右挨在一起
2.支持宽高样式
3.具有内联的空隙问题…
注：包含块和内联的部分特点
（Chrome浏览器中按F12可以打开控制台查看标签类型）
按内容分类
Flow：流内容（标签）
Metadata：元数据（如：meta，title，heda等编码）
Sectioning：分区（div块等）
Heading：标题（如：h1-h6）
Phrasing：措辞（如：span）
Embedded：嵌入的（如：图片，音频/视频，imframe）
Interactive：互动的（表单）
按显示分类
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。（img，input…）
需要设置属性才会显示内容
非替换属性：将内容直接告诉浏览器，将其显示出来。（div，h1~h6，p…）
不需要添加属性就能显示内容
显示框类型
通过display属性控制
display:block （改为块类型）
display:inline （改为内联类型）
display:inline-block （改为内联块类型）
display:none （隐藏显示，并且不会留空间）
visibility:hidden （隐藏显示，但是会留白）（两个隐藏，前者就像直接拿走隐藏，后者就像拿块布遮了起来但还在原地）
一般不建议改类型
1.2.3 标签嵌套规范
需要严格嵌套规范的如：
ul,li dl,dt,dd table,tr,td等
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
例如：p标签不能嵌套div标签
内联标签不能嵌套块标签
例如：span标签不能嵌套div标签，但是a标签例外，它可以嵌套div标签，不过a标签不能嵌套a标签
1.2.4 CSS中overflow溢出隐藏
部分时候设置了div块的大小，然而内部写入内容超出大小时就会溢出，这时可以用到overflow属性。
overflow:visible （默认，可以不设置）
overflow:hidden （超出的部分裁切隐藏）
overflow:scroll （超出的部分隐藏，但是会增加横向和纵向的滚动条来供查看隐藏部分）
overflow:auto （根据内容大小来设置滚动条，如果超出大小则增加滚动条，如果不超过大小则不加）
overflow-x: （针对x轴设置，值设置和上面一致）
overflow-y: （针对y轴设置，值设置和上面一致）
1.2.5 CSS透明度与手势
透明度
opacity属性(0~1)
opacity:0 （透明）
opacity:0.5 （半透明）
opacity:1 （不透明）
注：占空间，所有的子内容也会透明
rgba属性（设置数字，数字用空格隔开）
rgba(0 0 0 0);
注：前三个数字控制颜色，最后一个数字控制透明度，可以指定样式透明而不影响其他样式
手势
cursor属性
cursor:default （默认，可不设置）
cursor:pointer （鼠标移入时变为小手图标）
cussor:move （鼠标移入时变为移动图标）
还有其他形式不一一展示
注：如果想要自定义鼠标手势图案需要准备图片，扩展名为.cur , .ico
cursor:url(),auto （括号内输入图片的地址）
1.2.6 CSS最大最小宽高
min-width:
min-height:
max-width:
max-height:
设置最大最小值，设置最小值时有下限无上限（内容不超过下限时维持设置的最小大小，内容部分超过下限时大小会自适应），
设置最大值时有上限无下限（内容超过上限的部分会溢出，小于上限时会根据内容大小来自适应缩小）
%单位换算，根据外部容器的大小比例（不会根据外部的外部容器），故使用%单位时应先设置好外部容器的大小。
1.2.7 CSS默认样式
有些标签有默认样式，有些标签则没有默认样式
没有默认样式：div，span…
有默认样式：
body：带有margin:8px
h1：带有margin:21.440px 0px，font-weight:bold
p：带有margin:16px 0px
ul：带有16px 0px;padding-left:40px
a：带有text-decoration:underline
注：CSS当中有些默认样式会有帮助，比如a标签中有手势，但是也有妨碍，比如一些大小的默认值，会和我们自己想设置的值有别，需要手动修改。
CSS重置样式
简单的CSSreset：
*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding。
缺点：会对所有标签操作，会稍微影响性能。
ul{list-style:none} （去掉列表前的序号样式）
a{text-decoration:none;color:#666;} （去掉下划线，修改颜色）
img{display:block;} （将图片转为块类型，针对图片与外容器底部有空隙，因为内联样式对齐方式与文字的基线对齐而不是文字的底线对齐，有关文字排版。也可以设置成vertical-align:baseline;，以文字基线对齐）
写具体页面结构的时候或一个布局效果的时候，一般是先写结构，然后写CSS重置样式，最后写具体样式。
1.2.8 PS基本操作与图片格式
H5前端人员对UI设计师的稿件实现需要对样式进行度量一些颜色的采取等等会用到Photoshop。
组成：
上面的菜单项
左侧的工具栏
右侧的辅助面板
快捷键：
ctrl+r：显示隐藏标尺，可在标尺上拖拽参考线也可以通过工具栏的移动工具拖拽，通过菜单的视图可以清除。
alt+鼠标滚轮：对图片放大或缩小
图片格式：
.jpg：一般用于高质量，多色彩的图片
.gif：动态图
.png：部分区域透明的图片
.psd：PS生成，包含多个图层，设计师给到H5前端的设计图片
png等图片的切图流程：
1.通过矩形选框工具，选择指定的区域，还可以使用切片工具（操作与选框略有不同）
微调：alt配合鼠标可以对框选的部分做减操作；shift配合鼠标可以对框选部分做加操作；通过方向键可以对框选区域做移动微调，也可以通过鼠标直接拖拽选中区域；利用参考线记录位置，以便以后测量其他值
2.ctrl+c：复制选中图层
3.ctrl+n：新建图层
4.ctrl+v：粘贴图层
5.存储为web格式
注：利用矩形选框还可以测文字行高，从一行文字的顶部选中到下一行文字的顶部。
psd图片切图流程
1.启动生成器，编辑→首选项→增效工具
2.文件→生成，勾选图像资源
然后使用选择器点击想要的切图并设好名字，切出的图片会放在一个自动生成在psd同文件的文件夹中。
企业切图流程
一般企业的设计人员会将图片样式，图片提取等工作完成以减少前端开发人员工作量。
利用工具快速获取样式。
例：蓝湖（需要下载插件）
设计人员：上传psd文件、切图。
1.2.9 CSS中的float浮动
文档流
文档流是文档中可显示对象在排列时所占用的位置。（html中写入的结构，结构的排列方式就叫做文档流，块默认从上到下排列，内联默认从左到右）
float特性
加浮动的元素，会脱离文档流，会沿着外容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列。（添加浮动后，不占据文档流空间，其他文档流元素会顶替掉浮动元素原来的位置，浮动元素会在文档流元素之上，即覆盖文档流）
float属性取值
left（沿外容器向左浮动）
right（沿外容器向右浮动）
none（默认）
注：
1.只会影响后面的元素（例如有三个块元素上下排列，给中间的块元素添加了浮动，只有它后面的文档流块被浮动的块覆盖，上面的块无影响）
2.内容默认提升半层（浮动不会完全覆盖后面的文档流，由1的例子，中间的块就相当于浮动提升半层，相当于在1.5层，它下面的块在1层，如果下面的块内有文字，文字不会被覆盖，文字位置相当于2层，通过这样的效果可以做网页的图文结合）
3.浮动后元素默认的宽根据内容而定
4.换行排列（浮动元素过多超过外容器宽度时会换行，并且是上边对齐换行前最后一个元素的下边进行排列）
5.主要给块元素添加，但也可以给内联元素添加
有时我们会不希望浮动对一些布局造成影响
利用clear属性清除float浮动的影响
上下排列：clear属性（只会操作块，对内联无反应），表示清除浮动的影响（写给被浮动影响的元素，不是写给浮动的元素），left，right，both（清除左，右，两边的浮动影响）
嵌套排列：
固定宽高：不推荐，不能把宽高固定死，不适合做自适应的效果。
充当了外容器的元素浮动：不推荐，外容器浮动会影响后面的元素。
overflow:hidden（BFC规范），如果有子元素溢出，会受到影响。
display:inline-block（BFC规范），不推荐，外容器会影响到后面的元素。
设置空标签：在浮动的元素下设置一个空标签并对空标签使用clear属性清除浮动影响，不推荐，会多添加一个标签（略麻烦）。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。例：.box:after{content:"";clear:both;display:block}（.box是class选择器，content是内联）
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
