03.盒模型
2017-10-24 本文已影响0人
专吃小蘑菇的马里奥
盒模型：
1 盒模型概述:
- width和height 设置内容区的宽度和高度。增加内边距、边框、外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。
- 背景会铺满内容区和内边距，不会加到border上的。
- 内边距、边框、外边距默认值为0，但是用户代理（浏览器样式表）会提供自己的样式属性值，为了在不同的浏览器中表现相同，一般对部分属性进行重设。
1.1 通用选择器重设：
- 缺点：对option元素有不利的影响。
*{
vertical-align:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
outline:0;
padding:0;
margin:0;
border:0;
}
1.2 Poor Man Reset:
1.3 Siiolon's Global Reset
2 外边距叠加：
- 同级元素上下叠加： 两者相遇取其大。(无条件)
- 自己跟自己叠加： 有外边距，但是没有内边距和边框，这时候顶外边距和底外边距就碰到一起了。
- 父子元素外边距叠加： 在没有边框和内边距的前提下，两者相遇取其大。
只有普通文档流中的 块框 才会叠加，行内框、浮动框、绝对定位框之间的外边距不会叠加。
3 定位概述：
3.1 格式模型：
- css中3中定位机制：普通流、浮动、绝对定位。
3.2 行内框：
- 可以使用 水平 外边距、边框、内边距调整他们的水平间距，但在垂直方向上的属性是不影响行内框的高度的。so， 在行内框上设置显示的宽高是没有影响的 。
- 修改行内元素尺寸的唯一方法就是：修改行高和水平属性（外边距、边框、内边距）。
- 将行内元素的 display 设置为 block，可以让行内元素表现的像块元素一样。同时也能显示的设置宽高、以及垂直外边距和内边距。
3.3 块级元素：
- 块级元素能够显示的设置宽高。（p、div、h1）。
- 将块级元素的 display 设置为 inline-block，可以让块级元素像行内元素一样水平的依次排列。但是，其余行为不变，比如仍然能够显示的设置宽高、垂直外边距和内边距。
3.4 定位：
- static：无特殊定位，对象遵循HTML规则。
- absolute：将对象从文档流中拖出，使用：left、right、top、bottom进行绝对定位，通过 z-index 定义层叠属性，不具有边距，但仍有补白和边框。相对于已经定位的祖先元素进行定位。
- relative：对象不可以层叠，将依据left、right、top、bottom等属性在正常的文档流中进行偏移。相对对于本体所在左上位置进行定位。
- fixed：固定定位是绝对定位的一种，固定定位的元素在滚动时一直出现在屏幕的固定位置，比如博客评论表单的设计。（<=IE6不支持）
3.5 浮动：
- 浮动的框可以左右移动，直到它的边缘碰到包含框或者另一个浮动框的边缘。
- 1号元素浮动后，2号元素如果是块级元素，它会被1号覆盖在下面，如果是行内元素，它仍会继续使用1号元素所在位置的行，不会被1号元素覆盖。
- 阻止行框围绕浮动元素：给这些行框应用 clear 属性：left,right,both,none
3.6 浮动框旁边的行框被缩短：
- 无论是行内元素还是块级元素中的内容都会围绕浮动元素。
