css盒子模型

css盒子模型

盒子模型由内容，边框（border），内边距（padding），外边距（margain）组成

边框（border）：

属性：边框粗细(border-width)，边框样式（border-style),边框颜色（border-color)

• 边框的样式

  none：没有边框（默认值）
  solid：边框为实线
  dashed：边框为虚线
  dotted：边框为点线

• 边框的综合型写法

border : border-width  border-style    border-color

例如：border-top：1px dashed pink；

内边距（padding）:

内边距指盒子内部的距离，有padding-top，padding-bottom，padding-left，padding-right

内边距简写的写法

 - padding:10px;  指4个内边距上下左右都是10
 - padding：10px  20px；   指上下内边距为10，左右为20
 - padding：10px  20px  30px； 指上边距为10，左右边距为20，下边距为30
 - padding：10px  20px  30px  40px：其次序以此为上，右，下，左，呈顺时针

另外需要注意的是padding可能会撑大盒子，所以为保证盒子确切的大小，我们需要用width和height 减去多出的padding。但当一个盒子在没有规定宽度的情况下，padding不会撑大盒子。
所以盒子的实际大小=内容的宽度，高度 + 内边距 + 边框

外边距（margain）：

外边距margain是指盒子与盒子之间的距离 或 盒子与边框之间的距离 ，其简写方式与padding一样。
此外margin可以让块级盒子居中对齐，方式有二：

 - margin:0 auto;
 - margin:auto;

当上下两个边框垂直放置并都有外边距时，其二者的距离是其两个外边距最大的那个，而不是二者相加。

嵌套块元素

当子盒子在父盒子中想要移动位置并且父类盒子不动时，解决方案：

1.给父类元素定义一个上边框   border-top:1px solid transparent;
2.给父类元素指定一个 上padding值   padding-top:1px;
3.overflow:hidden;

块级盒子水平居中：

其前提是盒子必须指定了宽度，并且左右的外边距都设置为auto

写法一 
margin-left: auto;         margin-right: auto;
写法二   margin: auto;
写法三   margin: 0 auto;

清除元素的默认内外边距

*{  margin: 0;
    padding: 0;
 }

该语块在以后的网页设计中都要写
注意：行内元素尽量只设置左右内外边距，不设置上下内边距

圆角边框（将边框设为圆形或椭圆形）

border-radius:length;
其值可以是数值或百分比

若想将一个矩形变成椭圆，只需将圆的半径设为矩形高的一半

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊程度 影子大小 阴影颜色 内/外阴影
其默认为外阴影，阴影颜色也可省略不写

例如  box-shadow: 20px 20px 50px 20px rgba(0,0,0,.1);