box-sizing属性
正常来说，我们在页面元素设置的高宽其实并不是真正想要的高宽，默认情况下，元素的宽度和高度计算如下：
padding + border + width = 元素的实际宽度；padding + border + height = 元素的实际高度；这就意味着设置的元素通常看起来比您设置的大。看下图更好理解
box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中：
<!DOCTYPE html> <html> <head> <style> div.box1 { width:50%; height: 100px; border:1em solid red; padding: 20px; } div.box2 { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; height: 100px; border:1em solid blue; padding: 20px; } </style> </head> <body> <div class="container"> <div class="box1"> 这个 div 宽度是50%，高度为200px </div> <div class="box2"> 这个 div 也是宽度是50%，高度为200px </div> </div> </body> </html>
一个元素居中的办法（不确定宽高的情况下如何用定位的办法实现）
方法一：水平居中
父层：text-align:center;
子层:display:inline-block;
方法二：水平垂直居中
父层：display:table-cell;
text-align:center;
vertical-align:middle;
子层：display:inline-block;
父层：position: relative;
子层：position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
已知高宽元素水平垂直居中：
方法一：display:table和diaplay:table-cell
<style> .container { display: table; } .inner { display: table-cell; vertical-align:middle; text-align:center; } </style> <div class="container"> <div class="inner"> you own content </div> </div>
方法二：position:absolute、50%和translate
<style> .container { position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="container"> <div class="inner"> your own content </div> </div>
方法三：vw vh和translate
<style> .inner { position:fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%); } </style> <div class="inner"> this is a box fixed in center of screen </div>
方法四：:before和display:inline-block
<style> .container{ text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; } </style> <div class="container"> <div class="inner"> this is a box fixed in center of screen<br>The second line </div> </div>
方法五：css3 flex
<style> .container { display: flex; align-items: center; justify-content: center; } </style> <div class="container"> <div class="inner"> this is a box fixed in center of screen<br>The second line </div> </div>
方法六：absolute + 四个方向的值相等
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative; } .wrapper > p { width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
方法七：grid
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: grid; } .wrapper > p { align-self: center; justify-self: center; }
两列布局——左侧宽度固定，右侧宽度自适应的三种方法
方法一：元素浮动
.left { position: absolute; height: 100px; width: 300px; background-color: blue; } .right { height: 200px; margin-left: 300px; background-color: red; }
方法二：BFC
.left { float: left; height: 100px; width: 300px; background-color: blue; } .right { overflow: auto; height: 200px; background-color: red; }
方法三： flex
.left{ width:200px; height: 300px; background: red } .right{ flex: 1; height: 300px; background-color: blue; }
用纯 CSS 创建一个三角形
.triangle { width: 0; height: 0; border-style: solid; border-width: 20px; border-color: red transparent transparent transparent;
; }
用纯CSS创建一个等腰梯形
.border-arrow { width: 256px; height: 256px; border: 64px solid ; border-color : red transparent transparent transparent ; }
用纯CSS创建一个扇形
.sector { width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent transparent blue transparent; border-radius: 50%; }
盒模型
·标准盒模型 border, padding, content, margin
·IE盒模型 border, padding, content
·通过 box-sizing属性改变元素的盒模型
CSS选择符
·id选择器（#myId）
·类选择器（.myClassName）
·标签选择器（div, h1, p）
·后代选择器（h1 p）
·相邻后代选择器（子）选择器（ul > li）
·兄弟选择器（li~a）
·相邻兄弟选择器（li+a）
·属性选择器（a[rel="external"]）
·伪类选择器（a:hover, li:nth-child）
·伪元素选择器（::before, ::after）
·通配符选择器（*）
CSS3有哪些新特性
·新增各种CSS选择器（:not(.input) 所有class不是“input”的节点）
·圆角（border-radius: 4px;）
·多列布局（multi-columnlayout）
·阴影和反射（Shadow/Reflect）
·文字特效(text-shadow)
·文字渲染(Text-decoration)
·线性渐变(gradient)
·旋转(transform)
·缩放，定位，倾斜，动画，多背景
伪类和伪元素的区别
伪类和伪元素是一个比较容易混淆的概念，这不仅仅是从名称上，而且在写法上也是相似的（目前因为兼容性的问题，它们的写法是一致的），这就更容易混淆了。
规范：
css3 明确规定了伪类用一个冒号 : 来表示，而伪元素则用两个冒号 :: 来表示。
区别：
- 伪类更多的定义的是状态，如
:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child - 伪类使用一个冒号
: -
常见伪类：
伪元素简单来说就是不存在于DOM文档树中的虚拟的元素，它们和HTML元素一样，但是你又无法使用JavaScript去获取，如:before:hover:active:focus:visited:link:lang:first-child:last-child:not
- 伪元素使用两个冒号
:: -
常见伪元素：
::before::after::first-letter- ::first-line
用:target来实现折叠面板
:target是文档的内部链接，即URL后面跟有锚名称 #，指向文档内某个具体的元素。
利用 :target 的特性可以实现以前只能使用JavaScript实现的显示隐藏或者Collapse 折叠面板。
<html> <head></head> <body> <div class="row" style="margin-top: 2rem;"> <div class="t-collapse"> <a class="collapse-target" href="#modal1">target 1</a> <div class="collapse-body" id="modal1"> <a class="collapse-close" href="#">target 1</a> <p> 1 </p> </div> </div> <div class="t-collapse"> <a class="collapse-target" href="#modal2">target 2</a> <div class="collapse-body" id="modal2"> <a class="collapse-close" href="#">target 2</a> <p> 2 </p> </div> </div> <div class="t-collapse"> <a class="collapse-target" href="#modal3">target 3</a> <div class="collapse-body" id="modal3"> <a class="collapse-close" href="#">target 3</a> <p> 3</p> </div> </div> <div class="t-collapse"> <a class="collapse-target" href="#modal4">target 4</a> <div class="collapse-body" id="modal4"> <a class="collapse-close" href="#">target 4</a> <p>4 </p> </div> </div> </div> </body> </html>
.collapse { >.collapse-body { display: none; &:target { display: block; } } }
持续更新中……