CSS基础笔记
1.常用属性
line-height 设置行高为容器高度，可以让文本垂直居中 text-align:center; 文本水平居中 !important 权重
display:inline 行盒 display:block 块盒 border-style:solid 盒子实线边框
padding:bottom 盒子到内容底部距离 margin:bottom 盒子到盒子距离
box-sizing:border-box 盒子宽高固定，设置内边距边框盒子不会变大
overflow:hidden；腻出隐藏 white-space:nowrap；文字腻出不换行
text-overflow:ellipsis; 文本腻出圆点代替 display:none 移除
visibility:hidden 视觉上消失，还占据位置
-
行盒特点：设置宽高无效，内边距、外边距、边框水平有效，垂直只会影响背景，不会占据实际空间，高度只能由行高、字体大小设置。
-
行块盒 ：display:inline-block
特点：不独占一行，盒模型所有尺寸都有效
2.常规流
- 常规流、文档流、普通文档流、常规文档流
- 所有元素、默认情况下、都属于常规流布局
- 总体规则:块盒独占一行，行盒水平依次排列
- 包含块：每个盒子都有它的包含快，包含快绝定盒子活动范围。
- 在常规流中，水平方向auto
- 块盒子在其包含快中居中，可以定宽，然后左右margin设置auto.
若宽度、边框、内边距、外边距、计算后仍然有剩余空间，该剩余空间被margin-right全部吸收。width吸收能力强于margin.
- 块盒子在其包含快中居中，可以定宽，然后左右margin设置auto.
- 常规流垂直方向auto值
- height:auto 适应内容高度
- margin:auto 表示0
- 上下外边距合并
- 两个常规流块盒子，上下外边距相邻，会进行合并
3.浮动
修改float属性值为：
- left: 左浮动，元素靠上靠左
- right:右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后，元素必定为块盒（更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素内容盒
- 宽度为auto 适应内容宽度，高度auto适应内容高度，margin为auto为0
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 浮动盒子在包含块中排列时，会避开常规流盒子
- 常规流盒子排列时，会无视浮动盒子
- 行盒子排列时，会避开浮动盒子
4.清除浮动
clear:both 可以让一个盒子添加到浮动盒子下方，从而撑开父盒子 .父盒子::after {content:'';display:block;clear:both}
5.定位position属性
-
默认值：static，静态定位（不定位）
-
relative 相对定位
-
absolute 绝对定位，自动变为块盒
-
fixed 固定定位，自动变为块盒
定位会脱离文档流（相对定位除外）
只要改了position属性就是定位元素
脱离了文档流会：
- 文档流中的摆放时，会忽略脱离了文档流元素
- 文档流中元素计算高度时，会忽略脱离文档流元素
6.相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
可以通过四个css属性进行位置设置：
- left
- right
- top
- bottom
7.绝对定位
- 宽高为auto,适应内容
- 包含快变化：找祖先中第一个定位元素，该元素的填充盒为其包含快
####### 固定定位
其他情况和绝对定位完全一样
包含块不同：固定视口（浏览器视口）跟浏览器广告效果一样
8.定位下的居中
- 定宽高
- 将左右（上下）距离设置0
- 将左右（上下）margin 为auto
- 绝对定位和固定定位会自动吸收剩余空间，跟文档流不同是，垂直也可以实现居中
9.多个定位元素重叠时
设置z-index,通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖
PS：定位和浮动同时出现，浮动会强制变为none,定位元素没有外边距合并
10.背景图
img元素属于HTML的概念
背景图属于css的概念
- 当图片属于网页内容时，必须用img元素
- 当图片仅用于美化页面时，必须用背景图
- css属性
- background-image:url('')
- background-repeat:no-repeat;
默认会重复，no-repeat不让他重复 - background-position
预设值：left、bottom、right、top、center
数值或者百分比 - background-size:
预设值：contain(预设值，让图片原样显示)、cover（让图片撑满，比例不变）
数值或者百分比 - background-attachment：fixed
通常用它控制背景图固定 - 背景图可以背景颜色混用，用背景颜色填充
注意：简写顺序同上123456
