文本效果
深入text-indent
text-indent: -9999px;
用于LOGO图片放在h1标签中，并让h1文字隐藏，更好的SEO。
使用display: none;能实现一样的效果。但是搜索引擎权重会丢失。
深入text-align
text-align起作用的元素
- 文字
- inline行内元素
- inline-block行内块元素
text-align: center; 和 margin: 0 auto;水平居中的区别
-
text-align: center; 不适用于block块元素，需在其父元素中定义
-
margin: 0 auto;在当前元素中定义
深入line-height
- 行高：两行文字
基线之间的距离
- 行距：上一行的
底线到下一行的顶线
- 半行距： 行距的一半
- 行框： 两行文字
半行距分割线之间的垂直距离
| 属性 |
对应线 |
| top |
顶线 |
| middle |
中线 |
| baseline |
基线 |
| bottom |
底线 |
深入vertical-align
-
周围文字、inline元素、inline-block元素相对于被定义了vertical-align属性的元素基线垂直排列方式。
- 适用于单元格
- inline、inline-block元素的vertical-align是针对
周围元素来说，定义的是周围元素相对于当前元素的对齐方式
- table-cell元素的vertical-align属性是针对
自身而言，定义的事内部子元素相对于自身的对齐方式
- 允许负值和百分比值
vertical-align属性取值
- 负值
-
vertical-align: -2px表示元素相对于基线向下偏移2px
- 此方法常用于解决单选框、复选框、文字垂直对齐
- 百分比
- 关键字
top, middle, baseline, bottom
表单效果
深入radio和checkbox
默认情况下与文字是以 vertical-align: baseline 的方式对齐的
textarea
固定大小
- max-width和max-height固定
- resize: none; 禁用拖动功能
浮动
- 元素定义了float: left/right ，都会变成block类型，可以设置width, height, padding, margin
- 元素设置了浮动，浮动元素height大于父元素height,或是父元素没有定义height，父元素塌陷
清除浮动
-
clear: both 添加一个div，并定义clear:both，来清除浮动带来的父元素塌陷
-
overflow: hidden 在浮动元素的父元素定义
-
::after伪元素
定位
position: absolute 会将元素转换为块元素
绝对定位元素是相对于外层第一个设置了relative, absolute, fixed的祖先元素来进行定位的
z-index
只有元素定义了relative, absolute, fixed时才会被激活
CSS图形
三角形
- 盒子width,height设置为零.
- 设置border-width,为三角形高。
- 4边宽度设置与否，或是设置是否相同，影响三角形形状。
- 需要哪个方向的三角形，就将其余三边颜色设置为透明
带边框的三角形
两个三角形定位重叠在一起
圆形
椭圆形
性能优化
- 属性缩写
- 盒模型缩写
- 背景缩写
- background: url( ) no-repeat 80px 40px ;
- 字体缩写
- 语法压缩
- 空白符
- 结尾分号
- url的引号
- 属性值为0
- 属性值为0开头的小数
- 合并相同的定义
- 文本、列表、颜色属性可以集成的，定义在父元素上，精简代码
- 图片压缩
- 选择器优化
| 匹配效率 |
选择器 |
| 1 |
id选择器 |
| 2 |
class选择器 |
| 3 |
元素选择器 |
| 4 |
相邻选择器 |
| 5 |
子选择器 |
| 6 |
后代选择器 |
| 7 |
通配符选择器 |
| 8 |
属性选择器 |
| 9 |
伪类选择器 |
- CSS模块化
- 压缩工具
- CSS Sprite技术
- 性能评估
CSS Sprite
配合background-posititon定位
Icon Font图标
使用字体文件代替图片文件，来实现小图标效果
包含块
可以决定一个元素大小和定位的元素
- 根元素
- HTML元素，页面最顶端的元素，没有父元素，他的包含块
初始包含块。
- 固定定位元素
- 元素position: fixed,那他的包含块是可视窗口。
- 静态定位元素和相对定位元素
- 元素position: static/relative，那么他的包含块是最近的块级祖先元素创建的，祖先元素必须是block, inline-block , table-cell类型
- 绝对定位元素
- 元素position: absolute, 那么他的包含块是由最近的position属性不为static的祖先元素。
- 如果找不到祖先元素position不为static的，则他的包含块是根元素
