Used by the block elements:
p,h1-h6,div,ul,ol,tr,li,form
Used by the inline elements:
a,span,em,i,strong,u,
Common block elements inline
input img
- Common box model properties:
- Box model has four attributes: width and height of the content, padding, margins, borders.
1.padding
-
padding four directions, four directions, describe padding.
padding-top:10px; padding-right:3px; padding-bottom:50px; padding-left:70px; -
Comprehensive property, multiple properties separated by a space.
/*上 右 下 左 四个方向*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
2.border
-
Borders box model, called the border in the stylesheet. We know it, we use the phone, the phone will have a shell. Style, color, thickness degree is this form of mobile phone shell casing. Also then, the border box model also has three elements: the thickness of the linear style color .
Click to receive free information and courses<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border的使用</title> <style type="text/css"> .box{ width: 200px; height: 200px; /*1像素实线且红色的边框*/ border: 1px solid red; } </style> </head> <body> <div class="box"></div> </body> </html>- According to the three elements of writing border
border-width:3px; border-style:solid; border-color:red; /*上面三句代码相当于一句代码：border:3px solid red;*/ /*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/ /*上下5px 左右10px*/ border-width:5px 10px; /*上：实现 右：点状 下：双线 左：虚线*/ border-style: solid dotted double dashed; /*上：红色 左右：绿色 下：黄色*/ border-color: red green yellow;- In the direction of division
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid; 相当于border:10px solid red; -
Clear default border: border: none; or border: 0; outline: none;
3.margin
-
Called from outside the box model, the style sheet called margin. He represents the distance to another cassette box. Since it is the distance between the two, it will produce a distance between the distance between the horizontal and vertical. Under the same conditions, margins have four directions, similar with padding.
Click to receive free information and courses -
Outside the horizontal distance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平方向外边距</title> <style type="text/css"> span:nth-child(1){ background-color: green; margin-right: 20px; } span:nth-child(2){ background-color: red; margin-left: 30px; } </style> </head> <body> <span class="box_l">左盒子</span><span class="box_r">右盒子</span> </body> </html> #nth-child(1)，获取span子类，参数为第1个。 -
Vertical Margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; } #box1{ background-color: red; margin-bottom: 30px; } #box2{ background-color: black; margin-top: 100px } #box3{ background-color: yellowgreen; } #box3 p{ background-color: goldenrod; margin-top: 30px; } </style> </head> <body> <!-- margin 在垂直方向上会出现外边距合并现象，塌陷。以设置的最大的magrin距离为基准--> <div id="box1"></div> <div id="box2"></div>
注意：盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“**外边距合并**”的现象。
What are the margins merge it? In some literature says a phenomenon called subsidence problem. After only in the vertical direction, the same level when the two boxes, in the vertical direction is set margin, then whichever is the greater.
Page layout, the merger will be from outside problem often occurs, how do we avoid this problem?
Quite simply, if we want the two intermediate boxes spaced vertically, in one direction only is provided to a box. No need to touch the problem margins collapse, we have to find solutions to problems, not worth the candle.