HTML与CSS前端开发精品课学习笔记

Web前端开发精品课读书笔记
[toc]

HTML与CSS进阶教程

小知识

• 最新HTML标准文档说明简化, 大小写不敏感, 属性可以不加引号,部分属性属性值可以忽略.
• div和span
• id和class的使用:选择器的使用
• 浏览器的小标题的使用: 中使用 的方式使用.

语义化

• 标题语义化
• 图片语义化 alt title.
  • figure figcaption代替
    方式实现 图片+ 图注的方式, 更好的语义化.
• 表格语义化
• 表单语义化 表达,给相应的, 增加标签.
• 使用fieldset和legend标签. 后者是表单组标签, 实现类似"书签"效果.
• 其他标签.
分别表达换行, 加强, 斜行,删除线,插入线,图片等方式. 其中是否使用背景图片替代, 看是否要当做内容被索引, 被查找, 如果不需要, 就用背景图片.

CSS进阶

基础支持

• 单位: px % em rem 分别代表像素,百分比,相对于当前元素大小,相对于"根元素"大小

  • %
    • width height font-size分别对应父元素相同属性值进行计算
    • line-height百分比相对于父元素的font-size计算.
    • vertical-align相对于当前元素line-height计算.

• 特性

  • 继承性. 对于元素有默认特性,会影响继承产生的效果.

• 选择器

  • M N {} 后代选择器,包括孙子所有的后代
  • M>N {} 子代选择器,只包括儿子辈的选择器
  • M~N {} 兄弟选择器. 同级的N元素
  • M+N {} 相邻选择器. 同级的N元素

书写规范

命名规范

• 必要时采用父级class前缀法,column column-title column-content这种这方式.
• 用驼峰命名topMain,中划线法,如上.

书写规范

优先级顺序:

• 布局,文档流 display position float clear
• 自身盒子属性 width height margin boder padding overflow
• 文本描述属性 font line-height text-align text-indent vertial-align
• 装饰属性 color background-color opacity cursor
• 其他属性 content list-style quotes

注释

• 采用/* */方式, 如果不想被压缩,使用/*! 版权所有 */ 保留注释不被压缩,不然压缩CSS时就会干掉这些.

CSS Reset

• 使用* {marging:0 padding:0} 完成页面默认样式的清除,这种效率不过, 有css reset样式清除表. 不过高级设计是不清楚样式的.

CSS盒子模型

• conent内容区可以使用overflow:hidden方式来指明溢出怎么办.
• border:none对比border:0 不需要渲染,不占用内存.但是IE6 7 不支持border:none,没有旧浏览器,就不作兼容.
• padding用于有背景图的, 设置文字偏移

外边距叠加

• 只有margin-top margin-bottom之间会发生叠加,而margin-left margin-right不会
• 只有block inline-block会发生, 因为inline元素margin-top margin-bottom属性设置无效.
• 同级元素,底和顶叠加; 父子元素, 顶和顶,底和底叠加; 如果没有子元素或文字的元素如
  

  ---

  空元素, 会让与其接壤的所有元素发生外边距叠加.

负margin技术

• 普通文档流下: margin-top margin-left为负数会让自身移动去覆盖其他位置; margin-bottom margin-right为负数会让后续元素移动,覆盖原有元素
• 浮动元素:注意流动的方向即可.
• 相应技巧:
  • 图文混排,水平底部不对齐: vertical-align:text-bottom改变默认的baseline-bottom方式外, margin{0 3px -3px 0}方式也可以.
  • 自适应两列布局:
  • 垂直居中. 设置父元素position:relative, 设置子元素position:absolute;top:50%;left:50%;margin-left:width值一半的负值; margin-top:height值一半的负值 . 万能的方法,适用于block inline inline-block三种元素.
  • tab选项卡可以margin-top:-1px 消除下边框显示问题.
  • 子元素为float:left;``float:right 浮动, 而父元素没有设置高度height会导致父元素高度坍陷. 对父元素div设置overflow:hidden清除浮动,可以使高度不会坍陷.

display属性

块元素和行内元素

块元素

行内元素

• strong em s u a span代表强调,斜杠,删除线,下划线,超链接,文档内的行级元素.
• 不可包含块元素,造成无法预知的后果, 可以包括其他行元素.
• 无法定义height width高度和宽度.
• 可定义margin-left margin-right,无法定义margin-top margin-bottom.

display 改变属性

inline-block可以定义width height属性, 可以与其他行内元素在同一行, 包括img input2种.

display:none和visibility:hidden

• 前者不会占据位置,后者占据位置而不显示. 而慎用前者,因为搜索引擎会忽略.

display:table-cell

• 定义垂直和居中对齐. 对父元素设置display:table-cell,然后对父元素,子元素设置vertical-align:center垂直居中.
• 自适应的等高布局, 会自适应高度撑开并由最高的盒子决定, 等高
  ```lasso`
  
  
  

  
  

  
  

- **自动平均** 划分元素

父元素: {display:table;}
子元素: {display:table-cell;}

#### 去除`inline-block`元素之间间距
语法:

父元素 {font-size:0;}

## 文本效果
- 大小写, 首行缩进,文本大小写,文本水平垂直对齐,行高,字距,词距.
### `text-indent`首行缩进
- 正常用法, 首行缩进`2em`, 高级用法设置`
`元素背景元素, 相应文本设置为`text-indent:-9999px`不显示, 对搜索引擎也友好.

### `text-align`设置
- 可以设置居中,左, 右, 两端对齐等.
- 对文本, `inline inline-block`元素生效. 所以对``元素也生效. 可以对`

{width:100px; height:80px; overflow:auto; resize:nono}

### 表单对齐
- 清除`p`浮动. `p {overflow:hidden;}`
- `form` 宽度固定. 左栏固定宽度和若干右栏. 左栏`text-align:right`右对齐
- 右栏所有盒子长度相等.
- 左栏+右栏所有盒子长度 = 行宽

## 浮动布局
### 浮动会让元素变成`block`元素, 可以定义`width height margin padding`属性了. 会脱离正常文档流, 后续的元素会不缺. 例如``元素右边部分会让后续的文字填充出来.
### 浮动影响
- 对自身影响. 转换成块元素`block` 同上.
- 对父元素影响. 如果父元素没有高度或高度不够, 会造成塌陷. 解决问题: 定义高度大于子元素, 或者也定位为浮动. 或清除浮动.
- 对兄弟元素影响. 都是浮动就一起浮动. 如果不是就会脱离文档流, 而覆盖后续元素占据的位置
- 对子元素影响. 自适应包裹子元素.
### 清除浮动 避免浮动影响,如覆盖
- `clear:both` 对浮动元素后续元素应用, 譬如增加一个空`
`元素
- `overflow:hidden` 对父元素使用, 会导致显示不全的问题.
- `.clearfix{*zoom:1;} .clearfix::after{clear:both;content:'';display:block;height:0;visibility:hidden;}` 清楚浮动不会有问题. 

## 定位布局
- `static  relative absolute fixed`四大布局.  前二者遵循正常文档流, 后二者脱离文档流布局.
#### 重要技巧
- 对父元素,祖先元素定义`position:relative`, 然后当前元素定义`position:absolute`定位, `top bottom left right`属性来定位.
- `position:absolute`对导致元素变为`block`元素, 而且相对于往上追溯,第一个`relative absolute fixed`定位来实行定位. 
- `{z-index:1 inherit auto}` 相应堆叠顺序. 除了定位`static`时不生效, 所有布局均生效.

## CSS图形
### 三角形
- `{border-width:20px; border-style:solid; border-color:red transparent transparent transparent;}` 三角形就出来了.
- 如果需要边框的, 需要2个配合. 内三角要小1px, 具体略
### 圆角
- `border-radius:1px 1px 1px 1px`
### 圆 椭圆(略)

## 性能优化
- 四大发: 简写 工具压缩 选择器
### 简写

border: 1px solid red;
border-bottom:none; //定义另外三条,而除去这条

background:url(baidu.com) no-repeat 80px 40px . 代表定位的80 40

font:"微软雅黑" 12px/1.5em bold //font-size和line-height值之间需要加入/,这点需要注意.

color:#000 == #000000

- 结尾分号;可不留, url()引号可不留,属性为0可无单位,0.开头可省略,利用组合选择器合并,差异部分单独定义,利用继承父元素定义多个而子元素不用再定义.

### 工具压缩
- YUI等

### 选择器
- 选择器从右往左进行. 理论上,更精确的写在右边.
- 少用后代`div span`选择器, 可以多用`div>span`子选择器替代. 同样的`~ +`兄弟和相邻选择器必要时使用.

## CSS技巧
### 水平居中
- 文本, `inline inline-block`元素设置水平居中没有问题. 
- 块元素.使用`margin:0 auto`水平居中. 需要注意的是如果本身没有宽度,块元素会默认占全部, 所以有时候`width:80%`来完成显示 , 并不是全部不居中.

### 垂直居中
#### 文本垂直居中
- 单行文本: 设置`line-height height`相同
- 多行文本: `父元素{display:table-cell; vertical-align:middle;} 子元素{display:inline-block}` 把所有的文字用`span`包括起来然后使用`inline-`方式完成垂直居中
#### 元素垂直居中
- 块元素. 万能方法,使用了`position:absolute`所以会把元素都变成`block`元素, 所以其他元素如`inline inline-block table-cell`等都可以使用万能方式. 注意如果水平, 垂直居中单独可控, 去掉`left margin-left` 和 `top margin-top`单独设置即可.

父元素{display:relative}
子元素{display:absolute; top:50%; left:50%; margin-top:'height值的一半'; margin-left:'widht一半的值'}

- 行内元素

父元素{display:table-cell; vertical-align:middle;}
子元素{vertical-align:middle;}

#### CSS Sprite
- 合并小图标成一个大的图标.
- ICON Font技术. 访问阿里小图标和文字一样简单.

### BFC IFC
- 好复杂. 不严谨做法: block,inline-block创建BFC, 而table等参与BFC. 这个以后再理解.
#### 用法
- A,B两元素外边距叠加. 此时对B括起来`
B?
`创建一个BFC, 避免外边距叠加.
- 父元素塌陷一样的问题. 给父元素增加`overflow:hidden`之后让子元素在一个BFC内了,高度就会参考浮动元素而进行计算.
- 自适应两栏布局, 清除浮动. `#content{overflow:hidden}`同样让环绕在图片周围的文字,自己创立BFC, 从而实现两栏布局而不是环绕布局.