4.16 盒子模型浅谈

盒子模型属性：

margin: 外边距/界

border: 边框

padding:内边距/填充

width: 内容宽度

height: 内容高度

除宽高外其他属性又分为四个方向： 上右下左！

margin属性：

margin-top

margin-right

margin-bottom

margin-left

margin 一个值上右下左
margin 二个值上下左右
margin 三个值上左右下
margin 四个值上右下左

padding属性同margin四个属性 上右下左

border属性:

border-top

border-right

border-bottom

border-top

分别添加上右下左 单条边框线

边框样式 border-style

None:默认无边框

Dotted:点线框

Dashed:虚线框

Solid:实线框

Double:两个边界

Grove:定义3D沟槽边界

Ridge：定义3D脊边界

Inset: 定义3D嵌入边框

Outset: 定义3D突出边框

box-shadow: 10px 10px 10px  10px red;
box-shadow的五个值解释

  1: x方向的偏移
  2：y方向的偏移
  3：模糊程度
  4：模糊半径
  5：阴影颜色

简单说下浮动 Float

Float:属性使元素脱离常规文档流而表现为向右或者向左浮动

小提示：

1.浮动盒子的宽度不会自动伸展，宽度以内容和 margin padding属性为准

2.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子宽度的影响

3.可以设置clear使标准流中其他盒子不受之前盒子的浮动影响

4.父级盒子中的所有盒子都才用浮动形式。若父级盒子未指定高度则父级盒子的高度为0，因为所有盒子都是浮动以脱离标准流。

解决办法增加一个标准流的盒子。

margin border padding 都会影响页面布局 contend不变
实际宽度为： 在contend的基础上加上 margin,border或padding

box-sizing: border-box;
变态盒模型 border-box 添加padding 或者 border 不会影响页面布局
只会挤压页面内容content

希望大家共同学习共同进步！