高度和宽度
块级标签才可以设置宽度和高度
内联标签的宽度是由内容的长度决定
height
width
字体相关
- font-size
- font-family
- font-weight
文本相关
color
直接颜色名
十六进制 --> #00FF00
rgb 格式 --> rgb(0,255,0)
对齐方式
text-align:center --> 居中
文本装饰
text-decoration
none --> 去掉 a 标签默认的下划线
- under-line
- over-line
- line-through
首行缩进
text-indent
背景
background: url('xx.PNG' no-repeat center center)
边框
- border: 1px solid red
- display
- none
- inline
- block
- inline-block
display: none 和 visibility: hidden 的区别?
都是隐藏页面上的标签
display: none 隐藏标签并且不占位置
visibility: hidden 隐藏标签的同时会占住位置
盒子模型
内容 > 内填充 (padding)> 边框 (border)> 外边距 (margin)
浮动
浮动多用于页面大范围布局
浮动
left 往左浮动
right 往右浮动
清除浮动的副作用
clear
left 左边不能有浮动元素
right 右边不能有浮动元素
both 两边都不能有浮动元素
常用 class
- .clearfix:after {
- content: '';
- display: block;
- clear:both
- }
溢出
- overflow
- - hidden
- - scroll
- - auto
定位
相对定位: 相对 标签原来的位置 做的定位
- position: relative
- left:
- top:
- bottom:
- right:
绝对定位: 相对 已经定位过的祖先标签 做的定位
多用于页面局部的布局, 注意要和定位过的祖先标签配合使用
绝对定位和浮动一样, 标签都会脱离文档, 别的标签可以占用它的位置
固定定位
固定定位相对于 屏幕 固定显示在某个位置
固定定位的元素也是脱离文档的
z-index
属性设置元素的堆叠顺序. 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面.
Z-index 仅能在定位元素上奏效 (例如 position:absolute;)!
来源: http://www.bubuko.com/infodetail-2803308.html