Chapter 6 Box Model

frame

border color

• border-color

Attributes	illustrate	Example
border-top-color	top border color	border-top-color:#369;
border-right-color	right border color	border-right-color:#369;
border-bottom-color	bottom border color	border-bottom-color:#fae45b;
border-left-color	left border color	border-left-color:#efcd56;
border-color	The four borders are the same color	border-color:#eeff34;
	Top and bottom border color: #369 Left and right border color: #000	border-color:#369 #000;
	Top border color: #369 Left and right border color: #000 Bottom border color: #f00	border-color:#369 #000 #f00;
	Top, right, bottom, left (clockwise) border colors: #369, #000, #f00, #00f	border-color:#369 #000 #f00 #00f;

border thickness

• border-width property
  • thin
  • medium
  • thick
  • Pixel values

/* Example (same principle as border color setting) */
border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

border style

• border-style property
  • none, hidden, dotted (dotted line), dashed (dashed line), solid (solid), double

/* Example (the same principle as above) */
border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid; 
border-style:solid ; 
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

border abbreviation

• Also set the color, thickness and style of the border (must have at least border style border-style to display)

/* Example */
border:1px solid #3a6587;
border: 1px dashed red;

Margin

• margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

/* Example (the principle of margin usage is the same as above) */
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

The magic of margins

• center page alignment

margin:0px auto;

• Necessary conditions for center alignment of web pages
  • block element
  • fixed width

padding

• padding
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
  • padding

/* Example (the principle of padding usage is the same as above) */
padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

Dimensions of the box model

• The total size of the box model = border+padding+margin + content width

box-sizing

box-sizing:content-box | border-box | inherit;

• content-box (default): height and width are only applied to the content of the element: (not counting border margins, only the content is already this big)
• border-box: height and width apply to all parts of the element: content, padding, and borders: (the border is so big when the content is added to the margin)

rounded border

border-radius:20px 10px 50px 30px;

• The four attribute values ​​are arranged clockwise

Use border-radius to make special circles

round

• gist
  • Element width and height must be the same
  • The radius of the corners is half the width of the element, or directly set the corner radius to 50%

/* Example */
/* Border type */
.cirtle {
     width: 100px;
     height: 100px;
     border: 4px solid red; 
     border-radius: 50%;
}
/* Graphical */
.cirtle {
	width: 100px;
	height: 100px;
	background: red; 
	border-radius: 50px 50px 50px 50px; /* another way of writing */
}
<div class="cirtle"></div><br/>

semicircle

• gist
  • When making the upper or lower semicircle, the width of the element is 2 times the height, and the corner radius is the height value of the element
  • When making a left or right semicircle, the height of the element is twice the width, and the corner radius is the width of the element

/* Example */
/* upper half circle */
.half-top-circle {
	width: 100px;
	height: 50px;
	background: red;
	border-radius: 50px 50px 0px 0px;
}
/* lower semicircle */			 
.half-bottom-circle {
	width: 100px;
	height: 50px;
	background: red;
	border-radius: 0px 0px 50px 50px;
}
/* left semicircle */			 
.half-left-circle {
	width: 50px;
	height: 100px;
	background: red;
	border-radius: 50px 0px 0px 50px;
}
/* right semicircle */			 
.half-right-circle {
	width: 50px;
	height: 100px;
	background: red;
	border-radius: 0px 50px 50px 0px;
}
<div class="half-top-circle"></div><br/>
<div class="half-bottom-circle"></div><br/>
<div class="half-left-circle"></div><br/>
<div class="half-right-circle"></div><br/>

sector

• Key Points - Follow the "Three Same, One Difference" principle
  • "Three same" means that the element width, height and corner radius are the same
  • "One difference" means "three the same" means the element width, height and corner radius are the same
    "One difference" means that the value of the rounded corners is different

/* Example */
/* top left circle */
.left-top-circle {
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 50px 0px 0px 0px;
}
/* lower left circle */			 
.left-bottom-circle {
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 0px 0px 0px 50px;
}
/* top right circle */			 
.right-top-circle {
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 0px 50px 0px 0px;
}
/* bottom right circle */			 
.right-bottom-circle {
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 0px 0px 50px 0px;
}
<div class="left-top-circle"></div><br/>
<div class="left-bottom-circle"></div><br/>
<div class="right-top-circle"></div><br/>
<div class="right-bottom-circle"></div><br/>

box shadow

box-shadow:inset x-offset y-offset blur-radius color;

• inset: shadow type inner shadow
• x-offset: X-axis displacement, specifying the horizontal displacement of the shadow
• y-offset: Y-axis displacement, used to specify the vertical displacement of the shadow
• blur-radius: Shadow blur radius The blur range for shadows to blur outwards
• color: Shadow color, defines the color used when drawing the shadow