CSS 一些重要部件的实现

1.导航条
https://www.w3schools.com/css/css_navbar.asp
https://www.w3schools.com/css/css_navbar_vertical.asp
https://www.w3schools.com/css/css_navbar_horizontal.asp

CSS Dropdowns

https://www.w3schools.com/css/css_dropdowns.asp

2.calc(), max() and min() functions
width: calc(100% - 100px);
width: max(50%, 300px);
width: min(50%, 300px);

3.SS Border Images
https://www.w3schools.com/css/css3_border_images.asp

4.CSS background-origin Property
The CSS background-origin property specifies where the background image is positioned.

The property takes three different values:

border-box - the background image starts from the upper left corner of the border
padding-box - (default) the background image starts from the upper left corner of the padding edge
content-box - the background image starts from the upper left corner of the content

The CSS background-clip property specifies the painting area of the background.

The property takes three different values:

border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box