Understanding of the box model
1. What is the box model
The box model is the cornerstone of css layout, it specifies how to display the page elements and relationships between elements. css define all the elements can have a box-like shape and a planar space.
From the periphery to the inside of the box in the box:
the contents (pictures, text, video, ... small box)
is filled inside (padding) [] corresponds to a foam box inside
the box itself (border)
margins ~
FIG:
Two. Css box model properties
Inside filling: padding properties
margins: margin property
borders: border
Three .padding property
- padding is inside the box, between the box and the content
- The padding effect: controlling the positional relationship between the parent element of the child element in the inside
- padding will stretch Box
- If you want to keep the original box size: width and height minus the basis. (If a content element is stretched, there is no set width and height, padding directly distraction. Not have to cut)
- If added to a single direction paddingpadding-top / bottom / left / right
- padding the set characteristics: padding: 30px; four weeks
padding: 10px 30px; up and down
padding: the upper left 30px 50px 10px
padding: left and right lower 10px 30px 50px 100px - padding will not affect the position of the background image
- padding can not be negative
example
Let surrounding text box and generating pitch
results in FIG.
Four .margin property
1.margin在元素外围，不会撑大元素的大小
2. 作用:控制元素与元素之间的间距。
3. 给单一方向添加marginmargin-left/right/top/bottom
4. margin设置方法：margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左 4.:
5. margin:0 auto;让当前元素在父元素里面左右居中。
6. margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会 错误放在父元素上面。
7. margin可以设置负值
例子
让两个盒子（同级的盒子）之间，产生一定距离
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: slategrey; margin-top: 30px; margin-left: 40px; margin-right: 70px; margin-bottom: 20px; margin: 100px 40px 60px 70px; float: left; } .wrap{ width:300px; height:200px; background: chartreuse; float: left; } </style></head><body> <div class="box"> 半夜 </div> <div class="wrap"> 半夜 </div></body></html>
效果如下
五.边框属性
-
a: 默认情况下边框是长在元素宽高之外。
-
b: border:10px solid blue; ( 复合式写法 )
属性拆分：
border-width: 边框大小 border-color: 边框颜色 border-style: 边框类型 （ solid 实线 dashed 虚线 dotted 点状线 double 双线 none 没有线条 ） -
c: a single direction border: border-left: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-top: 10px solid red;
-
d: border-width / color / style: Property Value: a value of: adding a border all around two values: up and down three values: a value of about 4: left upper right lower
-
e: triangular bezel Videos: transparent transparent
