长宽:
width
heigth
字体属性
font-family
font-size
font-weigth
背景
背景颜色
背景图片
如果背景图片尺寸小于所在的区域尺寸那么默认情况下
是铺满整个区域
可以通过指定参数来控制是否铺满
no-repeat
repeat-x
repeat-y
center center
15px 20px
backgroud:背景颜色 背景图片 是否铺满 位置
文字属性
text-align:center;
text-decoration:none; 主要就是用于去除a标签自带的下划线
text-indent:48px; 用于首行缩进
ul {list-style-type:none}
边框
border-style
border-size
border-color
border:3px solid red;
border-left:3px solid red;
border-top:3px solid red;
border-right:3px solid red;
border-bottom:3px solid red;
display
div {display:none} 不显示不占位
inline
block
inline-block 让行内标签也能设置长宽
画圆
div {border-radius:50%;}
盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)
浮动
只要是页面布局 都会用到浮动
浮动带来的影响:
脱离文档流，造成父标签塌陷
定位
相对定位:相对于标签本身原来的位置
绝对定位:相对于已经定位过的父标签(小米购物车)
固定定位:相对于浏览器窗口固定在某一个位置(回到顶部)
是否脱离文档流:
脱离文档流:
1.浮动
2.绝对定位
3.固定定位
不脱离文档流:
1.相对定位