#今日说码栏目#第十一集 盒子模型

1:文档流的概念，块元素，行内元素在文档流中的特点 2:盒子模型的组成部分，可见宽的大小由哪几部分组成 3:边框，内边距，外边距的设置 4:元素在其父元素中水平方向的位置由一下几个属性共同决定 5:何为过度约束，水平布局中，可以设置auto的三个值，设置后，浏览器如何调整 6:垂直布局溢出，用什么属性解决，有什么属性值 7:兄弟元素，父子元素外边距重叠的情况 8:盒子大小，盒阴影，圆角用什么属性设置？

01、文档流

元素在文档流中的特点    块元素：            1:会独占一行            2:块元素的宽度默认是父元素的100%            3:块元素的高度默认是被内容撑开的    内联元素（行内元素）:            1:不会独占一行            2:宽度高度默认都是被内容撑开的，不能自己定义宽高         行内块元素           img           display

02、盒模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里        所以我们把所有的元素都想成盒子、矩形       /* 盒模型、盒子模型、框模型（box model）*/       /*       买个冰箱       内容区   content    冰箱       内边距   padding    泡沫       边框     border     快递盒       外边距   margin     控制盒子的位置  冰箱离你的距离   */       /* 1:内容区(content)  元素中所有的子元素和文本内容都在内容区中排列            width  设置内容区的宽度            heigth  设置内容区的高度       */       /*         2:边框（border）元素设置边框       边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部         设置边框必须指定三个样式         边框的颜色、样式、大小

03、边框

<!-- 1：border-width  默认值一般是1-3px 使用border-width可以分别指定四个边框的宽度     4个值   上  右  下  左     3个值   上  左右   下     2个值   上下   左右     1个值   上下左右 除了border-width，CSS中还提供了四个border-xxx-width   xxx的值可能是top right bottom left 专门用来设置指定边的宽度   2：border-color  设置边框的颜色  默认值是黑色 和宽度一样，color也提供四个方向的样式，可以分别指定颜色 border-xxx-color 3：border-style * 设置边框的样式 *   可选值： *     none，默认值，没有边框 *     solid 实线 *     double 双线 *    dashed [dæʃt] 虚线 *     dotted ['dɔtid] 点状边框 * style也可以分别指定四个边的边框样式，规则和width一致， *   同时它也提供border-xxx-style四个样式，来分别设置四个边 * border *   - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色 *   - 而且没有任何的顺序要求 *   - border一指定就是同时指定四个边不能分别指定 * border-top border-right border-bottom border-left *   可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效 -->

内容区的宽度和高度

width：

height：

边框元素设置

边框属于边缘，边框属于盒子内部

设置边框必须指定三个样式

边框的颜色、样式、大小

.box{

border-color: red;

border-style: solid;(设置实线，可选值可以为none、double、dotted、dashed，none那就没有边框)

border-width: 10px 10px 10px 10px;

对应的边框位置 上 右 下 左

border-width: 10px 10px 10px ;

对应的边框位置 上 左右 下

border-width: 10px 10px ;

对应的边框位置 上下 左右

border-width: 10px ;

对应的边框位置 上下左右共用一个值

(border-color和border-style也可以设置同样四个方向的值，如果不给颜色，默认是黑色)

border简写样式：

border: 颜色 样式 大小；（第二种样式的设置，颜色和样式和大小）

border-top:颜色 样式 大小；（第二种样式的设置，颜色和样式和大小）

border-right:颜色 样式 大小；（第二种样式的设置，颜色和样式和大小）

border-bottom:颜色 样式 大小；（第二种样式的设置，颜色和样式和大小）

border-left:颜色 样式 大小；（第二种样式的设置，颜色和样式和大小）

内边距：(和border语法很像几乎一样，也有简写)

内容区和边框之间的距离

padding-top: 颜色 样式 大小；

padding-right: 颜色 样式 大小；

padding-bottom:颜色 样式 大小；

padding-left: 颜色 样式 大小；

1、border-width  默认值一般是1-3px 使用border-width可以分别指定四个边框的宽度     4个值   上  右  下  左     3个值   上  左右   下     2个值   上下   左右     1个值   上下左右 除了border-width，CSS中还提供了四个border-xxx-width   xxx的值可能是top right bottom left 专门用来设置指定边的宽度   2、border-color  设置边框的颜色  默认值是黑色 和宽度一样，color也提供四个方向的样式，可以分别指定颜色 border-xxx-color 3、border-style * 设置边框的样式 *   可选值： *     none，默认值，没有边框 *     solid 实线       double 双线       dashed [dæʃt] 虚线 *     dotted ['dɔtid] 点状边框 * style也可以分别指定四个边的边框样式，规则和width一致， * 同时它也提供border-xxx-style四个样式，来分别设置四个边 * border *   - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色 *   - 而且没有任何的顺序要求 *   - border一指定就是同时指定四个边不能分别指定 * * border-top border-right border-bottom border-left *   可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

二、盒子模型

overfow可选值

overflow-y

overflow-x

visible

hidden 溢出的内容将会被

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

三、框模型(box model)

09、内联元素的盒子

行内元素的:不能设置

行内元素的垂直方向的内边距(padding)不会挤别的元素，只会折腾自己，但是水平方向会挤别的元素