14、盒子模型

边框【border】

作用：环绕在标签宽和高的线条

border-width 边宽的粗细 取值 PX

border-color 边框的颜色 取值 跟颜色取值一样

border-style 边框的样式 取值 solid实线 dotted点线 dashed虚线 double双线

注意：属性设置一个值 代表这个值作用于4个边

属性设置两个值 第一个值代表上下边 第二个值代表左右边

属性设置三个值 第一个值代表上边 第二个值代表左右边 第三个值代表下边

属性设置四个值 第一个值代表上边 第二个值代表右边 第三个值代表下边 第四个值代表左边

边框的简写：1.同时设置4条边的简写

border:边框的粗细 边框的样式 边框的颜色;

2.单独设置4条边的简写

border-方向【top bottom left right】:边框的粗细 边框的样式 边框的颜色;

什么是内边距？

边框与内容的距离

格式：padding:Npx；

注意：1padding设置1 2 3 4个值的作用方式与border设置1 2 3 4个值得作用方式是一样的

2单独设置padding 格式：padding-方向：Npx;

3给标签设置内边距的时候，标签占有的宽度和高度会发生变化

什么是外边距？

标签与标签的距离

格式：margin:Npx;

注意：1margin设置1 2 3 4个值的作用方式与border设置1 2 3 4个值得作用方式是一样的

2单独设置margin 格式：margin-方向：Npx;

4.margin{0px auto}可以实现容器的居中

text-aling可以实现文字内容的居中

5.给子容器设置上边距 父容器也会跟着下来 给父容器添加边框可解决

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离

盒子模型

1.内容的宽度和高度

通过标签的width/height属性设置的宽和高 或者是其内容本身的宽和高

2.元素的宽度和高度

宽度=左边框+左内边距+内容宽度+右内边距+右边框

高度=同理

3.元素空间的宽度和高度

宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

高度=同理

开发经验

*{

margin:0px;

padding:0px

}

开发中选用这个

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}

box-sizing[css3中新增的]

作用：在保证给盒子添加padding/margin/border之后 盒子元素的宽高保持不变

格式：box-sizing:border-box;

注意：谁添加了padding/margin/border之后 给谁加