CSS选择器

元素选择器

//格式：
元素名 {
//属性：值;
}
//选择当前的元素进行设置样式;

//示例：
div { 
font-size:20px;
}
//元素
<div>标签选择器</div>

类选择器

//格式：
.标签名 {
//属性：值;
}
//选择当前的标签名进行设置样式;

//示例：
.nav { 
font-size:20px;
}
//元素
<div class='nav'>类选择器</div>

Id选择器

//格式：
#标签名 {
//属性：值;
}
//选择当前的标签名进行设置样式;

//示例：
#boot { 
font-size:20px;
}
//元素
<div id='boot'>id选择器</div>

后代选择器

//格式：
标签名1 标签名2 ... {
//属性：值;
}
//选择当前的标签名1下所有的标签名2进行设置样式,中间用空格隔开,可以无限的往下选中(不限层级);
//标签名可以是元素名,类名,id名

//示例：
#boot p { 
font-size:20px;
}
//元素
<div id='boot'>
<p>后代选择器</p>
</div>

子代选择器

//格式：
标签名1>标签名2>... {
//属性：值;
}
//选择当前的标签名1下所有的标签名2进行设置样式,中间用>隔开,只会选择当前直系的子元素;
//标签名可以是元素名,类名,id名

//示例：
#boot>p { 
font-size:20px;
}
//元素
<p>子代选择器</p>
<div id='boot'>
<p>子代选择器</p>
</div>

交集选择器

//格式：
标签名1标签名2... {
//属性：值;
}
//选择当前的标签名1又是标签名2的进行设置样式,中间没有任何东西隔开,只会选择是标签名1且又是标签名2的元素;
//标签名可以是元素名,类名,id名

//示例：div标签且是id选择器是#boot的元素
div#boot { 
font-size:20px;
}
//元素
<div id='boot'>
<p>交集选择器</p>
</div>

并集选择器

//格式：
标签名1,
标签名2,
... {
//属性：值;
}
//选择当前的标签名1和标签名2进行设置样式,中间用,隔开;
//标签名可以是元素名,类名,id名

//示例：
#boot,
p { 
font-size:20px;
}
//元素
<p>并集选择器</p>
<div id='boot'>
<p>并集选择器</p>
</div>

兄弟选择器

相邻兄弟选择器（css2）

//格式：
标签名1+标签名2{
//属性：值;
}
//选择当前的标签名2紧跟标签名1的进行设置样式,中间用+隔开;
//标签名可以是元素名,类名,id名

//示例：选择紧跟 <div> 元素的首个 <p> 元素。
div+p { 
font-size:20px;
}
//元素

<div id='boot'>
兄弟抱一下
</div>
<h1>添加了h1标签就不是相邻的了，因为div紧跟的标签不是p了而是h1</h1>
<p相邻选择器</p>

通用兄弟选择器（css3）

//格式：
标签名1~标签名2{
//属性：值;
}
//选择当前的标签名2前面有标签名1的进行设置样式,中间用~隔开;
//标签名可以是元素名,类名,id名

//示例：选择紧跟 <div> 元素的首个 <p> 元素。
div~p { 
font-size:20px;
}
//元素

<div id='boot'>
兄弟抱一下
</div>
<h1>这里无论是否添加都会选择因为前面有div</h1>
<p通用选择器</p>

序选择器

同级别不区分类型的选择器

元素名:first-child 选择同级别中的第一个元素。
元素名:last-child 选择同级别中的最后一个元素。
元素名:nth-child(n) 选择同级别中的第N元素。
元素名:nth-last-child(n) 选择同级别中的倒数第N元素。
元素名:only-child 选择父元素中唯一的元素(当前元素中有一个为当前元素名且只有一个的元素标签)。

//格式：
标签名1:first-child{
//属性：值;
}
//选择当前的标签名1且为同级别中的第一个元素;
//标签名可以是元素名,类名,id名

//示例：
p:first-child { 
font-size:20px;
}
//元素

<div id='boot'>
兄弟抱一下
</div>
<h1>风雨交加</h1>
<p选择器</p>

同级别同类型的选择器

元素名:first-of-type 选择同级别中同类型的第一个元素。
元素名:last-of-type 选择同级别中同类型的最后一个元素。
元素名:nth-of-type(n) 选择同级别中同类型的第N元素。
元素名:nth-last-of-type(n) 选择同级别中同类型的倒数第N元素。
元素名:only-of-type 选择父元素中唯一的元素类型的元素。
N可以为数字，英文，还有倍数：
odd 奇数（1357）
even 偶数（2468）
2n+1 n是计数器从0开始，(n是看当前有几个元素，比如当前页面有7个p标签，然后n就是0-7)这是说的是2的倍数+1的元素，
2n 2的倍数标签，n从0开始
注意点，任何数和0相乘都得0

//格式：
标签名1~标签名2{
//属性：值;
}
//选择当前的标签名2前面有标签名1的进行设置样式,中间用~隔开;
//标签名可以是元素名,类名,id名

//示例：选择紧跟 <div> 元素的首个 <p> 元素。
div~p { 
font-size:20px;
}
//元素

<div id='boot'>
兄弟抱一下
</div>
<h1>这里无论是否添加都会选择因为前面有div</h1>
<p通用选择器</p>

属性选择器

元素名[属性名]	             选择当前元素带有当前属性名的所有元素。
元素名[属性名=属性值]	          选择当前元素带有属性和属性值的所有元素。
元素名[属性名|=属性值](CSS2不推荐) 选择当前元素以属性值开头的元素。
元素名[属性名~=属性值](CSS2不推荐) 选择元素属性中包含当前属性值的元素。
元素名[属性名^=属性值](CSS3推荐)	选择元素的属性值以属性值开头的元素。
元素名[属性名*=属性值](CSS3推荐)	选择元素属性中包含当前属性值的元素。
元素名[属性名$=属性值](CSS3推荐)	选择元素的属性值以属性值结尾的元素。
这里不推荐的原因：
CSS2属性选择器有弊端，例如:
//这个代码直会找到abc-www的这个img标签，因为css2属性开始选择器只会找属性值，
//且开始属性值以-隔开的属性，其他都找不到，而css3可以找到所有以属性值开头的元素
img[alt|=abc]{代码}
<img src='' alt='abcdfg'> //css2找不到，但css3选择器却能找到
<img src='' alt='abc-www'>
第二个属性选择器的问题：
//css2只能找到当前单独存在属性值中间并且是以空格隔开的元素，而css3只要包含都能找到。
img[alt~=abc]{代码}
<img src='' alt='abcdfg'> 
<img src='' alt='abc-www'>
<img src='' alt='ddd abc www'>//css2只能找到单独存在的，但css3选择器却全能找到

//格式：
{
//属性：值;
}
//选择当前元素名且拥有属性为当前属性值的元素;

//示例：
 a[href]{ 
font-size:20px;
}
//元素

<a href='http://www.baidu.com'></a>

通配符选择器

//格式：
*{
//属性：值;
}
//选择全部标签，用*号表示;

//示例：
* { 
font-size:20px;
}
//元素

<div id='boot'>
兄弟抱一下
</div>
<h1>风吹雨打</h1>
<p通用选择器</p>

伪类选择器

:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。
:checked	input:checked	选择每个被选中的 <input> 元素。
:default	input:default	选择默认的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 <input> 元素。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 "it"（意大利）的每个 
<p> 元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。
:optional	input:optional	选择不带 "required" 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 "placeholder" 属性的 
input 元素。
:read-only	input:read-only	选择已规定 "readonly" 属性的 input 
元素。
:read-write	input:read-write	选择未规定 "readonly" 属性的 
input 元素。
:required	input:required	选择已规定 "required" 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

CSS三大特性

层叠性

给父元素设置属性，所有后代元素也可以使用，这就叫做继承性。

//并不是所有的属性都可以继承，只有以
1.color开头
2.line开头
3.font-开头
4.text-开头
才会进行继承
继承的属性会在开发者工具上显示，选中当前元素，上面有 linhetied form div 就是说当前属性继承来自于div
高亮的就是继承的，灰色的或者被划掉的就是未被继承的属性
//特殊元素
a标签的字体颜色和下划线不会被继承属性所影响
h标签的字体大小不会被继承属性所影响

继承性

多个选择器给元素设置相同的属性，如果选择器权重相同则后面的属性会把前面的属性覆盖掉，默认选择优先级高选择器的样式;

p{
color:red;
}
#pp{
color:blue;
//这个生效因为他的层级高
}
<p id='pp'>继承性</p>

优先级

当多个选择器选中一个元素并给其赋值上相同的属性，如何层叠就由优先级确定;
优先级排序从大到小:id选择器>类选择器>元素选择器>通配符选择器>继承属性>浏览器默认属性(最小的)

1.继承的话是谁离当前选中的标签近谁的优先级就高;
例子:
li{
color:blue;
//当前的li离p比较近，所以就优先继承li的，所以li的权重就高
}
ul{
color:red;
}

<ul>
<li>
<p> 优先级</p>
</li>
</ul>
2. 优先级的选择器赋值相同的属性，只会选择最后的属性;

优先级最高: !important

用于提升选择器中的某个属性，将指定属性的优先级提至最高，请注意:important只能直接选中，不能间接选中（指的是继承）
通配符选择器也是可以直接选中的

p{
color:red !important;
}
<p>优先级最高</p>

权重计算(请忘掉权重，记住优先级)

因为20个元素选择器都顶不过1个类选择器，原因是因为20个元素选择器的权重是0,0,0,20,但是类选择器的权重是0,0,1,0)
只有选择器是直接选中元素的才需要进行计算权重，当权重都是一样时，会选择最后书写的选择器;

选择器	权重
继承以及浏览器默认	0,0,0,0
通配符选择器和子选择器以及兄弟选择器等	0,0,0,0
元素选择器和伪元素选择器	0,0,0,1
类选择器和伪类选择器以及属性选择器	0,0,1,0
id选择器	0,1,0,0
内联样式	1,0,0,0
!important	最高

权重计算公式：
权重 = 选择器 * 个数;权重可以累加，但是权重不作为最后样式生效的最后依据
权重计算只算权重不为0的选择器，例如id选择器，类选择器，元素选择器20个元素选择器，都超不过一个类选择器

CSS盒子模型

盒子模型是指：外边距+边框+内边距+内容高度或宽度
内容宽度和高度是指：内容高度或宽度
元素高度或高度是指：边框+内边距+内容高度或宽度
元素空间的高度或宽度是指：外边距+边框+内边距+内容高度或宽度

CSS过渡(transition)

给元素加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

transition-property:当前需要过渡的属性(多个属性以,号隔开);
transition-duration:过渡动画需要执行的秒数(多个属性执行动画时长以,号隔开);
transition-delay:延迟几秒后开始执行动画;
transition-timing-function:控制过渡动画的速度;
div{
width:300px;
height:20px;
background:red;
transition-property:width,background;
//从300到800需要2秒完成
transition-duration:2s,2s;
//延迟俩秒后开始执行动画
transition-delay:3s;
}
div:hover{
//过渡完成的属性在hover里面写
width:800px;
background:green;
}

简写

transition:执行过渡的CSS属性 执行动画的秒数 动画运动速度(可以省略) 延迟几秒开始执行(可以省略);(多个属性书写用逗号隔开)

transition:width 2s  linear 1s,background 2s  ;
//如果过渡属性很多(过渡时间和速度以及延时时间都一样的情况下)可以采用all的
//方式,当前元素的所有过渡属性都执行过渡,且都是5秒执行时间
transition:all 5s;

过渡注意点

三要素

1.1必须要有属性发生变化
1.2 必须告诉系统哪个属性需要执行过渡效果
1.3 必须告诉系统过渡效果持续时长
过渡书写思路 1.1不要管过渡先编写基本样式
1.2修改我们认为需要修改的属性
1.3在给修改的属性添加过渡即可

CSS2D转换(transform)

能够对元素进行旋转,移动,拉伸,拉长或缩放;
2d转换会修改元素的坐标系

旋转(rotate)

//代表多少度,10deg代表10度
transform:rotate(10deg);

移动(translate)

//第一个值代表x轴,第二个值代表y轴
transform:translate(100px,0);

放大或缩放(scale)

取值如果是1则不变，代表一倍，可以小于1则缩小或大于1则放大,如果俩个参数一样可以简略成一个

//第一个值代表x轴放大或缩小,第二个值代表y轴放大或缩小
transform:scale(1.5,1.5); //1.5是倍数

简写

//多个属性用空格隔开
transform:scale(1.5) translate(100px,0); 

形变中心点(transform-origin)

默认元素旋转是按照自己的中心点进行旋转的,可以通过形变中心点进行修改旋转的中心点;

取值有三种：
1. px
2.百分比
3.关键字 left  top
//第一个值是X轴的位置，第二个值是Y值的位置
transform-origin:100px 20px; 

旋转轴向

默认元素旋转轴向是Z轴,旋转轴向有三个方向X轴Y轴Z轴;

//在rotate后面加上自己想旋转的轴向就行了,默认是Z轴
//写了之后必须加上透视属性才能明显起来(透视属性只能加给旋转元素的上级，
//默认父级元素)
transform:rotateX(10deg);
transform:rotateY(10deg);

透视(perspective)

调整Z轴的视角，值越小越近(效果越明显)，值越大越远(效果不明显);

perspective: 距离值;

CSS动画

动画和过渡的区别,过渡需要人为的去触发,而动画不需要; 动画三要素 1.告诉系统执行那个动画
2.告诉系统我们自己创建的动画名字
3.动画持续时长

创建动画

创建一个动画，从from开始的原始位置执行，到to结束

@keyframes 创建动画的名字
{
//form是开始
    from {background: red;}
    //to是结束
    to {background: yellow;}
}
//也可以用百分比的阶段来定义动画
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 

使用动画

div{
//告诉使用那个动画
animation-name: myfirst;
//动画持续时间
  animation-duration: 5s;
  //以上可以简写为
    animation: myfirst 5s;
    //默认显示动画第一帧,指定动画等待和结束的样式
    animation-fill-mode:backwards;
}

简写

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否往返动画;

CSS3D转换

3d就是比较立体的效果,2d就是只有高度宽度，但是3d除了这些还有厚度,默认都是2d展现

开启3d转换

//也是必须开启透视
perspective:500;
//开启被嵌套元素3d显示，所有子元素在3D空间中呈现。
 transform-style: preserve-3d;

阴影

盒子阴影(不设置颜色默认当前元素的文字颜色)

给盒子设置内外阴影属性

box-shadow:水平偏移  垂直偏移 模糊度  阴影扩展(阴影的范围,上下左右都会扩展) 
阴影颜色 内外阴影(默认外阴影开启需要设置:inset);
//一般只写这三个参数即可
box-shadow:水平偏移  垂直偏移 模糊度;

文字阴影(不设置颜色默认当前元素的文字颜色)

给文字设置外阴影属性

text-shadow:水平偏移  垂直偏移 模糊度  阴影扩展(阴影的范围,上下左右都会扩展) 
阴影颜色 内外阴影(默认外阴影开启需要设置:inset);
//一般只写这三个参数即可
text-shadow:水平偏移  垂直偏移 模糊度 阴影颜色 ;

CSS布局

css布局方式分为标准流，浮动流和定位流，浏览器默认的就是标准流。
脱离标准流的元素都不区分行内元素和块级元素以及行内块级元素的都可以进行设置宽高;

标准流(文档流或普通流)

标准流分为垂直布局和水平布局;
块级元素都是垂直布局;
行内元素和行内块元素都是水平布局;
标准流中内容的高度可以撑起父元素的高度;

浮动流(只能水平排版,半脱离标准流)

半脱离标准流

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的

1.元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无
视它所占据了的区域，直接在它身下布局。
2.但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

浮动是通过设置float属性进行设置的只能进行左浮动和右浮动,设置浮动流之后margin:0 auto;属性失效。
浮动布局不区分块级元素和行内元素以及行内块元素(这是是标准流中的概念),设置浮动流的元素可以进行设置宽高;
浮动元素的高度是不能够撑起父元素的高度;

浮动流注意点

浮动流脱标

浮动的元素是脱离文档流的(因为浮动的元素相当于是从标准流中删除了),如果前面一个元素浮动了，后面一个元素未浮动，则浮动的元素会盖在未浮动的元素上面。 浮动元素的排序规则 1.先浮动的元素会在前面，后浮动的元素会在后面，进行水平排列(相同方向的元素谁先浮动谁在前面);
2.左浮动的元素会找左浮动，右浮动的元素会找右浮动;
3.浮动元素浮动之后的位置由未浮动前在标准流中的位置决定(指的就是半脱离标准流，如有ABCD四个块元素，A和C设置了左浮动，A会在B的上方，C会在B的后面D的上方，因为C未浮动之前就是在B的后面,而B未浮动);
4.如果父元素宽度不够排列子元素中的浮动元素时，最后一个子浮动元素就会往前面的一个元素贴紧，不够在去前面一个元素贴紧,直到找到第一个浮动元素，如果还不够就会紧贴父元素进行排列，此时无论够不够，都会紧贴父元素进行排列。
5.如果文字中有浮动的元素，文字会围绕着浮动元素，给浮动元素让出空间。

清除浮动的方式

第一种：给父元素设置高度（基本不用）

给父元素设置高度后,后面元素的布局才不会乱;
注意点：在开发中一般能不给高度就不给高度; 第二种：给浮动后面的元素添加clear属性 添加claer属性之后,margin(外边距)属性就会失效。 原理:有A和B俩个元素，A包含着B，如果B给顶部外边距的话会导致A也跟着移动，如果不想A跟着移动就得给A一个边框，这样B的外边距对应的就是A，元素添加clear属性之后,必须该设置clear属性元素的父元素设置边框之后顶部外边距大于前面的元素才可以外边距生效,否则就不会生效(一般这样的父元素是body,但是body一般不会设置边框,所以该设置属性的元素移动带动了body移动，跟每没移动差不多)。

clear：both;
常用的有这几个值：
none(默认,正常浮动)
flet(不允许找前面的左浮动元素)
right(不允许找前面的右浮动元素)
both(不允许找前面的左右浮动元素)

第三种：外隔墙法清除浮动

在紧跟第一个浮动元素的后面在写一个div并设置clear属性,设置之后前面的浮动元素的下外边距失效,不可使用(设置中间间隔需要给设置clear属性的盒子高度即可),需要写到俩个浮动元素盒子的中间;

<div>浮动元素</div>
<div style='clear:both;'></div>
<div>浮动元素</div>

第四种：内隔墙法清除浮动

在第一个浮动元素的内部所有子元素最后面在写一个div并设置clear属性,注意：如何给设置清除浮动的元素添加高度会撑开盒子(未设置CSS3盒子模型的情况下);

<div>
浮动元素
<div style='clear:both;'></div>
</div>

<div>浮动元素</div>

第五种：单伪元素清除浮动

由于单伪元素是CSS3的属性所以会不兼容ie6,所以需要额外写上兼容ie6的代码

.box::after {
//设置添加的子元素为空
  content:'';
  //高度为0
  hight:0;
  //设置成块元素,因为只有块元素可以设置宽高且不是一行排列
  display:bolck;
  //隐藏当前元素
  visibility: hidden;
  //设置不跟随左右浮动
  clear:both;
}
//兼容ie6的代码
/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
.box{
*zoom:1;
}
<div class='box'>浮动元素</div>

第六种：双伪元素(最常用)

.clearfix:before,
.clearfix:after {
	content:"";
	display:bolck;
        clear:both;
}
/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
.clearfix {
	*zoom:1;
}
<div class='clearfix'>浮动元素</div>

第七种：overflow:hidden;清除浮动(最常用)

给当前浮动元素设置之后就可以进行清除浮动,但是会出现兼容问题,不兼容ie6,需要兼容代码,也可以用来解决外边距塌陷

.box {
overflow:hidden;
*zoom:1;
}
<div class='box'>浮动元素</div>

定位流

定位分为以下几种:
1.粘性定位:脱离标准流,以浏览器的可视化窗口作为参考点,在距离某个位置之后便不动了;

2.相对定位:不脱离标准流,保留当前位置在标准流中占用空间,如果不给位置默认在标准流的位置,移动是按照未定位前标准流中的位置进行移动;(相对定位中由于不脱离标准流所以是区分块级元素/行内元素/行内块元素的)

3.绝对定位:脱离标准流,相对于父元素进行位移(父元素设置相对定位的情况下),如果没有默认是body;(显示层级比标准流高)

4.固定定位:脱离标准流,元素固定于浏览器的可视区的位置，在浏览页面的时候元素的位置不变。ie6不支持

5.静态定位:一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流(默认的);

在定位中垂直方向和水平方向的移动属性只能操作一个;
z-index属性可以调节定位中显示的层级,值越大谁就显示在最前面; 粘性定位

position:sticky;
//某些网站，在主导航栏下面还会有副导航栏，要实现页面往下拉，副导航栏滚动到
//距离上边沿10px的时候图片就不动了，而在这之前会随着浏览器的滚动而滚动。
//位在页面顶部，除了可以用js监听onscroll事件来实现，还可以通过sticky
//定位轻松搞定。
粘性定位的特点：以浏览器的可视化窗口为参考点移动元素；

相对定位

position: relative;
//由于不脱离标准流,在使用外边距内边距的时候会影响到标准流的布局

绝对定位

position: absolute;
//默认所有绝对定位元素都是以body作为定位的参考点,无论有没有父级及以上元素;
//如果绝对定位祖先元素有定位流(除了静态定位属性不行其他都可以),就会以当前
//开启定位流的元素作为参考点进行定位;
//如果祖先有很多定位流元素,那么当前定位的元素会选择离他最近的定位流元素作
//为参考点;
//如果是按照body为参考点,那么他是按照body首屏作为的参考点,当超过body首屏
//的长度后,他会跟着滚动;
//绝对定位会忽略掉祖先元素的内边距

固定定位

position: fixed;
//元素固定于浏览器的可视区的位置，在浏览页面的时候元素的位置不变。

子绝父相(重点,常用)

父元素相对定位,子元素绝对定位,这样写的话可以保证不占用标准流的位置,不会随着浏览器的变化而变化;

CSS隐藏元素的区别

display:none;

会触发重排和重绘,display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

visibility: hidden;

会触发重绘,visibility: hidden;的元素不会触发绑定的事件; ##opacity:0; 会触发重绘, opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

CSS伪元素

前伪元素：在元素前面插入(行内元素)

div::before {
//可以插入任何元素，也可以设置宽高
  content:'';
  
}

后伪元素：在元素后面插入(行内元素)

div::after {
//可以插入任何元素，也可以设置宽高
  content:'';
  
}

布局小技巧

如何实现页面背景图随屏幕大小进行居中

background-position:center top;

让当前的子元素不溢出父元素(也可以解决外边距塌陷)

//默认是visible内容不会被修剪，会呈现在元素框之外;
//设置auto属性就是超过父元素之后会出现滚动条;
//也可以用这个属性进行清除浮动
//也可以用来解决外边距塌陷
overflow:hidden;

图片过大如何居中

//之前有背景图片居中，这里讲一下img居中，要是img不大过父元素的情况下可以采用
text-align：center;
//如果大于了父元素，可以采用
 父元素设置：  text-align：center;
  img设置：  margin：0 -100%;

如何布局

拿到页面之后先想如何去布局，一般是垂直布局使用标准流，水平布局使用浮动流进行布局.(记得清除浮动);

样式缩写

字体

font:字体样式  字体变体(基本不用) 字体粗细 字体大小  字体系列(宋体之类的) ;

背景

background:背景颜色  背景图片  平铺方式  关联方式(是否随页面滚动) 背景定位;