经过一周的学习，对于CSS也有了进一步的理解，其中我认为比较重要的就是盒子的概念，以下是学习盒子过程中的笔记。
盒子
一、盒子模型
一个完整的盒子有以下几部分组成
1.1、看透网页本质
网页布局过程：
先准备好网页相关元素，网页元素基本都是盒子
利用CSS设置好盒子样式，摆放到相应位置
往盒子里加内容
网页布局核心：利用CSS摆盒子
1.2、盒子模型的组成
1.3、边框（border）
border可以设置边框属性：边框宽度、边框颜色、边框样式。
语法：
边框的复合语法：
边框的每个边都可以分开写
1.4、表格的细线边框
border-collapse属性控制浏览器绘制边框的方式，控制相邻单元格边框。
语法：
注：边框会影响盒子宽度，实际宽度为盒子宽度加边框宽度
1.5、内边距(padding）
padding用于设置内边距，即边框和内容之间的距离。
语法：
padding简写：有四种
语法：
当我们指定内边距后：padding其实也影响了盒子的大小，即会撑大盒子。
若想保证盒子大小不变，则让原边长减去内边距大小即可。
如果盒子没有指定width和height，则此时padding不会撑开盒子大小
1.6、外边距
margin用于设置外边距，即控制盒子与盒子之间的距离
语法：
1.7、外边距典型应用
外边距可以让盒子水平居中，但是必须满足两个条件：
必须设置宽度（width）
盒子的左右外边距设置为auto（自动）
注：仅对于块元素
语法：
1.8、外边距合并
使用margin定义块元素的外边距时，可能会出现外边距的合并。
2.嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：
1.9、清除内外边距
网页元素很多都带有默认内外边距，而且不同浏览器默认值不同，因此在布局之前，首先要清除网页元素的内外边距。
语法：
二、圆角边框（重点）
border-radius属性用于设置元素的外边框圆角
语法：
三、盒子阴影（重点）
box-shadow属性为盒子添加阴影
语法：
四、文字阴影（了解）
使用text-shadow来设置文字阴影
语法：
浮动
1、浮动（float）
1.1、传统网页布局的三种方式
网页布局本质：用CSS来摆放盒子，把盒子放到相应位置。
布局方式：简单来说就是盒子如何进行排列顺序。
普通流（标准流）
浮动
定位
这三种方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
注：实际开发中，一个页面基本都包含了这三种布局方式，(移动端会学习新的方式）
1.1.1、普通流（标准流/文档流）
所谓标准流，就是标签按照规定好默认方式排列。
块级元素会独占一行，从上向下顺序排列
行内元素会按照顺序从左向右排列，碰到父元素边缘自动换行
之前学习的就是标准流，标准流是最基本的布局方式。
1.1.2、为什么需要浮动
1.1.3、浮动是什么
float属性用于创建浮动框，将其移到一边，直到触碰屏幕边缘或者另一个边框边缘。
语法：
1.1.4、浮动特点（重难点）
1、
2、
3、
1.1.5、浮动元素通常搭配标准流的父元素使用
即先用一个大盒子将小盒子装起来，再将小盒子浮动。
二、常见网页布局
2.1、浮动布局注意点
三、清除浮动
3.1、为什么要清除浮动
3.2、清除浮动的本质
语法：
3.3、清除浮动的方法
1、额外标签法也称为隔墙法，是W3C推荐做法
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素
3.3.1、清除浮动——额外标签法
额外标签法也称为隔墙法，是W3C推荐做法
总结：
3.3.2、清除浮动——父级添加overflow
3.3.3、清除浮动——after伪元素法
用的时候直接复制粘贴，调用就行
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
cisibility: hidden;
}
.clearfix{
*zoom: 1;
}
3.3.4、清除浮动——双伪元素清除浮动
用的时候直接复制粘贴，调用就行
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix{
*zoom:1;
}
3.3.5、清除浮动总结
四、ps切图
4.1、常见图片格式
ps有很多种切图方式：图层切图、切片切图、ps插件切图等
4.2、图层切图
4.3、切片切图
五、CSS布局
5.1、CSS属性书写顺序
5.2、页面布局整体思路
网友评论