CSS盒子模型布局及样式

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

 

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

关于border（边框）:
border-style:solid （边框样式：实线）dashed:虚线边框 dotted:点线边框
border-color: violet（边框颜色）
边框简写：
border:1px solid red;（没有顺序）
边框分开写法：
border-top: 1px solid #000;//只设定上边框
border-collapse: collapse;//把相邻的边框合在一起

表格边框样式实例：
 

table,
    td,
    th {
      border: 10px solid, violet;
      border-collapse: collapse;
      font-size: 14px;
      text-align: center;
    }

边框宽度会影响盒子大小

关于padding（内边距）:
有padding-top,padding-bottom,padding-left,padding-right,分别定义上下左右四个内边距

关于简写：

padding：0px,0px,0px,0px;

指定一个值时 该值指定四个边的内边距
指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
指定三个值时第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
指定四个值时分别为上 右 下 左（顺时针顺序）
内边距也会影响盒子的实际大小
若盒子本身已经有宽度和高度，使用内边距会撑大盒子
若盒子本身没有指定width/height属性，padding不会撑开盒子大小

关于margin（外边距）:
主要用于控制盒子与盒子之间的距离
也分上下左右（与padding类似）
外边距的应用：实现盒子水平居中
两个条件：
1.盒子必须指明宽度
2.盒子左右外边距都设为auto
margin : o auto;//上下外边框为0，左右是auto
行内元素或者行内块元素水平居中只需给其父元素添加： text-align: center;

嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案：
1.可为父元素定义上边框
2.可为父元素定义上内边距
3.可为父元素添加overflow:hidden

清除内外边距
网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先要清除下网页元素的内外边距
 

*{
     padding：0px;
     margin :0px;
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

tips:
去除li前面的项目符号（小圆点）：
list-style: none;

圆角有关
圆角边框：border-radious:length（数值）;
圆形边框做法：把length值设为正方形边框宽度的一半（也可设为50%）
圆角边框：把length值设为边框高度或宽度的一半（也可设为50%）

//该属性是一个简写属性，其实是四个取值（依旧是顺时针）

盒子阴影
box-shadow:
 

例如：
box-shadow: 10px 10px 10px -4px rgb(129, 95, 95);
阴影不占空间，不影响其他盒子的排列

文字阴影

text-shadow:
例如：
text-shadow: 5px 5px 6px rgb(173, 157, 157);