一、css初始化
1. 初始化CSS的原因
1、浏览器差异
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、提高编码质量
初始化CSS为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。
如果不初始化，整个页面做完会很糟糕，重复的css样式很多。但初始化样式会对SEO有一定的影响
2. 初始化样式示例
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,
form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
二、盒模型
1. 盒模型的分类
（1）W3C 盒子模型(标准盒模型)
（2）IE 盒子模型(怪异盒模型)
2. 如何在CSS 设置这两个模型
W3C 盒子模型(标准盒模型)：
box-sizing: content-box
IE 盒子模型(怪异盒模型)：
box-sizing: border-box
三、文本样式
1. 文字超出部分显示省略号
（1）单行文本的溢出显示省略号（一定要有宽度）
p{
width:200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
（2）多行文本溢出显示省略号（不兼容ie）
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
2. 垂直居中
（1）单行文字的垂直居中
设置 height 和 line-height 同样的高度
.box{
width:200px;
height:100px;
line-height:100px;
}
（2）对文本进行垂直居中
通过display:flex;配合align-items和justify-content实现文本居中
.content{
display: flex;
align-items: center;
justify-content: center;
}
（3）对已知高度块级元素进行垂直居中
- 绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中
.content{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10em; /* 为元素height/2 */
margin-left: -10em;
width: 20em;
height: 20em;
}
- 绝对定位，配合top:0;bottom:0;和margin:auto进行垂直居中
.content{
position: absolute;
margin：auto；
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 200px; /*要求指明元素高度*/
}
（4）对未知高度块级元素进行垂直居中
- 设置position：absolute；和transform:traslate(x,y)实现水平垂直居中
.content{
position: absolute;
margin：auto；
top: 50%;
left: 50%;
transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%*/
background-color: aqua;
}
- 通过display:table-cell和vertical-align:middle;实现垂直居中
.parent{
display: table;
width: 50px; /*建议设置宽高，以便于查看效果*/
height: 500px;
}
.content{
display: table-cell;
vertical-align: middle;
background-color: red;
}
- 基于flex的解决方案：
.parent{
display: flex;
background-color: beige;
}
.content{
margin: auto; /*自动相对于父元素水平垂直居中*/
background-color: aqua;
}
3. 强制换行和强制不换行
（1）强制不换行
white-space:nowrap;
（2）中英文自动换行
注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
span{
display: block; /** 将行内元素设置为块级元素 **/
word-wrap: break-word;
white-space: normal;
word-break: break-all; /**英文单字强制换行**/
}
4. 选取第 n 个标签元素
-
first-child first-child表示选择列表中的第一个标签。 -
last-child last-child表示选择列表中的最后一个标签 -
nth-child(3)表示选择列表中的第 3 个标签 -
nth-child(2n)这个表示选择列表中的偶数标签 -
nth-child(2n-1)这个表示选择列表中的奇数标签 -
nth-child(n+3)这个表示选择列表中的标签从第 3 个开始到最后。 -
nth-child(-n+3)这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。 -
nth-last-child(3)这个表示选择列表中的倒数第 3 个标签。
使用方法：
li:first-child{}
5. 去除a标签下划线
a {
text-decoration: none;
}
6. 去除li标签前面小黑点
li {
list-style: none;
}
7. 设置圆框边角
（1）设置成圆形
border-radius：50%；
（2）设置某一个角：（左上角）
border-top-left-radius:50%;
四、Flex 布局
详见 Flex 布局语法教程
1.容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
五、像素
px
像素，pixel的缩写。
作用：px设置固定的布局或者元素大小
rpx
rpx (responsive pixel)
微信小程序解决自适应屏幕尺寸的尺寸单位
微信小程序规定屏幕的宽度为750rpx。
解释：将屏幕的宽度分为750份，1份就是1 rpx
em
参考物：父元素的font-size
如果自身定义了font-size，按自身计算。整个页面内1 em不是固定的值。
特点：
1.em的值不是固定的
2.em继承父级元素的字体大小
rem
参照物：根元素html
只需在根元素确定参考值，可以设计HTML为大小为10px，则设置1.2rem表示12px。
优点:只需设置根目录的大小就可以将整个页面成比例的调好。
%
一般来说，相对于父元素
普通定位元素就是相对于父元素
position: absolute的元素相对于已定位的父元素
position: fixed的元素相对于Viewport（视口）。
vw
CSS3新单位
Viewport Width的简写，指可视窗口的宽度。
视口的宽度为1200px的话，100vw等于1200px，10vw等于120ox，以此类推
假设，浏览器宽度为1200px，1vw = 1200px / 100 = 12px
vh
CSS3新单位
Viewport Height的简写，指视口的高度。
视口的高度为1200px的话，100vh等于1200px，10vh等于120ox，以此类推
假设，浏览器宽度为900px，1vw = 900px / 100 = 9px
vm
CSS3新单位
相对于视口的宽度或高度较小的那个。
其中最小的那个被均分100份的大小就是1 vm
假设，浏览器高度为800px，宽度为1000px，则1vm = min(800, 1000)px / 100 = 8px
兼容性较差，不建议使用
补充内容
Viewport 视口
pc端，Viewport指的是浏览器的可视区域
移动端，涉及3个视口：Layout viewport（布局视口）、Visual viewport（视觉视口）、Ideal viewport（理想视口）。Viewport指的是其中的Layout Viewport。
根据CSS3规范，视口单位包括以下4个
vw: 1 vw等于视口宽度的1%vh: 1 vh等于视口高度的1%vmin: 选取vw和vh中最小的那个vmax: 选取vw和vh中最大的那个
六、CSS 绘制三角形
1. 实现一个简单的三角形
代码：
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
效果：
2.实现带边框的三角形
<div id="blue"><div>
#blue {
position:relative;
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
}
#blue:after {
content: "";
position: absolute;
top: 1px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
效果
七、滚动条
1.滚动条仿 ios
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}
2. IOS 页面滑动卡顿
body,html{
-webkit-overflow-scrolling: touch;
}
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
