First of all, a simple box mode, the so-called box mode, is the way CSS view elements, CSS will each single element as a box, as shown in the following figure:
It is called box mode because it is very similar to the box in our daily life, here is not much to say. Most of the attributes in CSS are used to control content, such as width, height, color, etc. padding, border, and margin are optional, of which, padding, margin represents a blank area, can only control its size, Border is a visible border that controls its border style, weight, color, and so on.
The following is mainly about typesetting.
Under normal circumstances, the browser starts at the beginning of the HTML file, renders the elements sequentially from top to bottom, and the block elements are arranged in order, sequentially, and inline elements are arranged from left to right in the block element. Some of the attributes of CSS can change this rendering, which is here to say, mainly float and position properties, plus the clear property to assist the Float,z-index property to assist position. None of these property values can be inherited.
Float Property Positioning:
The Float property value can be left, right, none. None is the default value, which means that the element is not drifting, and the browser displays it in the normal way, needless to say. When set to left or right, the element is drifted to the left or right. What do you mean drift?
Simply put, drift is a process that pulls an element out of the normal stream and displays it to the left or right of its parent element. You don't have to understand this, so let's take a step-by-step look at how the browser is drifting an element.
Let's say we have the following HTML, in order to see the layout more clearly, we add a red border to each section and add the orange background color to the paragraph, and the source code is as follows:
html
<body>
<div id="header">
这里是头部。 </div>
<div id="content">
<div id="leftbar">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
<div id="main">
<p>
这里是主区域。</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
<p>
这在阳光明媚、春暖花开的日子里，我窝在家里跟大家分享我Web开发的学习心得，这是一种什么精神？！</p>
</div>
</div>
<div id="footer">
<p>
这里是脚部。</p>
</div>
</body>#header, #footer, #content, #leftbar, #main
{}{
border: solid 1px red;
}
p
{}{
background-color: Orange;
}
This HTML is displayed in the browser as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
