HTML与CSS笔记-2

文本效果

深入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

1. 周围文字、inline元素、inline-block元素相对于被定义了vertical-align属性的元素基线垂直排列方式。
2. 适用于单元格
   • inline、inline-block元素的vertical-align是针对周围元素来说，定义的是周围元素相对于当前元素的对齐方式
   • table-cell元素的vertical-align属性是针对自身而言，定义的事内部子元素相对于自身的对齐方式
3. 允许负值和百分比值

vertical-align属性取值

1. 负值
   • vertical-align: -2px表示元素相对于基线向下偏移2px
   • 此方法常用于解决单选框、复选框、文字垂直对齐
2. 百分比
3. 关键字 top, middle, baseline, bottom

表单效果

深入radio和checkbox

默认情况下与文字是以 vertical-align: baseline 的方式对齐的

textarea

固定大小

• max-width和max-height固定
• resize: none; 禁用拖动功能

浮动

1. 元素定义了float: left/right ，都会变成block类型，可以设置width, height, padding, margin
2. 元素设置了浮动，浮动元素height大于父元素height,或是父元素没有定义height，父元素塌陷

清除浮动

1. clear: both 添加一个div，并定义clear:both，来清除浮动带来的父元素塌陷
2. overflow: hidden 在浮动元素的父元素定义
3. ::after伪元素

定位

position: absolute 会将元素转换为块元素
绝对定位元素是相对于外层第一个设置了relative, absolute, fixed的祖先元素来进行定位的

z-index

只有元素定义了relative, absolute, fixed时才会被激活

CSS图形

三角形

1. 盒子width,height设置为零.
2. 设置border-width,为三角形高。
   • 4边宽度设置与否，或是设置是否相同，影响三角形形状。
3. 需要哪个方向的三角形，就将其余三边颜色设置为透明

带边框的三角形

两个三角形定位重叠在一起

圆形

椭圆形

性能优化

1. 属性缩写
   • 盒模型缩写
     • border
     • padding
     • margin
   • 背景缩写
     • background: url( ) no-repeat 80px 40px ;
   • 字体缩写
2. 语法压缩
   • 空白符
   • 结尾分号
     • 最后一个属性的分号可以省略
   • url的引号
     • 可以省略
   • 属性值为0
     • 这个属性就可以不添加单位
   • 属性值为0开头的小数
     • 可以吧0去掉
   • 合并相同的定义
     • 文本、列表、颜色属性可以集成的，定义在父元素上，精简代码
3. 图片压缩
4. 选择器优化

匹配效率	选择器
1	id选择器
2	class选择器
3	元素选择器
4	相邻选择器
5	子选择器
6	后代选择器
7	通配符选择器
8	属性选择器
9	伪类选择器

5. CSS模块化
6. 压缩工具
   • 百度
7. CSS Sprite技术
8. 性能评估

CSS Sprite

配合background-posititon定位

Icon Font图标

使用字体文件代替图片文件，来实现小图标效果

包含块

可以决定一个元素大小和定位的元素

1. 根元素
   • HTML元素，页面最顶端的元素，没有父元素，他的包含块初始包含块。
2. 固定定位元素
   • 元素position: fixed,那他的包含块是可视窗口。
3. 静态定位元素和相对定位元素
   • 元素position: static/relative，那么他的包含块是最近的块级祖先元素创建的，祖先元素必须是block, inline-block , table-cell类型
4. 绝对定位元素
   • 元素position: absolute, 那么他的包含块是由最近的position属性不为static的祖先元素。
   • 如果找不到祖先元素position不为static的，则他的包含块是根元素