CSS 入门看这一篇就够了:)

一、元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含	常见标签
块级元素	一行只能放一个	可以直接设置宽高	父容器的100%	容器级可以包含任何标签	<h1>~<h6>、<p>、<div>、<ul>、<ol>
行内元素	一行可以放多个	不可以直接设置宽高	本身内容的宽度	容纳文本或其他行内元素	<a>、<span>
行内块元素	一行可以放多个	可以直接设置宽高	本身内容的宽度		<img />、<input />、<td>

二、CSS 三大特性

1、层叠性：相同选择器设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。

2、继承性：子标签会继承父标签里的某些样式，如文本颜色和字号。

3、优先级：当同一个元素指定多个选择器，就会有优先级的产生；选择器相同则执行层叠性，否则根据选择器权重执行。

优先级注意点：权重是由四组数字组成，但是不会有进位。(可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器)

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	无穷大

 

三、圆角边框

border-radius 属性用于设置元素的外边框圆角，语法 border-radius: length;(以length为半径画圆相切于边框两边所形成的圆角)

四个属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

 

四、阴影

1、盒子阴影：box-shadow 属性用于为盒子添加阴影。语法 box-shadow: h-shadow v-shadow blur spread color inset;

2、文字阴影：text-shadow 属性用于给文本添加阴影。语法 text-shadow: h-shadow v-shadow blur color;

h-shadow 水平阴影，v-shadow 垂直阴影，blur 模糊距离，spread 阴影尺寸，color 阴影颜色，inset 将外部阴影改为内部阴影。

 

五、浮动

设置了浮动 float 的元素最重要特性：

1、脱离标准流的控制浮动到指定位置，俗称脱标。

2、浮动的盒子不再保留原先的位置

3、浮动元素具有行内块元素特性

 

六、清除浮动

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0，就好影响下面的标准流盒子。

清除浮动的方法：额外标签法、父级 overflow: hidden、父级 after 伪元素、父级双伪元素。

 

七、定位

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	几乎不用
relative 相对定位	否(占有位置)	相对于自身位置移动	常用
absolute 绝对定位	是(不占有位置)	带有定位的父级	常用
fix 固定定位	是(不占有位置)	相对于浏览器可视窗口	常用
sticky 粘性定位	否(占用位置)	相对于浏览器可视窗口	常用

 (在使用定位布局时，可能会出现盒子重叠的情况，可使用 z-index 来控制盒子的前后顺序)

 

八、vertical-align 属性应用

CSS 的 vertical-align 属性经常用于设置图片或者表单(行内块元素)和文字垂直对齐，只对行内或行内块元素有效。

语法：vertical-align: baseline | top | middle | bottom，默认以基线对齐。

 

九、结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素 E
E:last-child	匹配父元素中最后一个 E 元素
E:nth-child(n)	匹配父元素中第 n 个子元素 E
E:first-of-type	指定类型 E 的第一个
E:last-of-type	指定类型 E 的最后一个
E:nth-of-type(n)	指定类型 E 的第 n 个

 

十、盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：content-box、border-box。

1、box-sizing: content-box 盒子大小为 width + padding + border。(默认情况)

2、box-sizing: border-box 盒子大小为 width。

 

十一、过渡属性

transition: 要过渡的属性 花费的时间 运动曲线 何时开始

 

十二、2D 转换

1、2D 移动是 2D 转换里面的一种功能，可以改变元素在页面的位置，类似定位。

语法：transform: translate(x,y); 

translate 不会影响其他元素的位置，translate 中的百分比单位是相对于自身元素的，对行内标签没得效果。

2、2D 旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法：transform: rotate(度数);

单位是 deg，角度为正时，顺时针旋转，否则逆时针旋转，默认旋转的中心点时元素中心点。

3、2D 转换中心点

语法：transform-origin: x y;

4、2D 转换之缩放

语法：transform: scale(x,y)

x,y 分别是宽高放大的倍数，也可以简写为 transform: scale(n);

可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。

 

十三、动画

 1、用 keyframes 定义动画

<!--类似于这种，可以是其他百分比例，0% 和 100% 相当于from 和 to -->
@keyframes 动画名称{
    0%{

    }
    50%{
        width: 100px;
    }
    100%{
        width: 200px;
    }
}

2、使用动画

div {
    width: 50px;
    height: 50px;
    background-color: pink;
    margin: 100px auto;
    animation-name: 动画名称;
    animation-duration: 持续时间；
}

3、动画其他属性

animation-timing-function(速度曲线)、animation-delay(延时)、animation-iteration-count(播放次数) ......

 

十四、3D 转换

1、3D 移动在 2D 移动的基础上多加了一共可以移动的方向，就是 z 轴方向。

语法：transform: translate3d(x,y,z);

2、透视 perspective

3、3D 旋转：transform: rotate3d(x,y,z,deg)

4、3D 呈现 transform-style

transform-style: preserve-3d;(默认flat，不开启 3D 立体空间)。

代码写给父级，但是影响的是子盒子。

 

十五、弹性盒 flex

flex 是 flexible Box 的缩写，采用 flex 布局的元素，称为 flex 容器，他的所有子元素自动成为容器成员，称为 flex 项目。

flex 布局就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

当我们为父盒子设为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。

1、常见父项属性：flex-direction(设置主轴的方向)、justify-content(设置主轴上的子元素排列方式)、flex-wrap(设置子元素是否换行)

align-content(设置侧轴上的子元素的排列方式，仅对多行有效)，align-items(设置侧轴上的子元素排列方式，仅用于单行)

flex-flow(复合属性，相当于同时设置了 flex-direction 和 flex-wrap)

2、常见子项属性：flex(子项目占的比例)、align-self(控制子项目自己在侧轴的排列方式)、order(子项的排列顺序)

 

十六、常见问题汇总

1、子元素设置 margin-top 后，父元素跟随下移的问题

2、外边距合并塌陷问题

浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题