一、盒模型

css将页面中所有元素设置为了一个矩形的盒子。将元素设置为矩形盒子后，对页面的布局就是将不同的盒子摆放到不同的位置。每一个盒子都由以下几部分组成： 内容区（content）内边距（padding）边框（boder）外边距（margin）内容区：content ：元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性设置。 width：设置content 宽度height：设置 content 高度边框（border）: 边框属于盒子的边缘，边框里面属于盒子的内容，边框外面属于盒子的外部。要设置边框，需要至少设置三个样式： 边框的大小会影响盒子的大小。（盒子大小=content大小+边框大小） 边框宽度（border-width）：用来指定box4个方向的宽度边框颜色(border-color）边框样式(border-style）边框属性： 边框宽度（border-width）：一般会有一个默认值。设置值说明： 同时设置4个值代表顺序：上边框、右边框、下边框、左边框同时设置3个值代表顺序：上、左右、下同时设置2个值代表顺序：上下、左右同时设置1个值代表顺序：4个边框相同宽。border-top-width、border-left-width、：用来单独指定某一个边框宽度。边框颜色(border-color）、边框样式(border-style） 规则同border-width 相同。边框样式(border-style）：  solid:实线dotted：点线dashed：虚线double：双线border 简写属性：没有顺序限制。如果只单独设置时使用（border-top、border-bottom、border-right、border-left） border： solide 10px red;padding：内容区和边框之间的距离。（内边距设置会影响到box大小，背景颜色会延伸到内边距中） padding-top、padding-bottom、padding-right、padding-leftmargin:外边距不会影响盒子的大小，会影响盒子的位置。一共四个方向的外边距“ margin-top：上外边距，设置一个正值，元素会向下移动。margin-bottom:下外边距，设置一个正值，其下面的元素会向下移动margin-right：右外边距，默认情况下，设置了也不起作用。margin-left：左外边距，设置一个正值，元素会向右移动元素在页面中是按照自左向右的顺序排列的。所以默认情况下，我们设置了左和上边距，会移动元素本身，而设置了下和右边距会移动其他元素。margin如果设置为负值，则会向相反方向移动。margin 会影响元素占用网页实际空间的大小。元素水平布局： 元素在其父元素中水平防线的位置由以下及格属性共同决定。 margin-left:border-left:width:padding-left:border-right:margin-right:一个元素在其父亲元素中，水平布局必须满足以下等式： 子元素（margin-left+border-left+width+padding-left+border-right+margin-right）= 父元素中内容区域宽度（content 的width）如果相加结果使等式不成立，则浏览器会自动调整使等式相等。 如果所有值没有auto时，则浏览器会自动调整margin-right 使等式满足。这7个值中有3个值可以设置为auto，width、margin-left 、margin-right 。 如果某个值为auto，则会自动调整设置了auto的那个值以使等式成立。width的值未设置时默认是auto。如果把width和一个外边距同时设置为auto，则宽对值会被浏览器调整为最大，设置为auto的外边距会被浏览器调整为0.如果width、margin-left 、margin-right  三个值都被设置为了auto，则外边距都是0，宽度最大。如果把两个外边距设置为auto，宽度为固定值，则浏览器会把外边距设置为相同的值。经常使用这个特点使子元素在父元素中居中。元素垂直方向布局： 默认情况下，父元素若未设置高度的话则被子元素内容撑开。子元素是在父元素的content区中排列的，如果子元素大小大于父元素，则会溢出（超出父元素），需要在父元素中使用overfloat设置子元素的溢出。对应属性： overfloat:visible   默认值，子元素会在父元素中溢出，在父元素外面显示。overfloat:hidden   溢出部分将会被减去，不会显示。overfloat:scroll   在父元素中生成两个（垂直、水平）滚动条，通过在父元素中拖动滚动条查看完整内容。overfloat:auto    根据需要在父元素中生滚动条，通过在父元素中拖动滚动条查看完整内容。overfloat-x、overfloat-y垂直外边距重叠：相邻的垂直方向的外边距会发生重叠现象。 兄弟元素： 兄弟元素的相邻垂直的外边距会取两者之间的较大值（两者都是正值）。特殊情况，如果相邻外边距一正一负，则取两者的和。特殊情况，如果相邻外边距都是负值，则取绝对值较大的。兄弟元素之间的外边距的重叠对发开有利，不需要处理。父子元素 父子元素间的相邻外边距，子元素的会传递给父元素。（上外边距）​​​​​​​父子元素外边距的重叠会影响整体布局，需要解决。（临时方案） （临时方案1）设置​​​​​​​border-top：（临时方案2）父元素中使用padding：行内元素的盒模型： ​​​​​​​行内元素不支持设置宽度和高度。行内元素可以设置padding，但是垂直方向的padding不 会影响页面的布局。行内元素可以设置border，但是垂直方向的border不 会影响页面的布局。行内元素可以设置margin，但是垂直方向的margin不 会影响页面的布局。display：用来设置元素展示的类型。 ​​​​​​​inline：将元素设置为行内元素。block：将元素设置块元素。inline-block:将元素设置为行内块。 行内块：既可以设置宽度和高度又不会独占一行。table：将元素设置为一个表格。none：元素不再页面中显示visibility： visible:默认值，元素在页面中正常显示hidden：元素在页面隐藏不限时，但是依然占据页面的位置。

二、默认样式

      通常情况下，浏览器都会为元素设置一个默认样式，若元素未设置css样式，则浏览器会使用默认样式。默认样式的存在会影响页面的布局，通常开发时需要去除掉浏览器的默认样式（pc端页面）。

简单去除方法： * { margin:0; padding 0}方法二：引入css 文件（https://meyerweb.com/eric/tools/css/reset/），清除对应元素的默认样式。 reset.css直接去除所有默认样式表。nomalize.css 统一页面中默认样式表。

三、布局练习

要让一个元素在父元素中垂直居中，只需将父元素的line-height设置和父元素的height一样的值即可。style中的css样式，最下面的比上面的优先级高。 例如： ul {font-size:15px;}  ul li{font-size:13px}  则列表item中的字体为13px

四、盒大小