day8

1.盒模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

设置边框样式（border-style）:

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

设置边框宽度（border-width）

设置边框颜色（border-color）:设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。

padding属性用于设置内边距;margin属性用于设置外边距;

对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中

盒子的宽与高

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（标记和除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

2：浮动高级

  什么是浮动：元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

如何定义浮动：

在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float ；属性值}