文本样式
- letter-spacing 设置字间距 长度
- word-spacing 设置词间距(中文无效)长度
- text-indent 设置首行缩进
- text-decoration 设置文本修饰线
- none
- underline
- overline
- line-throuth
- vertical-align 不可继承
- 实现行内块或行内元素与同行的文本如何对齐
- 设置上标字和下标字
- 设置单元格(td和th)中内容的垂直对齐方式
- beseline 基线对齐
- top
- bottom
- middle
- sub
- super
CSS常用样式
鼠标光标样式
cousor:设置鼠标的光标样式 cursor:url(…/mages/a…png),pointer
自定义鼠标样式
- pointer:小手
- move:移动图标
列表样式
- list-style-type 设置列表项图标类型 none:去掉列表项图标;
- list-style-position 设置列表项图标位置 outside:在li的外面,默认值;inside:在li的里面;
- list-style-images:自定义列表项图标;url(图片地址)
- list-style:复合属性;多个值使用空格分隔,没有顺序和数量要求;
- 列表样式只有设给ul、li、ol才会生效;
表格样式
- table-layout:设置列宽固定;auto列宽自动,默认值;fixed:列宽固定。
- border-spacing:设置单元格之间的距离,长度;
- border-collapse:设置单元格合并边框;separate:不合并,默认值;collapse:合并;
- cpation-side:标题位置;top:在上面。默认值。bottom:在下面。
- empty-cells:没有内容的单元格的显示方式;show:显示,默认值。hide:隐藏
元素默认宽高
- 行内元素:默认宽度: 被内容撑开,没有内容就没有宽度
默认高度: 被内容撑开,没有内容会有一个行文字的高度(默认21px) - 行内块元素:默认宽度: 被内容撑开,没有内容就没有宽度
默认高度: 被内容撑开,没有内容就没有高度; - 块级元素:默认宽度: 根据父元素内容宽度自动计算
默认高度: 被内容撑开,没有内容就没有高度;
解决父元素塌陷
-
父元素设置高度
-
父元素也设置浮动
-
给父元素设置 overflow:hidden(推荐)
-
在浮动元素的后面添加一个兄弟元素,该元素要求是块级元素,设置 clear:both
-
原理与方案四一致,使用伪元素选择器动态地在浮动元素的后面添加一个兄弟元素,设置 clear:both(推荐)
.clearfix::after {
content: “”;
display: block;
clear: both;
}注意:习惯添加浮动后,立即在其父元素上添加清除浮动。形成条件反射。
行内块在父元素中纵向居中
- 给父元素设置行高与父元素高度一致,给行内块元素本身设置
vertical-align:middle
行内元素或行内块元素之间的空白问题
① 元素之间的空白(左右)产生原因:代码中的换行;
解决方案:
- 代码之间不写换行(一般不用)
- 父元素设置font-size:0; 再单独给行内块元素设置font-size
② 底部的空白(图片的幽灵空白)
产生原因:行内块元素默认底部与文字基线对齐,底部空白就是基线与底线的距离
解决方案:
- 父元素设置字体大小为0
- 给行内块元素本身设置 vertical-align 值不是 baseline
- 如果是图片,可以给图片设置成块级
③ 文字内容个数不同的行内块元素水平排列无法对齐
产生原因:默认情况下,行内块元素会让里面的文字与外面文字基线对齐
① 如果有一行文字,就是该行文字与外面文字基线对齐
② 如果有多行文字,最后一行文字与外面文字基线对齐
③ 如果没有文字,自己的底部与外面文字基线对齐
解决方案:给行内块元素设置 vertical-align,值不是 baseline
设置定位元素(绝对和固定)在包含块中水平和垂直都居中
- left: 50%;
top: 50%;
marign-left: -宽度/2;
margin-top: -高度/2; - left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;