CSS基础知识第三篇
CSS基础知识
- 盒子模型
- 看透网页布局的本质
- 概念
- 盒子边框
- 内边距
- 外边距
- 块级盒子水平居中
- 文字居中和盒子居中区别
- 清除元素的默认内外边距
- 外边距合并
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的合并
- 盒子模型布局稳定性
- 浮动
- CSS 布局的三种机制
- 普通流（标准流）
- 浮动
- 定位
- 为什么需要浮动
- 什么是浮动
- 概念
- 作用
- 语法
- 特点
- 浮动的应用
- 浮动的扩展
- 清除浮动
- 为什么要清除浮动
- 清除浮动本质
- 清除浮动的方法
- 语法
- 额外标签法
- 父级添加overflow属性方法
- 使用after伪元素清除浮动
- 使用双伪元素清除浮动
- Photoshop切图
- PS切片工具
- 切图插件
盒子模型
看透网页布局的本质
首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。
概念
盒子模型由元素的内容边框border内边距padding和外边距margin组成
盒子里面的文字和图片等元素是内容区域，盒子的厚度我们称为盒子的边框
盒子内容与边框的距离是内边距，盒子与盒子之间的距离是外边距
盒子边框
语法
border:border-width粗细|border-style样式|border-color颜色
边框综合设置
border: 1px solid red; 没有顺序
表格的细线边框
cellspacing=“0” ,将单元格与单元格之间的距离设置为0
border-collapse:collapse; 表示相邻边框合并在一起
内边距
padding属性用于设置内边距，是指边框与内容之间的距离
属性
padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距
简写
2个值 padding: 上下内边距 左右内边距 ；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；
内盒尺寸计算（元素实际大小）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
外边距
margin属性用于设置外边距。margin控制盒子和盒子之间的距离，属性和简写与padding相同
块级盒子水平居中
盒子必须指定宽度（width）然后就给左右的外边距都设置为auto
文字居中和盒子居中区别
盒子内的文字水平居中是text-align:center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
清除元素的默认内外边距
代码
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意
行内元素为了兼容性， 尽量只设置左右内外边距， 不设置上下内外边距
外边距合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
解决方案
尽量给只给一个盒子添加margin值
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
解决方案
可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden
盒子模型布局稳定性
按照优先使用宽度（width）内边距（padding）外边距（margin）
原因
margin有外边距合并还有ie6下面margin加倍的bug所以最后使用
padding会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法高度剩余法来做
浮动
CSS 布局的三种机制
普通流（标准流）
块级元素会独占一行，从上向下顺序排列
行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行
浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
定位
将盒子定在浏览器的某一个位置
为什么需要浮动
因为行内块元素可以实现多个元素一行显示但中间会有空白缝隙
因为行内块元素不能实现盒子左右对齐
什么是浮动
概念
元素的浮动是指设置了浮动属性的元素
会脱离标准普通流的控制并可以移动到指定位置
作用
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
浮动最早是用来控制图片，实现文字环绕图片的效果
可以实现盒子的左右对齐等等
语法
选择器 { float: 属性值; }
属性值
none（元素不浮动（默认））left（元素左浮动）right（右浮动）
特点
浮
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏
加了浮动的盒子不占位置，它原来的位置漏给了标准流的盒子
特
浮动元素改变display属性， 类似转换成行内块元素，但是元素之间没有空白缝隙
浮动的应用
浮动和标准流的父盒子搭配
实际的导航栏中不直接用链接a而是用li包含链接(li+a)
li+a语义更清晰
直接用a搜索引擎容易辨别为有堆砌关键字嫌疑而影响网站排名
浮动的扩展
浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动元素与兄弟盒子的关系
在一个同一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
在一个同一个父级盒子中，如果前一个兄弟盒子是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
清除浮动
为什么要清除浮动
浮动元素不占用原文档流的位置，会对后面的元素排版产生影响
清除浮动本质
父级元素因为子级浮动导致内部高度为0，清除浮动后，父级会根据浮动的子盒子检测高度，父级有高度就不会影响下面的标准流
清除浮动的方法
语法
选择器{clear:属性值;} clear 清除
属性值
left清除左浮动right清除右浮动both同时清除左右浮动
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如，或则其他标签br等亦可
优缺点
通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差
父级添加overflow属性方法
可以给父级添加：overflow为hidden|auto|scroll都可以实现
优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，.clearfix:after { content: ""; display: block; height: 0; clear: both;visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优缺点
符合闭合浮动思想结构语义化正确，但是由于IE6-7不支持:after，使用zoom:1触发hasLayout
使用双伪元素清除浮动
方法
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优缺点
代码更简洁，但由于IE6-7不支持:after使用zoom:1触发hasLayout
Photoshop切图
PS切片工具
用切片选中图片
利用切片工具手动划出，图层菜单—新建基于图层的切片，利用辅助线 来切图–基于参考线的切片
导出切片
文件菜单–存储为web设备所用格式–选择我们要的图片格式–点存储–选中的切片
切图插件
Cutterman是photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工挨个切图的繁琐流程
官网
http://www.cutterman.cn/zh/cutterman
cutterman插件要求你的ps 必须是完整版，不能是绿色版