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

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

HTML与CSS进阶教程

小知识

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

语义化

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

CSS进阶

基础支持

书写规范

命名规范

  • 必要时采用父级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:nonevisibility: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, 从而实现两栏布局而不是环绕布局.

你可能感兴趣的:(HTML与CSS前端开发精品课学习笔记)