一、css样式表优先级
！important>作为style属性写在元素标签里的内联样式> 内部样式/外联样式
注：内部样式和外联样式谁在下面谁的优先级更高
例1：内联样式在下面，内联样式生效，外联样式被覆盖
<link rel="stylesheet" type="text/css" href="./test.css" />
<style>
#pp{
color: green;
}
</style>
例2：外联样式在下面，外联样式生效，内联样式被覆盖
<style>
#pp{
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="./test.css" />
另外外联引入分两种：link 和@import
两个外联样式，同样是谁在下面谁生效
<style>
@import './test1.css'
</style>
<link rel="stylesheet" type="text/css" href="./test.css" />
二、css常用选择器
一、层次选择器：
<p id="test">0</p>
<p>1</p>
<div>2</div>
<p>3</p>
<p>4</p>
1.E~F：E后面所有匹配的同级F选择器
#test~p {
color: red;
}
2.E+F：相邻兄弟选择器
#test+p {
color: red;
}
3.E>F子选择器
4.E F后代选择器
二、基本选择器
ID选择器、类选择器、元素选择器
三、伪类选择器
伪类一般反应css无法轻松检测到的某个元素属性或者状态(:hover,:focus,:visited)。
或者是根据元素在DOM树中的某些特性（如相对位置）定位到他们（:first-child）。
css3新增伪类
element:first-of-type 选择属于其父元素的首个对应element元素
element:last-of-type 选择属于其父元素的最后元素
element:only-of-type 选择属于其父元素唯一的元素
element:only-child 选择属于其父元素的唯一子元素
element:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
四、伪元素选择器
伪元素无法定位DOM树中元素，但是它的用途
1.可用于定位文档中包含的文本（::first-line,::first-letter）
2.用于表示dom外部某种文档结构(::before,::after)
三、盒模型(重点)
四、三栏布局
，假如左右宽度为300px,整个高度已知(假如高度为100px)，中间宽度自适应。
1、float布局:
1.1简单写法
.left{
float: left;
width: 300px;
height: 100px;
}
.right{
float: right;
width: 300px;
height: 100px;
}
.center{
margin-left: 300px;
margin-right: 300px;
}
注意：这种写法需要把center盒子放在最下面，否则float元素会换行。
<div id="container">
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="center" class="column"></div>
</div>
1.2双飞翼布局（不懂为啥要弄这么麻烦）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
注意：双飞翼布局center盒子要写在最前面，center，left，right都是float:left。这样center宽度100%,会把left和right盒子挤到下一行，left再向左移动屏幕的100%就上去了，right也是同理。center要嵌套两个盒子，里面的盒子再设置margin。
2、Position布局:
.left{
position: absolute;
left: 0;
width: 300px;
background-color: red;
}
.center{
position: absolute;
left: 300px;
right: 300px;
background-color: blue;
}
.right{
position: absolute;
right: 0;
width: 300px;
background-color: #3A2CAC;
}
根据以上内容我们可以看出我们需要选择给 左 中 右 都使用 absolute 绝对定位，由于absolute 是相当于static定位以外的第一个父元素进行定位，所以我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。
3、弹性(flex)布局:
.main {
display: flex;
}
.left{
width: 300px;
background-color: red;
}
.center{
background-color: blue;
flex:1;
.right{
background-color: red;
width: 300px;
}
五、雪碧图
雪碧图也叫CSS精灵， 是一CSS图像合成技术。它主要用在小图标显示上，就是将很多很多的小图标放在一张图片上。可以通过background-position 属性设置背景图像的起始位置。
HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、padding和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度,不包含margin。
HTMLElement.offsetParent
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。
HTMLElement.offsetTop 为只读属性，它返回当前元素border外边界相对于其 offsetParent 元素的顶部border内边距的距离。
Element.clientTop一个元素顶部边框（border）的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。
Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
八、如何垂直水平居中（重点）
1.flex弹性布局
.father{
width:800px;
height:800px;
display:flex;
justify-content:center;
align-items:center;
}
.son{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50)
}
2.定位
.father{
width:800px;
height:800px;
position:relative;
}
.son{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50)
}
九、css3新增特性
·新增各种CSS伪类选择器（:not(.input) 所有class不是“input”的节点）
·圆角（border-radius: 8px;）
·多列布局（multi-columnlayout）
·阴影和反射（Shadow/Reflect）
·文字特效(text-shadow)
·文字渲染(Text-decoration)
·线性渐变(gradient)
·旋转(transform)
·缩放，定位，倾斜，动画，多背景
十、选择器优先级
css优先级的计算方式可以用一下公式来解决value=a1000+b100+c*10+d，依据value值得大小来确定css的优先顺序。其中a表示行内样式，b表示ID选择器的数量，c表示类、伪类和属性选择器的数量，d表示标签选择器和伪元素选择器的数量。
十一、如何清除浮动
父级未设置宽高，父元素会被子元素撑起来，但是子元素设置浮动之后，父元素会高度塌陷，并且下面的盒子会排到浮动元素下方。
解决办法：给父类添加::after伪元素。
#parent::after{
content: '';
display: block;
clear: both;
}
十二、css3实现0.5px的细线
#line::after{
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(0.5);
}
十三、css实现三角形
<div id="tri" style="border: solid 100px;border-color: transparent transparent transparent red;"></div>
十四、position（重点）
static（默认）：按照正常文档流进行排列；不能进行top, bottom, left, right 定位；
relative（相对定位）：不脱离文档流，参考自身静态位置，通过 top, bottom, left, right 定位；但是只是在视觉上有偏差，元素仍保持其未定位前的形状，它原本所占空间仍保留。
absolute(绝对定位)：脱离文档流，参考距其最近一个不为static的父级元素，通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
sticky（粘性定位）：relative 与fixed的结合。设置top，盒子未达到top位置时，随滚动条滚动，达到那个位置，则为fixed固定。（参考微博点进某个人主页的界面，header导航栏就是这种定位。）
十五、BFC（重点）
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC的作用
1.利用BFC避免margin重叠。
根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC.
2.自适应两栏布局
3.清除浮动。
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。比如说父节点设置overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
因为：BFC的区域不会与float box重叠。所以我们让right单独成为一个BFC。
十六、重排与重绘（重点）
十七、介绍一下flex（重点）
https://www.runoob.com/w3cnote/flex-grammar.html
扫一扫
4539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
