Home > Developer > JavaScript
Css box model-related styles and css model styles
If you don't talk much about it, you should start with the basics.
Box Type
1. Basic Types of boxes
In css, display is used to define the box type, which is generally divided into block type and inline type.
For example, div belongs to the block type and span belongs to the inline type.
<! DOCTYPE html>By running this code, we can clearly see that the width of the block type occupies the entire browser, and the width of the inline element is equal to the width of its content.
Each row can contain only one block element, but multiple inline elements.
Next, we can use the display attribute to change the div to the block type, and change the span to the inline attribute to see its running effect.
<! DOCTYPE html>2. inline-block type
Inline-block is a type of block box. It sets the display attribute of an element to inline-block, and displays and sets it.
It is the same as inline, but the width and height attributes of an element can only be applied to block elements.
<! DOCTYPE html>
3. inline-table Type
First look at the column
<! DOCTYPE html>The table belongs to the block type. To display text in the same way as the table, you must set the display attribute of the table to inline-table.
The alignment of text differs from that of a table. In general, you must set the alignment of text.
4. list-item type
You can display multiple elements as a list and add a list mark before it.
<!DOCTYPE html>
5. none type
Set the element type to none, and the element will not be displayed.
6. overflow attributes
Overflow is used to display the content in the box when the content is not displayed.
<! DOCTYPE html>At the same time, there are two attributes: overflow-x and overflow-y. You can separately display the content that exceeds the box range in the horizontal or vertical direction.
Set the display mode.
7. box-sizing attributes
The box-sizing attribute is a new box model attribute in css3.
You can use width and height in css to set the width and height of an element, but you can use the box-siziing attribute to specify
Whether the width and height set by the width and height attributes contain the fill area inside the element, and the width and height of the border.
The value of box-sizing is content-box and border-box. Content-box indicates that the width and height of the element do not include the internal padding area.
And the border width and height. border-box indicates the width and height of the element, including the interior padding area and the border width and height.
<! DOCTYPE html>
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
