css选择器
标签选择器（TAG选择器）
css：div{}
html：<div></div>
使用场景：
1、去掉某些标签的默认样式时；
2、复杂的选择器中，如：层次选择器
群组选择器（分组选择器）
CSS:div,p,span{}
使用方法：
利用逗号给多个不同的选择器添加统一的css样式，来达到代码的复用。
通配选择器
*{}->div,ul,p,li,h1,h2等所有标签
注意：尽量不要使用通配选择器，因为会给所有的标签添加相同的样式，慎用！
使用场景：
1、去掉所有的标签的默认样式
层次选择器
适用类型：
后代：M加空格加N{}
父子：M>N{}
兄弟：M~N{} 当前M面下所有的兄弟你N标签
相邻：M+N{} 当前M下面相邻的标签
属性选择器
AA
=：完全匹配
*=：表示部分匹配
^=：起始匹配
$=：结束匹配
伪类选择器
css伪类用于像某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式
:visited 访问后的样式
:hover 鼠标移入时的样式
:active 鼠标按下时的样式
:after ,:before 通过伪类的方式给元素添加一个文本内容，使用content属性
:checked，:disabled，:focus 都是针对表单元素的
结构性伪类选择器：nth-of-type（）（角标是从1开始的，1表示第一项，2表示第二项|n值表示从0到无穷大） nth-child（）
nth-of-type与nth-child有区别
注：
1、link，visited只能给a标签加，hover和active可以给所有的标签加。
2、如果四个伪类都生效，一定要注意顺序：LVHA。
3、一般网站值能这样去设置：a{} a:hover{}。
css样式继承
文字样式可以继承
布局相关的样式不能被继承（默认是不能被继承，但是也可以设置继承属性 inherit）
css优先级
相同样式优先级
当设置项同时，后面的优先级更高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级更高。
单一样式优先级
style行间>id>class>tag>*>继承
注：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
!important（不能针对继承的优先级进行提升）
提升样式优先级，非规范方式，不建议使用
标签+类与单类
标签加类的优先级大于标签的优先级
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
层次优先级
1、权重比较
2、约分比较
css盒子模型
组成：content（物品）->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的距离）
content：内容区域 width和height组成
padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px （上下，左右）
写四个值：40px 30px 50px 60px（上，下，左，右）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
magrin:外边距(外填充）
只写一个值：30px（上下左右）
写两个值：30px 40px （上下，左右）
写四个值：40px 30px 50px 60px（上，下，左，右）
单一样式只能写一个值：
margin-left
magrin-right
magrin-top
magrin-bottom
注：
1、背景颜色会填充到margin以内的区域（不包括margin区域）
2、文字会在content区域
3、padding不能出现负值，margin是可以出现负值
box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）|border-box。
盒子模型的一些问题：
1、margin叠加问题，出现在上下margin同时存在的时候，回去上下种植较大的值作为叠加值
解决方案：
1、BFC规范
2、想办法只给一个元素添加间距
2、margin传递问题 ，出现在嵌套的结构中，只是针对margin-top的问题
解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding
扩展
1、margin自适应居中左右可以，上下不行，使用如下
2、width，height不设置的时候，对盒子的影响
标签的分类
按类型
block：块：div，p,ul,li,h1····
1、独占一行
2、支持所有样式
3、不写宽时，跟父元素的宽相同.
4、所占区域是一个矩形
inline：内联：span、a、em、strong、img····
1、 挨在一起的
2、有些样式不支持：width，height，margin，padding·····
3、不写宽时，宽由内容决定
4、所占区域不一定是矩形
5、内联标签之间有空隙，换行产生的
inline-block：内联块：input、select·····
注：布局一般用块标签，修饰文本一般用内联标签
按内容分类
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
按显示分类
替换元素：浏览器根据元素的标签和属性，来决定元素的具体内容。
非替换元素：将内容直接告诉浏览器，将其显示出来
显示框类型
display
block
inline
inline-block
none
注：display：none与visibility：hidden区别：display：none是不占空间的隐藏，visibility：hidden是占空间的隐藏
标签嵌套规范
1、块标签可以嵌套内联标签
例如：<div>
<span></span>
<a href="#"></a>
</div>
2、块标签不一定能嵌套块标签（绝大多数情况可以）
错误示范：
<p>
<div></div>
</p>
内联标签不能嵌套块标签，a标签是一个例外
错误示范：
<span>
<div></div>
</span>
特殊：
<a href="#">
<div></div>
</a>(正确)
溢出隐藏
表示：overflow
visibe：默认
hidden：溢出内容隐藏裁切
scroll：加上下滚动条和左右滚动条，内容较少时，滚动条依旧会显示无法拉动
auto：加上下滚动条，内容较少时滚动条不显示
透明度与手势
透明度
opacity：0（透明）~1（不透明），0.5（半透明）
注：
1、占空间
2、所有的子内容也会透明
3、针对整体
rgba：可以让指定的样式透明，而不影响其他样式
手势
cursor
default：默认
自定义鼠标样式
pointer：手形
move：可移动的样式
······
要实现自定义样式
1、准备图片：.cur或 .ico格式的
写法：cursor：url（./img/图片地址），auto；
最大、最小宽高
宽：
min-width、max-width
高：
min-height、max-height
注：强化对百分比单位的理解
%单位：换算->已父容器的大小进行换算
注：一个容器如何适应屏幕的高：容器加heigh：100%；body：100%；html：100%；
例如：
html，body{height:100%;}
.contrainer{height:100%;}
css默认样式
1、没有默认样式：div、span、····
2、有默认样式：body（margin：8px）、h1·····h6（margin：上下，font-weight：bold）、p（margin：上下16px）、ul（margin：上下，padding：左，（默认点：list-style：disc）），a（text-decoration：underline；）······
cssreset
简单的css reset：
*{margin:0;pandding:0;}
优点：不用考虑那些标签有默认的Margin和padding。
缺点：稍微的影响性能
body，p，h1，ul{margin：0；padding：0；}
ul{list-style:none;}
a{text-decoration:none;color:#666}
img{display:block;}
问题的现象：图片跟容器底部有一些空隙
原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
解决方式：添加img{vertical-align:baseline:},基线对齐方式，默认值。bottom是底线对齐（推荐）
写具体页面的时候或一个布局效果的时候：
1、写结构
2、css重置样式
3、写具体样式
float浮动
文档流
文档流是文档中可显示对象在排列中所占用的位置
float特性
加浮动的元素，会脱离文档流，会延着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
取值：left，right，none
float注意点：
1、只会影响后面的元素
2、内容默认提升半层
3、默认宽根据内容决定
4、换行排列
5、主要给块元素添加，但也可以给内联元素添加
1,2,3点的例子如下：
第4点例子如下：
第5点例子如下：
利用clear属性清除float浮动
嵌套排列：
上下排列：clear属性，表示清除浮动的，left、right、both
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
