CSS
一、文本处理
(1)font- 文字样式
font-size 文字大小
font-family 字体
font-weight 加粗 bold/normal/value
font-style 斜体 normal/italic
font-variant 小型大写字母 small-caps
(2)text- 文本格式
color 文字颜色
text-align 水平对齐 内容的水平对齐方式
text-indent 首行缩进
text-decoration 文字修饰 none/underline
(3)line-height 行高
多行文本:行高可以设置行间距
单行文本:当行高等于容器高时,文字垂直居中
(4)text-shadow 文本阴影
text-shadow:h-shadow v-shadow blur color
(5)white-space文本溢出:
white-space nowrap/normal
(6)text-overflow
当文字水平方向有溢出,且overflow为hidden时
clip:隐藏溢出内容;
ellipsis:在句子末尾加...
(7)word-wrap长单词换行:
word-wrap: normal/break-word
word-break:break-all/keep-all/normal
二、表格样式:
(1)通用样式: width height border padding ……
vertical-align 垂直对齐
(2)专用样式:
border-collapse 边框合并 collapse/separate
border-spacing 单元格边框间距
table-layout fixed表示固定布局,宽度不再变化
caption-side 表头位置 top/bottom
三.框模型(一切皆为框)
width、height(内联元素没有宽高)
border
padding 内边距 会撑开框
0、正值
margin 外边距 框与框之间的距离
0、正值、负值、auto
左右margin为auto,框居中对齐
当上下margin相遇时,取较大值
四、背景属性:
background-color 背景色
可取值范围为所有合法的颜色值。可为transparent
background-image 背景图
定义背景图像的路径。可以为none
background-repeat 背景图重复
repeat(默认)、no-repeat、repeat-x、repeat-y
background-attachment 背景固定
fixed 背景图不随着内容一起滚动
background-position 背景偏移
background-position:x-position y-position;
x可取值:left、right、center、正值、负值
正值背景图向右移动,负值背景图向左移动
y可取值:top、bottom、center、正值、负值
正值背景图向下移动,负值背景图向上移动
CSS sprites CSS精灵
* background-size 背景图尺寸
* background-clip 背景颜色的绘制区域
可取值:border-box padding-box content-box
* background-origin 背景图绘制区域
可取值:border-box padding-box content-box
背景属性可简写:
background:url(images/welcome.png) no-repeat
fixed -40px -15px #ff0;
background:image repeat attachment position color;
五、渐变:颜色发生平滑的过渡效果
线性、径向、重复
background-image:linear-gradient(90deg,red 10%,black 15%,green 40%)
radial-gradient(size at position,color1,color2,...)
200px at left top
repeating-linear-gradient(90deg,red 0%,black 5%,green 10%)
repeating-radial-gradient
六、浮动
元素默认情况下是普通流定位:
块元素独占一行,从上到下排列
行内元素在同一行里从左到右排列。
(1)float:left/right
元素会在父容器的范围内浮动,left已浮动元素会从左到右依次排列;right已浮动元素会从右向左依次排列
(2)clear:清除浮动影响。定义元素的哪一侧没有浮动元素
clear:left/right/both
(3)overflow:hidden
父元素内的子元素如果浮动,父元素会没有高度。
加了overflow:hidden之后,父元素就可以自适应高度了。
七、display 显示方式
none 不显示
block 显示为块元素
inline 显示为行内元素
inline-block 行内块
可以让块元素与行内元素互相转换。
八、 visibility 可见性
hidden/visible
九、 opacity 半透明
取值范围:0-1
十、列表
list-style- ……
type 列表编号样式
image 用图片代替列表编号
position 列表编号位置
list-style: image position 简写。
常用:list-style:none;
十一、vertical-align
1、middle 元素垂直居中
2、top和bottom可能与想象中不同,以实际效果为准
行内块设置margin-top会影响到整行
十二、定位:
(1)static 默认普通流定位
(2)relative 相对定位。
只定义relative,元素不会发生改变
用left/right/top/bottom可以让元素相对于原来的位置偏移
(3)absolute 绝对定位
绝对定位的元素会跳出普通流,内容会与其它元素重叠。
定义偏移时,绝对定位的元素是相对已定位的父元素发生偏移。如果父元素未定位,会向上找上一级父元素。如果没有已定位的父元素,相对于body偏移。
(4)fixed 固定定位
元素相对于浏览器框进行定位,页面滚动时,框的位置固定不变
(5) z-index 元素上下层叠顺序
z-index可以为负值,也可以为正值。
只有已定位的元素才能使用z-index调整层叠顺序
z-index越大,元素越靠上。