一、 什么是边框？
---边框就是环绕在标签宽度和高度周围的线条
- 边框属性的格式？
1、连写（同时设置四条边的边框）
border:边框宽度 边框样式 边框颜色； - 样式取值
--solid：实线
--dotted：点线
--dashed虚线 - 快捷键
bd+tab - 注意点：
1）连写格式中颜色可以省，省略后默认就是黑色
2）连写格式样式不能省略，省略之后就看不到边框了
3） 连写格式中宽度可以省略，省略之后黑色可以看到边框
2、连写（分别设置四条边的边框）
borde-top/right/bottom/left:边框宽度 边框样式 边框颜色； - 快捷键：
bt+tab - 连写（分别设置四条边的边框）
borde-上 右 下 左；
borde-style:上 右 下 左；
borde-color:上 右 下 左；注意点：
这三个属性的取值是按照顺时针来赋值的，也就是按照上右下左来赋值，额不是按照日常生活中的上下左右
这三个属性的取值省略时规律
--上右下左-->上右下》左边的取值和右边一样
--上右下左-->上右》左边的取值和右边一样，下和上一样
--上右下左-->上》右下左都和上一样
二、什么是内边距？
---边框和内容之间的距离就是内边距？
- 格式：
padding：上 右 下 左;
padding-top/right/left/bottom:像素; - 注意点：
1）给标签设置内边距之后，标签占有的宽度和高度会发生变化
2）内边距也会有颜色变化
三、外边距
- 什么是外边距？
--外边距就是标签与标签之间的外边距
--在·HTML中多个空格会被当做一个空格处理，回车也会被当作空格处理 - 格式：
margin:10px 10px 10px 1opx；上右下左;
margin: 10px 100px 19px；上10 右左100 下19
margin-top/right/bottom/left:像素；
---省略上等于下 左等于右 - 注意点：
1）外边距没有颜色
----外边距的合并现象？ - 产生原因：在我们垂直方向上，如果有两个相邻外边距，那么就会发生外边距合并现象。
1）水平是叠加
2）在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距大就听谁的 - 注意：外边距只会发生在垂直方向上，不会发生在水平方向上
四、盒子模型
- 什么是盒子模型？
--css盒子模型仅仅是一个比喻，HTML中所有的标签都是盒子
--就是在HTML中所有标签都可以设置
宽度/高度：指可以存放内容的区域
内边距：内容与边框的距离-填充物
边框：==手机盒子自己
外边距--盒子与盒子之间的距离 - 盒子宽度和高度
--1、内容的宽度和高度
就是通过标签的width/height属性设置的宽度和高度
--2、元素的宽度和高度
宽度=左边框+width+右内边距+右边框
高度一样
--3、元素空间的宽度和高度
宽度=左外边距+左边框+做内边距+width+右内边距+右边框+右外边距
高度一样 - 现有如下盒子模型，要求增加padding属性为25之后仍然保持元素高度为200
--若保持元素高度不变的前提下，增加内边距是减少元素高度 - 规律
1）增加了padding之后元素的宽高也会发生变化
2)如果增加了paddig之后还想保持元素的宽高，那么必须减少内容的宽高 - 现有盒子模型，要求增加border属性为20之后仍然保持元素宽度为200
- 规律
1）增加了border之后元素的宽高也会发生变化
2)如果增加了border之后还想保持元素的宽高，那么必须减少内容的宽高
4.1box-sizing属性
---CSS3新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变
---box-sizing属性是任何保证增加padding和border之后，盒子元素的宽度和高度不变
--和我们前面学习的原理一样，增加padding和border之后要想保证盒子元素的宽度和高度不变，那么就必须减少一部分内容
- 取值：
1）border-box：
元素的宽高=width/height高度；
2）content-box：
元素的宽高=边框+内边距+内容宽高
注意：如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来
如果外面的盒子不想被一起顶下来，你们可以给外面的盒子添加一个边框属性或者给加一个overflow:hidden;
如果在企业中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding 其次在考虑margin margin本质上是用于控制兄弟关系之间的间隙的
在嵌套关系的盒子中，外面可以利用margin：0 auto；的方式来让里面的盒子在外面的盒子水平居中
margin：0 auto；只对水平有效
五、盒子居中和内容居中
- text-align:center;
--设置盒子中存储的文字/图片水平居中 - margin:0 auto;盒子水平居中
--让盒子自己居中 - 清空默认边距
--为什么要清空默认边距（外边距和内边距）？
在企业开发中为了更好的控制盒子的宽度和计算盒子的宽度等等，所有在企业开发中，编写代码之前第一件事就是清空默认的边距
--如何清空？
*{
padding:0;
margin:0;
}
- 注意点：
1）通配符选择器会找到当前所有标签，所有性能不好 企业开发中可以找个网址中拷贝
--另一种
www.baidu.com---》yui css reset--》第一个找includeccdependencies有一个网址赋值粘贴即可
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin :0;
padding:0;
}
六、行高和字号
- 什么是行高？
在CSS中所有的行都有自己的行高 - 注意点：
---行高（某一行内容的高度）和盒子的高（标签的高度）不是同一个概念 - 规律
1、文字在行高中默认是垂直居中的
2、在企业开发中，我们经常将盒子的高度和行高设置一样，这样就可以保证一行文字在盒子的高度中是垂直居中的
那简而言之：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高度即可 - 格式：
line-height:像素;
两行如何在盒子居中：用padding加上box-sizing：border-nox； - 在企业开发中如果一个盒子有多行文字，那么外面就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过padding来让文字居中
- 注意点：
1.在企业开发中，如果一个盒子中存储的时文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以后边的内边距为基准，因为这个右边的内边距有误差
2.右边内边距的误差从何而来？因为右边如果放不下一个文字，那么文字就会换行显示，所以和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到文字顶部的距离，而是边框到行高的距离。
七、做网页的步骤
1）清空所有的边距
2）从外到内，从上到下的编写网页
<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">