HTML-HTML5+CSS3 Authoritative guide Reading (iii, CSS3)

The difference between block, inline, inline-block in 1.display

1). By default, the block width fills the entire browser, and the inline width is equal to the width of its contents

2). Each row holds only one block element, but can hold multiple inline elements in parallel

3). Block element width, height, row high can be changed, the inline element is wide, high, row high cannot be changed

4). The elements that apply inline-block are rendered as inline objects, and the surrounding elements remain on the same line, but you can set the properties of the width and height parcel elements (so that you can use Li + inline-block to make navigation without the float)

5). If you want to change the table to inline, you can use the Inline-table

2.text-shadow, Box-shadow

Text-shadow: Adding shadow Effects to Text

Box-shadow: Adding a shadow effect to a container

3.box-sizing

Content-box: Just the width and height of the content

Border-box: Total width and height of content and borders and fillers

4.

HTML-HTML5+CSS3 Authoritative guide Reading (iii, CSS3)