Box model :( focus)
- Box model (CSS box model) specifies the elements of the frame processing element content, padding, borders, and other outer border style
Remember this above a picture! Be sure to remember! for sure! for sure!
Padding, borders and padding are optional attributes, the default values: 0; and many elements from the outer frame is provided by the user agent style sheets to cover the margin is set to 0 by the outer margin of an element and padding browser style
In CSS, width and height refers to the width and height of the content area; increase in margins, borders, and margins will not affect the size of the control's content area, but will increase the overall size of the frame elements;
#box {
width: 70px;
padding: 5px;
margin: 10px;
}Padding:
Elements within the margin between the border and the element content area.
padding properties: defines the border between the element content of the element blank area
receiving padding length value, a percentage value, but not negative
Margin properties within unilateral:
- padding-top: the padding
- padding-right: right inner margin
- padding-bottom: the bottom margin
- padding-left: the left margin
h1 {
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
}Of course, css also support margins designed with padding inside
h1 {
padding:10px 20px 10px 20px;<!-- 上右下左顺序 -->
}frame:
- Border element (border) is an element content and the padding one or more lines
Border and background:
Border drawn background elements above!
Border-style:
border-style property: definition of 10 different styles
none No defined borders. hidden And "none" the same. However, except when used in tables for table, hidden to solve the border conflict. dotted The definition of point-like border. It appears as a solid line in most browsers. dashed Define the dotted line. It appears as a solid line in most browsers. solid Define a solid line. double The definition of wire. A width equal to double the value of border-width. groove 3D groove defined border. The effect depends on the border-color value. ridge Define a 3D ridge-like border. The effect depends on the border-color value. inset The definition 3D inset border. The effect depends on the border-color value. outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。
如果定义无边框，就需要设置样式为：none或者outset
- 定义单边边框样式：
- border-top-style：上
- border-right-style：右
- border-bottem-style：下
- border-left-style：左
边框宽度：
- border-width属性：定义边框的宽度
- 指定长度之：px / em
- 关键字：thin、medium（默认）、thick
- 定义单边宽度（方法雷同）
边框颜色：
- border-color属性：定义边框的颜色
- 定义单边颜色（方法雷同）
总结：
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
外边距：
- margin属性：设置外边距
值复制：
p {margin: 0.5em 1em 0.5em 1em;}
等价于：
p {margin: 0.5em 1em;}如果缺少左外边距，则使用右外边距的值；以此类推
单边外边距：
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
外边距合并：
当两个垂直外边距相遇是，形成一个外边距
合并后的外边距的高度等于两个发生合并的外边的最大者
当一个元素包含另一个元素中时，它们的上/下外边距会发生合并：
CSS 定位：
- CSS定位，属于允许对元素进行定位
定位：
定位和浮动：
CSS为定位和浮动提供了一些属性，利用属性可以建立列式布局，将布局的一部分重叠。
一切皆为框
div , h1 , p等元素都属于块级元素。
定位机制：
CSS基本定位机制：普通流，浮动和绝对定位
除非专门单独定义，否则所有框都是默认在普通流中定位
块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来的。
行内框在一行内的水平布置，使用水平内边距、边框、外边距来调整之间的间距，但是，垂直内边距、边框和外边距不影响行内框的高度，由一行形成的水平框：行框（Line Box），行框的高度总是容纳包含的所有行内框，但是可以通过设置行高（框的高度）
position属性：
- position属性：可以选择4种不同类型的定位
- static：正常生成框体，块级元素框会是一个矩形框，作为文本流的一部分，行内元素会创建一个或多个行框
- relative：元素框偏移某个距离，元素保存其定位前的形状
- absolute：元素框从文档流完全删除，相对于其包含块定位
- fixed：元素框表现类似将position设置为absolute，不过其包含块是视窗本身
- CSS 定位属性允许你对元素进行定位。
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
相对定位：relative
相对定位：对一个元素进行相对定位，通过设置垂直或水平位置，让元素相对于起点进行移动
#box {
position: relative;
left: 30px;
top: 20px;
}
如上；将top设置为20px表示框从上往下（距离上）偏移20px，将left设置为30px表示框从左往右（距离左）便宜30px。
绝对定位：absolute
绝对定位：通过设置垂直或水平位置，让元素绝对定位（以视窗左上角做起点）
#box {
position: absolute;
left: 30px;
top: 20px;
}
浮动定位：float
浮动的框可以向左/向右移动，知道外边接触到另一个框的边框停止
由于浮动框不在文档的普通流中，所以文档的普通流中的块表现的向浮动窗不存在一样。
浮动：
框1向右浮动，直到框1接触到它所在框的边缘时候才停止。
框1从右侧向左侧浮动，由于不占用文档空间，所以框1会覆盖框2
如果所有框都向左移动，那么框1接触到元素框的边框停止，另外两个框接触到前一个框的边框，停止浮动。
如果元素框大小无法接受三个浮动框的大小，就会向下移动……
float属性：
- float属性实现元素的浮动
行框和清理：
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框
因此，创建浮动框可以使文本围绕图像：
clear属性：
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | Left and right sides are not allowed to float. |
| none | Defaults. Allowing the floating element appear on both sides. |
| inherit | Clear provisions should inherit the property value from the parent element. |