Box model
Click on the image material needs or contact me private letters, comments
In fact, CSS on three modules: a box model, float, positioning, and the rest are details. This requires three parts, the case must learn very proficient.
The so-called box model is to an HTML page element as a rectangular box, which is a container containing content. Each content element consists of a rectangular, padding (padding), the border (border) and margins (margin) composition.
Box model (Box Model)
All document elements (labels) will generate a rectangular box, we become elements box (element box), which describes the location of the size of a page layout document element and then aggregated share. Therefore, each case has its own in addition to the size and location, but also affect the size and position of the other boxes.
Box frame (border)
grammar:
border : border-width || border-style || border-color
Border properties - set the border style (border-style)
Style, border style is used to define a page frame, the attribute value is used as follows:
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
Box frame written summary table
| Set content | Style properties | Common property values |
| On the border | border-top-style: style; border-top-width: Width; border-top-color: color; border-top: width style color; | |
| Bottom border | border-bottom-style: style; border- bottom-width: the width; border- bottom-color: color; border-bottom: width style color; | |
| Left border | border-left-style: style; border-left-width: Width; border-left-color: color; border-left: width style color; | |
| Right border | border-right-style: style; border-right-width: Width; border-right-color: color; border-right: width style color; | |
| Style comprehensive set | border-style: top [on the right bottom left]; | none None (default), solid single solid lines, dashed broken line, dotted dotted lines, double double solid line |
| Comprehensive set width | border-width: the upper [lower left to the right]; | Pixel values |
| Integrated color settings | border-color: top [on the right bottom left]; | Color value (hexadecimal), rgb (r, g, b), rgb (r%, g%, b%) |
| Integrated Border Set | border: the width of the four sides of the four sides of the four sides of the color pattern; |
Form a thin line border
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
Rounded corners (CSS3)
Syntax:
border-radius: 左上角 右上角 右下角 左下角;
Padding (padding)
padding properties is used to set margins. It refers to the distance between the border and the content.
- padding-top: the padding
- padding-right: right inner margin
- padding-bottom: the bottom margin
- padding-left: the left margin
注意： 后面跟几个数值表示的意思是不一样的。
| The number of values | Expression meaning |
|---|---|
| A value | padding: top to bottom, left and right such as padding: 3px; represents three pixels are vertically and horizontally |
| 2 values | padding: top to bottom, left and right margins, such as padding: 3px 5px; 3 represents pixels 5 pixels vertically and horizontally |
| 3 values | padding: the left margin margin bottom margins such padding: 3px 5px 10px; about 3 pixel is represented by 5 pixels are 10 pixels |
| 4 value | padding: the top margin and right margin at the left padding such as padding: padding: 3px 5px 10px 15px; is represented on the right 3px 10px 5px the clockwise left 15px |
Margins (margin)
margin property is used to set margins. Set margins would create "gaps" between the elements, this usually can not be placed blank else.
- margin-top: on the margins
- margin-right: Right Margin
- margin-bottom: bottom margin
- margin-left: on the margins
- margin: Margin Right Margin on bottom margin left outside
The value of the order with the same padding.
From outside the box to achieve the middle
Allows a box to achieve the middle level, we need to meet two conditions:
- It must be block-level elements.
- Box must specify the width (width)
Then give about margins are set to Auto , can make the block-level elements centered horizontally.
Common practice in this way the page layout, the following sample code:
.header{ width:960px; margin:0 auto;}
Centered text box Pictures and background differences
- Text is horizontally centered text-align: center
- Box horizontally centered around margin changed to auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
- Products such as inserting pictures up to class we use
- Our background images are generally used for large or small icons background background image
section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
}
Clear elements inside and outside the default margins
In order to more easily control elements on the page, and the production of web pages, the following code may be used both inside and outside clearing default margin elements:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
Margin merger
Use vertical margin definition block element from the outside when the combined margins may occur.
Block elements adjacent vertical margins of the combined
When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom, has the following elements from the outer margin-top, the vertical spacing than the margin-bottom margin-top between them the sum, but the larger of the two. This phenomenon is known as adjacent block elements combined vertical margins of (also called margins collapse ).
Solution: Avoid just fine.
Nested block elements of vertical margins merge
For the nested relationship of two block elements, if not the parent element and the upper frame padding, sub-elements and the distance will be on the outside of the outer case of merger from the parent element, outside the combined distance of both relatively big, even if the parent element from the outside to 0, the merger will occur.
solution:
- You can define the border of the parent element of one pixel or padding.
- The parent element can add overflow: hidden.
width and height content
A width property width and height attributes may control the height size of the box.
Attribute value of width and height may be different units or values with respect to the percentage% of the parent element, the most common practice is the pixel value.
Most browsers, such as Firefox, IE6 and above have adopted the W3C specification, in line with norms of the CSS box model total width and total height calculation principles are:
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、**如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小**。
Box model layout stability
Preferentially used according to the width (width) secondly padding (padding) again margins (margin).
width > padding > margin
the reason:
- margin would merge margins as well as margin doubled bug ie6 below (hate) so in the end use.
- padding will affect the size of the box, we need to add or subtract computing (trouble) followed by use.
- width is no problem (Hi skin) often do we use the residual method width height residual method.
Shadow box
Syntax:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
- The first two properties are to be written. The rest may be omitted.
- Outer shadow (outset) but do not want to write default within the shadow inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
Box Model Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
width:175px;
height:230px;
background-color:#abcdef;
/* 内边距 */
padding:20px;
/* 边框：solid实线；dashed虚线；double双实线;dottdd点线 */
border:10px solid grey;
/* 右边框border-right */
/* 外边距 */
margin:50px;
/* 圆角边框:四个值依次代表左上角，右上角，右下角，左下角;正圆：border-radius:50%; */
border-radius:60px 0 60px 0;
}
</style>
</head>
<body>
<!-- 盒模型：内容+内边距+边框+外边距 -->
<div>我是一个小盒子(#^.^#)</div>
<table border="1px" align="center" color="red" width="300px" height="200px" cellspacing="0">
<tr>
<td>序号</td>
<td>姓名</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
</tr>
</table>
</body>
</html>
Inner and outer margins box model sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型内外边距</title>
<style>
* {
margin:0;
padding:0;
}
div {
width:200px;
height:200px;
background-color:#abcdef;
/* 内边距：盒子与内容的距离，弊端：会撑开盒子 */
/* 可以解决padding撑开盒子的问题：box-sizing:border-box；把内容、内边距和边框融合到宽高中了 */
/* padding后接四个值，分别是：上边、右边、下边、左边 */
padding:50px;
box-sizing:border-box;
/* 外边距：盒子与盒外其他元素的距离，用法：同padding */
/* 外边距合并：垂直的margin值，取较大值合并 */
/* 外边距塌陷：增加遮挡物，给父元素加一个padding值或border，padding:1px;，会撑开盒子，不推荐
溢出隐藏，在这里解决子元素垂直外边距塌陷的问题：给父元素加overflow:hidden;*/
margin:99px;
}
</style>
</head>
<body>
<div>
O(∩_∩)O
</div>
<div>
o(*￣︶￣*)o
</div>
</body>
</html>