HTML与CSS前端开发精品课学习笔记
2017-03-15 本文已影响0人
hi句身
Web前端开发精品课读书笔记
[toc]
HTML与CSS进阶教程
小知识
- 最新HTML标准文档说明简化, 大小写不敏感, 属性可以不加引号,部分属性属性值可以忽略.
- div和span
- id和class的使用:选择器的使用
- 浏览器的小标题的使用:
<head>中使用<title></title><link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"的方式使用.
语义化
- 标题语义化
- 图片语义化
alt title.-
figure figcaption代替<div><img .. /><span></span></div>方式实现 图片+ 图注的方式, 更好的语义化.
-
- 表格语义化
- 表单语义化
<label for ..>表达,给相应的<input type = "checkbox" ..>, 增加标签. - 使用
fieldset和legend标签. 后者是表单组标签, 实现类似"书签"效果. - 其他标签.
<br /> <strong><em><del><ins><img>分别表达换行, 加强, 斜行,删除线,插入线,图片等方式. 其中<img>是否使用背景图片替代, 看是否要当做内容被索引, 被查找, 如果不需要, 就用背景图片.
CSS进阶
基础支持
-
单位:
px % em rem分别代表像素,百分比,相对于当前元素大小,相对于"根元素"大小-
%-
width height font-size分别对应父元素相同属性值进行计算 -
line-height百分比相对于父元素的font-size计算. -
vertical-align相对于当前元素line-height计算.
-
-
-
特性
- 继承性. 对于
<a>元素有默认特性,会影响继承产生的效果.
- 继承性. 对于
-
选择器
-
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属性设置无效. - 同级元素,底和顶叠加; 父子元素, 顶和顶,底和底叠加; 如果没有子元素或文字的元素如
<br /><hr />空元素, 会让与其接壤的所有元素发生外边距叠加.
负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`
<div ... style= "display:table-row">
<div style="display:table-cell;"> <img /><div>
<div style="display:table-cell;"><span></span></div>
</div>
- **自动平均** 划分元素
父元素: {display:table;}
子元素: {display:table-cell;}
#### 去除`inline-block`元素之间间距
语法:
父元素 {font-size:0;}
## 文本效果
- 大小写, 首行缩进,文本大小写,文本水平垂直对齐,行高,字距,词距.
### `text-indent`首行缩进
- 正常用法, 首行缩进`2em`, 高级用法设置`<h1>`元素背景元素, 相应文本设置为`text-indent:-9999px`不显示, 对搜索引擎也友好.
### `text-align`设置
- 可以设置居中,左, 右, 两端对齐等.
- 对文本, `inline inline-block`元素生效. 所以对`<img>`元素也生效. 可以对`<div display:inline-block></div` 完成设置生效.优雅办法如下
- `{text-align:center} {margin: 0 auto;}`区别. 前者生效以说,父元素中定义, 后者当前元素定义. 后者只对块元素生效.
### `line-height`设置
- 技巧1: 设置单行文字居中对齐. 方法: 设置`height line-height`值相同.
- `em %`取值,参考父元素`font-size`属性设置行号.
- 数字. **CSS唯一一个用数字无单位设置单位** 代表相对于当前元素`font-size`乘以这个数字.
### `vertical-align`定义周围元素对当前元素的定位方式. 参考行盒子. 顶线,中线,基线,底线. 4大线.
#### 取值方式
- `vertical-align:-2px`参考当前元素基线向下偏移 `2px`
- `vertical-align:50%`. 如果当前元素继承`line-height:20px`, 那么等同于`vertical-align:10px`,当前元素向上偏移`10px`
- 关键字: `top middle baseline bottom`
#### 应用技巧
- `inline inline-block`元素,**周围元素**对**当前元素**垂直对齐方式.
- 块元素, 不生效.
- `table-cell`元素生效,但是属性需要定义在**当前元素**上.
## 表单效果
### `radio checkbox`垂直方向不对齐不美观的问题
- 使用`{vertical-align:-2px}`等方式微调, 既可达到满意效果.
### `text-area`效果
- 固定大小, 禁止拖动,浏览器兼容同样外观
{width:100px; height:80px; overflow:auto; resize:nono}
### 表单对齐
- 清除`p`浮动. `p {overflow:hidden;}`
- `form` 宽度固定. 左栏固定宽度和若干右栏. 左栏`text-align:right`右对齐
- 右栏所有盒子长度相等.
- 左栏+右栏所有盒子长度 = 行宽
## 浮动布局
### 浮动会让元素变成`block`元素, 可以定义`width height margin padding`属性了. 会脱离正常文档流, 后续的元素会不缺. 例如`<img>`元素右边部分会让后续的文字填充出来.
### 浮动影响
- 对自身影响. 转换成块元素`block` 同上.
- 对父元素影响. 如果父元素没有高度或高度不够, 会造成塌陷. 解决问题: 定义高度大于子元素, 或者也定位为浮动. 或清除浮动.
- 对兄弟元素影响. 都是浮动就一起浮动. 如果不是就会脱离文档流, 而覆盖后续元素占据的位置
- 对子元素影响. 自适应包裹子元素.
### 清除浮动 避免浮动影响,如覆盖
- `clear:both` 对浮动元素后续元素应用, 譬如增加一个空`<div>`元素
- `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括起来`<div style="overflow:hidden">B?</div>`创建一个BFC, 避免外边距叠加.
- 父元素塌陷一样的问题. 给父元素增加`overflow:hidden`之后让子元素在一个BFC内了,高度就会参考浮动元素而进行计算.
- 自适应两栏布局, 清除浮动. `#content{overflow:hidden}`同样让环绕在图片周围的文字,自己创立BFC, 从而实现两栏布局而不是环绕布局.
