CSS查漏

1.css代码风格

• 注意保留以下空格：选择器和大括号间，属性名的冒号后面

p {
	color: red;
}

2.名称带空格的字体

• 名称带空格的字体，需要用引号引起来

font-family: "Microsoft YaHei";

3.font-family一般设置为body的样式

body {
	font-family: "Microsoft YaHei";
}

4.用数字改变font-weight

• 开发中常用数字改变字体的加粗效果

可选值	效果
400	相当于normal，不加粗
700	相当于bold，加粗

5.font-style设置字体倾斜

可选值	效果
normal	默认值，不倾斜
italic	倾斜

6.font简写属性有顺序要求

• 必须遵守如下顺序

font:font-style font-weight font-size/line-height font-family;

• font-size和font-family必须写，其他可以省略

7.text-indent设置文本首行缩进

• 通常以em为单位

p {
	text-indent: 2em;
}

8.emmet语法

• 标签名*数量生成多个标签，如div*3
• 父标签>子标签生成父子结构，如ul>li
• 兄弟标签+兄弟标签生成兄弟结构，如div+span
• 标签名.类名生成带类的标签，如div.box
• 标签名#id名生成带id的标签，如div#red
• 自增符号$默认从1开始增加，如div.box$*5生成类为box1到box5的div
• {}内填写内容作为生成标签的内容，如div{我是一个div}

9.超链接伪类的样式顺序

• 需要按照link、visited、hover和active的顺序设置，否则可能不会生效

a:link {
}

a:visited {
}

a:hover {
}

a:active {
}

10.超链接样式需要单独设置

• a标签不会继承祖先元素的属性，如下列设置不会使链接文字变红

div {
	color: red;
}

<div>
	<a href="#"></a>
</div>

11.:focus伪类选择器

• 选择获取到焦点的表单项

input:focus {
	background-color: red;
}

12.文字类的元素内不能放块元素

• 如p标签、h1-h6标签，下列代码是错误的，浏览器会进行修正

<p>
	<div></div>
</p>

13.CSS三大特性

• 层叠性：相同选择器的样式冲突时，距离标签近的样式生效

div {
	color: red;
}

div {
	color: skyblue;
}

<div>我是一个div</div>

• 继承性：主要继承文字相关的属性，如text-、font-、line-、color等
• 优先级：指选择器的权重，同一个元素指定多个选择器时，哪个选择器的样式生效
• 注意选择器的优先级，防止目标样式不生效

.nav li {
	color: red;
}

.skyblue {
	color: skyblue;
}

<ul class="nav">
	<li class="skyblue"></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

.nav li的权重比.skyblue高，.skyblue的样式不生效

14.合并表格的边框

• border-collapse设置表格边框合并

table {
	border-collapse: collapse;
}

15.padding不会撑开盒子的情况

• 若未设置宽度，子元素宽度默认为父元素宽度时，设置padding后不会撑开父元素

div {
	width: 200px;
}

p {
	padding: 20px;
}

<div>
	<p></p>
</div>

16.元素水平居中的方法

• 块元素：设置width后，margin设置为0 auto

div {
	width: 200px;
	margin: 0 auto;
}

• 行内元素、行内块元素：看作文字，父元素设置text-align:center

div {
	text-align: center;
}

<div>
	<a href="#"></a>
</div>

<div>
	<img src="./images/img.jpg">
</div>

17.兄弟元素垂直外边距合并

• 上下相邻的兄弟元素，一个设置下外边距，另一个设置上外边距时，两者间的距离不是两外边距之和，而是其中的较大者

.box1 {
	margin-bottom: 100px;
}

.box2 {
	margin-top: 50px;
}

18.父子元素上外边距合并

• 父元素和子元素无距离时，当二者都有上外边距或仅子元素有上外边距时，会合并成两者间的较大者

.father {
	margin-top: 10px;
}

.son {
	margin-top: 50px;
}

19.解决上外边距合并导致父元素塌陷

• 可设置父元素的上边框

.father {
	border-top: 1px solid transparent;
}

• 可设置父元素的上内边距

.father {
	padding-top: 1px;
}

• 可设置父元素为overflow:hidden

.father {
	overflow: hidden;
}

20.行内元素不设置上下内外边距

• 行内元素设置上下的内外边距不起效果，只设置左右的内外边距

span {
	margin: 25px;
}

21.盒子阴影

• 语法

.box {
	box-shadow: h-shadow v-shadow blur spread color inset;
}

可选值	效果
h-shadow	阴影的水平位置
v-shadow	阴影的垂直位置
blur	模糊距离，即模糊的程度，单位px
spread	阴影向外伸展的尺寸，单位px
color	阴影的颜色
inset	不写为外部阴影，写后变成内部阴影

22.文字阴影

• 语法

.box {
	text-shadow: h-shadow v-shadow blur color;
}

可选值	效果
h-shadow	阴影的水平位置
v-shadow	阴影的垂直位置
blur	模糊距离，即模糊的程度，单位px
color	阴影的颜色

23.PC端网页布局的3种方式

• 标准流（普通流/文档流）：标签按默认的方式排列
• 浮动
• 定位

24.浮动搭配标准流使用

• 为避免浮动元素直接浮动到浏览器的左侧或右侧，需要为浮动元素添加一个标准流的父元素容器
• 此时，子元素的浮动以父元素为界限

.son {
	float: left;
}

<div class="father">
	<div class="son">son1</div>
	<div class="son">son2</div>
</div>

25.浮动元素只会影响其后的标准流

• box1、box3未浮动，box2浮动时，但box2不会盖住box1，因为box1在标准流中已经独占一行
  
• box1浮动、box3浮动，box2未浮动时，box3不会和box1同处一行，而是受box2的限制在box2的下方
  

26.清除浮动的策略：闭合浮动

• 即只让浮动在父元素内部起作用，不影响外部的其他盒子

27.清除浮动：额外标签法

• 在最后一个浮动元素后添加一个空的块级标签，为其设置clear:both
• 缺点是需要修改html结构

.clear {
	clear: both;
}

<div class="clear"></div>

• 空标签必须是块元素，行内元素无效

28.overflow:hidden清除浮动的缺点

• 为父元素设置overflow:hidden时，会裁剪子元素溢出的部分，使其无法显示

29.清除浮动：after伪元素

• 相当于在css样式中实现了额外标签法，.clearfix样式是为了兼容ie6、7

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	*zoom: 1;
}

30.清除浮动：双伪元素

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

31.css属性的书写顺序

1. 布局定位属性，如display、position、float等
2. 自身属性，如width、margin、background等
3. 文本属性，如font、line-height、text-decoration、color、white-space等
4. 其他属性（CSS3新增样式），如box-shadow、border-radius等

32.静态定位

• 相当于不开启定位，不脱离标准流

33.相对定位

• 相对元素自身原本的位置进行定位
• 不脱离文档流，仍占据原来的位置
  
• 用于为子元素开启绝对定位

34.绝对定位

• 脱离标准流

35.设置背景图片滚动方式

• background-attachment属性

可选值	效果
fixed	固定于视口
scroll	随滚动条滚动

36.固定定位到版心一侧

• 固定定位会使元素脱离标准流
• 以右侧为例
• 先设置left值为视口的50%，再设置margin-left为版心的50%

.box {
	position: fixed;
	left: 50%;
	margin-left: 400px
}

37.粘性定位

• 可看做相对定位和固定定位相结合，元素到达指定位置时固定不动
• 不脱离文档流，占据原有位置
• 以浏览器视口为参考
• 必须设置top、left、bottom、right其中一个才有效

.box {
	position: sticky;
	top: 50px;
}

38.绝对定位设置居中

• 开启定位后，利用margin:auto无法设置居中
• 水平居中：left值设置为50%，margin-left值设置负值，数值为自身宽度的一半
• 垂直居中：top值设置为50%，margin-top值设置负值，数值为自身高度的一半

.box {
	position: absolute;
	left: 50%;
	margin-left: -50px;
	top: 50%;
	margin-top: -50px;
}

• 此方法也适用于固定定位

39.浮动、定位盖住标准流文字的情况

• 浮动不会盖住标准流里的文字、图片，因为浮动本是为了实现文字环绕图片的效果
  
• 定位（绝对定位、固定定位）则会盖住标准流的文字、图片
  

40.CSS生成三角形

• 以左侧三角形为例

.box {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 50px solid transparent;
	border-left-color: tomato;
}

41.鼠标样式

• 通过cursor设置移入元素后鼠标的样式

可选值	效果
default	白色鼠标
pointer	手
move	移动
text	文本
not-allowed	禁止操作

a {
	cursor: not-allowed;
}

42.取消表单轮廓

• 设置outline为none

input {
	outline: none;
}

43.取消文本域拖拽

• 为防止文本域可拖拽，需要设置resize为none
  

textarea {
	resize: none;
}

44.vertical-align的用法

• 只适用于行内元素和行内块元素
• 需要给元素设置，而不是其父元素

<div>
	<img src="./img/img.jpg">
	<span>我是一个span</span>
</div>

img {
	vertical-align: middle;
}

• vertical-align默认是基线对齐，所以图片会出现下部有空白缝隙

45.文字设置省略号

• 单行文字

.box {
	white-space: nowrap;
	overflow: hidden;
	txet-overflow: ellipsis;
}

• 多行文字

.box {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /*此处设置省略号所在的行数*/
	-webkit-box-orient: vertical;
}

46.负margin值消除边框重叠变粗

ul li {
	float: left;
	margin-left: -1px;
	border: 1px solid red;
}

• 要显示被覆盖的边框，可设置鼠标移入后开启定位，或者提高z-index

ul li:hover {
	position: relative;
}

47.css生成直角三角形

• 以右侧三角形为例

.box {
	width: 0;
	height: 0;
	border-width: 40px 20px 0 0;
	border-style: solid;
	border-color: transparent tomato transparent transparent;
}

• 可制作梯形效果

i {
	position: absolute;
	right: 0;
}

48.指定中文字体时用Unicode编码

• 防止有浏览器对中文不兼容，例如下图是“宋体”二字的Unicode编码
  

49.属性选择器

• 权重和类选择器、伪类选择器相同，0.0.1.0

选择器	效果
[att]	有att属性的元素
[att=val]	att属性值为val的元素
[att^=val]	att属性值以val开头的元素
[att$=val]	att属性值以val结尾的元素
[att*=val]	att属性值包含val的元素

50.nth-child和nth-of-type区别

• section div:nth-child()，先找到nth-child，再检测是否和div匹配
• section div:nth-of-type()，先找到div，再查找nth-of-type
• 注意n是从0开始计算，如前5个表示为5-n

51.CSS滤镜

• filter属性，设置元素模糊或颜色偏移等效果，值为函数
• 以模糊为例，设置filter:blur()

img {
	filter: blur(2px);
}

52.calc函数

• 可通过计算，灵活设置元素的宽度，如比父元素小30px

.son {
	width: calc(100%-30px);
}

53.transform转换支持的3种效果

• translate（）位移、rotate（）旋转和scale（）缩放
• 注意语法格式，3种效果都属于transform属性

.box {
	transform: translate(100px,100px);
}

• 3种效果都不会影响其他元素的布局
• 可用transform设置多个效果，但要注意顺序，translate必须第一位，因为rotate旋转会改变坐标轴方向

.box {
	transform: translate() rotate() scale();
}

54.translate的特性

• 设置百分比，是相对元素自身，与定位中相对父元素不同
• 可配合定位，实现水平垂直居中

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

• translate对行内元素无效

55.rotate的特性

• 参数单位是deg，正数表示顺时针旋转，负数表示逆时针旋转

.box {
	transform: rotate(90deg);
}

56.transform-origin修改旋转点

• 默认的x和y是元素的50%

.box {
	transform-origin: x y;
}

• x和y可设置百分比、像素和left等方位词，使用像素是相对于元素的左上角

.box {
	transform-origin: 10px 10px;
}

57.scale的特性

• 设置一个参数，即可等比例缩放宽高

.box {
	transform: scale(2);
}

58.animation相关属性

可选值	效果
@keyframes	定义关键帧
animation	简写属性，不包括play-state
animation-name	动画名，必写
animation-duration	持续时间，必写
animation-timing-function	运动曲线
animation-delay	延迟
animation-iteration-count	循环次数，无限用infinite
animation-direction	下一周期运动方向，normal正向播放，alternate逆向播放
animation-fill-mode	动画结束后的位置，backwards返回原处，forwards停留终点
animation-play-state	running播放，paused暂停，通常和hover等配合使用

• 注意animation简写属性的顺序，duration必须在delay的前面

animation: name duration timing-function delay iteration-count direction fill-mode

• 可以为一个元素设置多个动画，用逗号隔开

.box {
	animation: move,fly,jump;
}

59.opacity设置元素透明度

• 其值为0~1,0是完全透明，1是不透明

.box {
	opacity:.5;
}

60.3D转换

• 常用的3D转换有translate3d和rotate3d
• 需要配合视距perspective使用，视距设置在父元素中，单位是px

body {
	perspective: 300px;
}

• translate3d的参数是x,y,z
• rotate3d的参数是x,y,z,deg，可通过xyz的组合自定义旋转轴，若只希望绕x轴旋转其他两个轴可置0

61.rotate3d的特性

• 注意deg正负对旋转方向的影响
• 可通过左手准则判断，大拇指沿坐标轴的正方向，其余手指弯曲的方向，便是deg正值旋转的方向
  

62.transform-style

• 设置子元素是否具有3D效果，默认flat不具有3D效果，preserve-3d开启3D效果
  
• 需要为父元素设置

.father {
	transform-style: preserve-3d;
}

63.浏览器私有前缀

• 解决老版本浏览器的兼容性问题

可选值	效果
-webkit-	Chrome、Safari浏览器
-moz-	Firefox浏览器
-ms-	ie浏览器
-o-	opera浏览器

.box{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

64.flex布局

• 为父元素设置display:flex,开启flex布局
• 父元素称为flex container，子元素称为flex item
• 任何元素都可开启flex布局，开启后子元素变成行内块元素

65.flex布局中父元素的属性

• flex-direction设置主轴方向，元素按主轴方向排列

可选值	效果
row	默认值，横向
row-reverse	横向反向
column	纵向
column-reverse	纵向反向

• justify-content设置元素在主轴上的排列方式

可选值	效果
flex-start	默认值，从头开始排列
flex-end	从尾部开始排列
center	在主轴中间
space-around	空白部分平均分配在元素两侧
space-between	空白只出现在元素中间

前3种方式，元素间没有空白

• flex-wrap设置元素是否换行

可选值	效果
nowrap	默认值，不换行
wrap	换行

• align-items设置单行元素在侧轴上的排列方式，注意与align-content区分

可选值	效果
flex-start	默认值，从头开始排列
flex-end	从尾部开始排列
center	在中间
stretch	拉伸，未设置高度时生效（侧轴是Y轴时）

.box {
	justify-content: center;
	align-items: center;
}

• align-content设置多行元素在侧轴上的排列方式，比justify-content多一个stretch

可选值	效果
flex-start	默认值，从头开始排列
flex-end	从尾部开始排列
center	在侧轴中间
space-around	空白部分平均分配在元素两侧
space-between	空白只出现在元素中间
stretch	拉伸，未设置高度时生效（侧轴是Y轴时）

.box {
	justify-content: flex-start;
	align-content: center;
}

• flex-flow综合了flex-direction和flex-wrap

.box {
	flex-flow: row wrap;
}

66.flex布局子元素的属性

• flex设置占用空白的份数，包括宽和高
• flex的值是整数，默认0

.box2 {
	flex: 1;
}

• align-self单独设置元素在侧轴的位置，覆盖align-items的样式，对单行有效

div:nth-child(3) {
	align-self: flex-end;
}

• order设置元素排列的顺序，默认为0，数值越小越往前

div:nth-child(2) {
	order: -1;
}

67.背景色线性渐变

• 通过linear-gradient设置，需要添加浏览器私有前缀

.box {
	background: -webkit-linear-gradient(起始位置，颜色1，颜色2...);
}

• 起始位置默认是top，可通过方位词修改，支持两个方位词

.box {
	background: -webkit-linear-gradient(top left，tomato，skyblue);
}

68.利用CSS3生成三角箭头

• 利用伪元素和旋转变换

span:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	transform: rotate(45deg);
}