前端基础笔记-CSS-03-盒子模型
盒子模型
- 基本概念
- 边框border
- 内边距padding
- 外边距margin
- 盒子模型布局的稳定性
- ps基本操作
- 综合案例
基本概念
1.网页布局的本质是根据设计图设计好盒子的大小以及摆放的位置，再将网页元素放进盒子里。
2.盒子由元素内容、边框、内边距、外边距组成。
3.边框为盒子的厚度；
内边距为元素内容与边框的距离；
外边距为盒子之间的距离。
边框border
1.基本语法border : border-width || border-style || border-color ;
border-style:
- none：没有边框（默认值）
- solid：单实线
- dashed：虚线
- dotted：点线
2.边框综合设置无固定顺序border : border-width || border-style || border-color;
3.以上设置会对上下左右四个边框都生效，需要单独设置的时候，
4.表格边框
一个普通的表格：
"en">
"UTF-8">
表格
"1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
个人信息表
编号
姓名
年龄
01
小红
12
02
小红
12
03
小兰
11
04
小明
9
"3">
这里是注释
由于设置了cellspacing="0"，即单元格之间的距离设置为0，导致单元格之间的边框重叠，使实际展现的边框比设置的cellpadding="10"要粗，这个问题可以通过设置css来解决。
内边距padding
1.分开写的情况：
2.简写：
3.当设置padding值后，发生了两件事：一是内容与边框间有了距离，即有了内边距；二是盒子变大了。
例：导航栏中文字长度不一，所以用padding撑开距离。
Document
4.盒子的实际大小=内容的宽度高度(width,height)+内边距+边框，实际设计的时候要注意这一点。
外边距margin
1.margin用于控制盒子与盒子之间的距离
2.margin的简写与padding相同。
3.实现块级盒子水平居中
必须满足两个条件：盒子必须指定宽度；左右外边距设置为auto。
4.文字居中和盒子居中的区别
盒子内的文字水平居中利用text-align:center;，垂直居中利用行高=盒子高度；
盒子水平居中利用margin:上下外边距 auto;
5.插入图片和背景图片的区别
插入图片利用
背景图片则利用background: url(img);，位置通过background-position调节。
6.清除元素的默认外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意在网页设计中，一般为了兼容性，只设置左右的内外边距。
7.外边距合并
1）上下相邻的块元素
像这样的情况，合并后的外边距会取两个外边距的较大值，也称外边距塌陷。如果要避免这种情况，那么就只设置其中一个的外边距，这样就不会有塌陷。
2）嵌套块元素
在两个嵌套的块元素中，如果父元素没有设置上内边距和边框，那么父元素的上外边距与子元素的上外边距会发生合并，依旧是取较大值。如果要避免这种情况，可以给父元素设置上内边距或边框或添加overflow:hidden
盒子模型布局的稳定性
根据稳定性，优先使用width，其次是padding，最后是margin
原因：
padding会把盒子撑开，影响盒子的实际大小；
margin可能会出现外边距合并的情况，比较麻烦。
ps基本操作
标尺ctrl+R
放大缩小ctrl+/-
利用切片工具可以测量各个元素的大小
综合案例
去掉列表的默认样式li { list-style: none; }
一个简陋的综合案例：
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
Document
