CSS box model-border & inner and outer margins & default style

Date: 2020-10-03

Author: 19th WY

Tags: CSS box model, border settings, inner and outer margin settings

One, the box model

1. The size of the box

• Use width to set the width of the box content area
• Use height to set the height of the content area of ​​the box
• Width and height only set the size of the content area of ​​the box, not the entire size of the box
• The size of the visible frame of the box is determined by the content area, inner margin and border

.box1{
    
    
	 width:100px;
	 height:100px;
	 /*设置背景颜色*/
	 background-color: #bfa;
}

2. Set borders for elements

• To set a border for an element, three styles must be specified

  border-width:边框的宽度
  border-color:边框的颜色
  border-style：边框的样式
  

1⃣️The width of the border

 /*设置边框的宽度*/
	border-width:100px;

• Use border-width to specify the width of the four borders separately

• If four values ​​are specified in border-width.
  Then the four values ​​will be set to the upper right, lower right, and the lower left, in a clockwise direction.

• If you specify three values:

  Then the three values ​​are set to up, left, and bottom

• If you specify two values:
  the two values ​​will be set to the top, bottom, left, and right

• If you specify a value:
  all four sides are that value
  In addition to border-width, CSS also provides border-xxx-width

• The value of xxx may be top right bottom left
  specially used to set the width of the specified side

	border-width:10px 20px 30px 40px;
	border-width:10px 20px 40px;
	border-width:10px 20px;
	border-width:10px;

2⃣️The color of the border

• Set the color of the border

• Like width, color also provides styles in four directions, and you can specify colors separately

• border-xxx-color

border-color:red;
border-color:red yellow orange green;
border-color:red yellow orange;

3⃣️Border style

• Set the style of the border

  可选值：
   none，默认值，没有边框
   solid，实线
   dotted，点状边框
   dashed，虚线
   double，双线
  

• style can also specify the border styles of the four sides respectively, the rule is the same as the width

• At the same time, it also provides four styles of border-xxx-style to set the four sides respectively

 border-style:dotted solid double dashed;

4⃣️Set the border-border

• In most browsers, the width and color of the border have default values, and the default value of the border style is none

border-width:10px;
border-color:red;
border-style:dotted;

• border:
  -The shorthand style of the border, through which you can set the style, width, and color of the four borders at the same time
  -and there is no order requirement
  -once the border is specified, the four sides can be specified at the same time, and cannot be specified separately

border:red solid 10px;
border-right:none;/*把不想要的那条边的样式去掉*/

• border-top border-right border-bottom border-left
  can set the styles of the four sides separately, the rules are the same as border, but it only takes effect on one side

Second, the inner margin

• Inner margin refers to the distance between the content area of ​​the box and the border of the box
• There are a total of four directions of padding, you can set the
  padding-top
  padding-right
  padding-bottom
  padding-left
  to set the padding in the four directions
• The inner margin will affect the size of the visible frame of the box, and the background of the element will extend to the inner margin
• The size of the box is determined by the content area, inner margin, and border
• The width of the visible box of the box = border-left-width + padding-left + width + padding-right + border-right-width;
• The height of the visible frame = border-top-width + padding-top + height + padding-bottom + border-bottom-width;

/*设置上内边距*/
padding-top:100px;
/*设置右内边距*/
padding-right:100px;

• Use padding to set the styles of four borders at the same time, the rules are the same as border-width

padding:100px 200px 300px 400px;

Three, outer margin

1⃣️General operation

• The margin refers to the distance between the current box and other boxes, it will not affect the size of the visible box, but will affect the position of the box
• The box has four outer margins:
  margin-top
  margin-right
  margin-bottom
  margin-left
• Since the elements on the page are placed on the left and top, please note that when we set the top and left margins, the position of the box itself will change

/*设置box1的上外边距，盒子上边框和其他的盒子的距离*/
margin-top: 100px;
/*左外边距*/
margin-left: 100px;
/*设置右和下外边距*/
margin-right: 100px;

2⃣️Set a negative value

• The margin can also be set to a negative value.
  If the margin is set to a negative value, the element will move in the opposite direction

margin-left: -100px;
margin-top: -100px;

3⃣️Set auto

• Margin can also be set to auto, auto is generally only set to horizontal margin
• If only specified, if the margin of the left or right margin is auto, the margin will be set to the maximum value
• If the vertical direction is set to auto, the default margin is 0
• If left and right are set to auto at the same time, the margins on both sides will be set to the same value, so that the element can be automatically centered in the parent element, so we often set the left and right margins to auto to make the child elements Center horizontally in the parent element

margin-left: auto;
margin-right: auto;

4⃣️ Shorthand attributes

• The outer margin can also use the shorthand attribute margin, which can set the outer margin in four directions at the same time, and the rules are the same as padding

margin:10px 20px 30px 40px;
margin: 0 auto;

5⃣️Overlapping of vertical margins

• Vertical margin overlap:-In
  the web page, adjacent vertical margins will overlap the margins
  -The so-called margin overlap means that the adjacent margins between sibling elements will take the maximum value instead of the sum
  Pay attention to the two premises of adjacent and vertical directions

<style type="text/css">
	.box1{
    
    
		width:100px;
		height:100px;
		background-color:red;
/*为上边的元素设置一个下外边距*/
		margin-bottom:100px;
}
	.box2{
    
    
		width:100px;
		height:100px;
		background-color: yellow;
/*为下边的元素设置一个上外边距*/
		margin-top:100px;
}
</style>
/*这两个兄弟元素相邻垂直外边距是100px，不是200px*/

• If the vertical margins of the parent and child elements are adjacent, the margins of the child elements will be set to the parent element

.box3{
    
    
	width:200px;
	height:200px;
	background-color: green;			
}
.box4{
    
    
	width:100px;
	height:100px;
	background-color:yellowgreen;
/*为下边的元素设置一个上外边距,使子元素的位置下移*/
	margin-top:100px;
}
/*4是3的子元素时，4的外边距也会给3*/

Fourth, the default style

• The browser can also have a better display effect when there is no style in the page
• So some default margin and padding are set for many elements
• And its default styles, we don’t need to use it under normal circumstances
• So we often need to remove all the default margin and padding in the browser before writing styles

/*清楚浏览器的默认样式*/
*{
    
    
	margin:0;
	padding:0;
}