总结html+css 2019/9/8

盒模型

width
height
border : 1px solid red;
border-topborder-right
border-bottom
border-left
margin(外边距：盒子之间的距离)
margin-top
margin-right
margin-bottom
margin-left
padding(内边距：盒子边缘与内容之间的距离)
padding:10px；四个方向一样
padding:20px 10px；上下 / 左右padding: 10px 20px 30px;上 / 左右 / 下
padding: 10px 20px 30px 40px;上右下左

元素的转换（display）

display常用的属性值及含义如下：

• inline:将元素转为行内元素
• block:将元素转为块元素
• inline-block : 将元素转换成行内块元素
• none : 元素不显示

浮动(float)

• 包裹性
• 向上性
• 不重叠
  float的属性：
• left:元素向左浮动
• right:元素向右浮动
• none:元素不浮动（默认值）

定位（position）

• position : fixed;(固定定位：相对于浏览器定位)

• position : relative;(相对定位：相对于该元素自身所在的位置定位)

• position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)

• position : static;(不定位)

层叠上下文

z-index : 999;

overflow(溢出处理)

hidden（溢出隐藏）
scroll（出现滚动条）
auto（自动

透明度

background-color: rgba(0,0,255,0.5);            /* opacity: 0.5; */            /* 不透明度 */            transition: 1s;/*过渡*/