HTML&CSS Learning Notes 6_html css learning-优快云博客

本文链接：https://blog.youkuaiyun.com/u012134914/article/details/48810227

本文深入讲解了CSS中Box Model的概念，包括margin、border、padding和content四部分的作用及调整方法。探讨了display属性的不同值如block、inline-block、inline等带来的布局效果变化，并介绍了float、clear以及positioning等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

Basic III

Box Model
display property. Generally there are two features, block model and single element. Block model is like that whether the content is empty or not the width of the div decorated by block will be follow the rule we sat. Single means one element populate the full width, only one element stand in one line.

block: block model(like a box no matter the content), single element.

inline-block: block model, non-single element.

inline: none-block model(width depends on the content), non-single element.

none: disappear.

Four parts of Box Model

Margin
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to MOVE our HTML elements closer to or farther from each other.

Border
The border is the edge of the element. It’s what we’ve been making visible every time we set the border property.

Padding
The padding is the spacing between the content and the border. We can adjust this value with CSS to MOVE the border closer to or farther from the content.

Content
The content is the actual “stuff” in the box.

Parameters of Margin/Padding
According the order, up, right, down and left to Margin and Padding. auto is to center the content in horizontal.
Special setting for certain direction is like margin-[direction].

Parameter of Border
border: [width] [type] [color], negative number means moving to opposite direction.

Float
You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other. left and rightare the two parameters. If you have several elements, they all know the others are there and don’t land on top of each other.

clear
For example, there are three elements they across each other. If you type clear:left for the center one. It will move below for clear the left side of this center element, but doesn’t matter for right side. Same to right parameter for opposite result. Similarly both can clear both sides of the element.

Positioning
absolute
Absolute positioning element, relate to the first parent element which is not static.

fixed
Absolute positioning element, relate to the browser.

relative
Relative positining element, relate to itself to move (flow position).

static
Default flow element, not positioning element.

Circle

border-radius:[percentage], curving of corner.