CSS基础语法
一、显示模式
分为两种：块级元素和行内元素
1.1 特点
块级元素：独占一行，可以设置width和height并且生效， 如果不设置width，则默认宽度按浏览器宽度显示
行内：可以和其他行内元素在一行显示，宽高由内容撑起（使用margin和padding时垂直方向不生效）
1.2属性值
l block —— 块级元素 （独占一行，具有宽高）
l Inline —— 行内元素（可以和其他元素在同一行显示）
l inline-block —— 行内块（可以和其他元素在同一行显示，并且具有宽高）
1.3三种显示模式相互转换
l 转换成块： display:block;
l 转换成行内元素： display:inline;
l 转换成行内块：
l display:inline-block;
l float:left;
l position:absolute;
1.4行内元素有哪些
行内元素有 a , span ,img , input ， b , u , i , strong , em
注：其中img和input是行内块
二、background属性
background:背景色 背景图 平铺方式 背景图定位;
2.1各个属性写法
l 背景色 background-color（如果想单独使用背景色时，直接使用background就可以，因为background-color浏览器的识别不是很好）
l 背景图 background-image
l 平铺方式 background-repeat
l 背景图定位 background-positon
2.2 注意
background-position取值 是先左右（水平）方向，后上下（垂直）方向。
三、盒子模型
3.1 内边距padding
盒子的实际宽度 = padding + border + 实体化width；
盒子的占位宽度 = padding + border + 实体化width + margin；
3.2 外边距margin
3.2.1 两个盒子嵌套会发生外边距塌陷
l 给父级或子级别添加float：left属性
l 给父级添加overflow：hidden属性
出现环境
解决方法
1..box1{width:100px;height:100px;background:pink;border:1px solid #000;}
2.box1{width:100px;height:100px;background:pink;overflow:hidden;}
3.box1{width:100px;height:100px;background:pink;float:left;}
3.2.2 盒子水平居中margin:0 auto的条件
l 盒子必须有宽度width值
l 盒子必须是块级元素
l 必须是标准流下的盒子
3.3 行内元素对margin和padding的解析
行内标签设置的margin-top和margin-bottom，padding-top和padding-bottom都没有作用。
四、浮动
浮动是将元素变成行内块,并且半脱离标准流
4.1 注意
l 只要盒子有浮动，那么我们就给这个盒子的父级增加overflow:hidden来清除浮动（因为浮动后父级不能靠内容撑开，oververflow:hidden能强制检测处于半脱离的浮动流的元素）
l 由于浮动的元素没有行内元素、块级元素之分，所以不接受 display 进行行块转换
五、定位
5.1相对定位relative
5.2 绝对定位absolute
l 完全脱离标准流 ，不占位置（即便是父级使用oververflow:hidden也不能检测到该绝对定位元素的宽高尺寸，也就是父级照样不会被该绝对定位元素撑开）
l 绝对定位会把盒子变成行内块
5.3 盒子定位水平/垂直居中
（在定位前提下） left:50%; margin-left:盒子宽度的一半
top:50%; magin-top:盒子高度的一半
六、精灵图
l background-position
七、补充
切图 fw ps(ps切片工具 ps插件cutterman（需联网使用）)
1、选择器权重
命名多个类名
2、兼容性
3、import引入（了解）
1.语法：@import url(‘css路径’);
2.步骤：
a. 新建单独的一个css后缀文件；
b. 在head标签里面嵌入style标签
c. 将@import url(‘css路径);写入style标签里面
注意：@import url(‘css路径); 最后这个分号不能省略
现在绝大部分的网站都采用种link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML
4、严格嵌套
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素（W3C标准）
5、超出使用省略号（一行文本超出生效，多行文本存在超出不生效）
display:block/inline-block; （如果是行内元素，就要转换为块级；如果想使行内块有效果，就要给行内块加宽度）
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;（强制文本不换行）
6、表单元素不继承body里面的文字属性，需要单独设置（表单元素的默认样式跟浏览器有关）
7、可能会用到的文本属性
1、letter-spacing:10px; 文字的间距
2、text-transform:
captilize（文本中的每个单词以大写字母开头）
uppercase（仅有大写字母）
3、word-break:break-all;（文本自动换行，末尾是单词的话会截断）