Web Front-end
HTML Tutorial
Display of CSS 3: Detailed explanation of box type_html/css_WEB-ITnose
Display of CSS 3: Detailed explanation of box type_html/css_WEB-ITnose
In CSS, use the display attribute to define the type of box. Generally speaking, box types are divided into two categories: inline and block. For example, div defaults to block and span defaults to Inline. The default presentation mode can be modified through display.
<!DOCTYPR><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>block and inline elements</title> <style type="text/css"> div { background:#aaff00; } span { background:#ffaa00; } </style></head><body> <div>div元素1</div> <div>div元素2</div> <span>span元素1</span> <span>span元素2</span></body></html>Default div and span representation: http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/
Use dispaly to modify, respectively Add the following rules to the above div and span styles:
//div中添加display:inline;//span中添加display:block;
The effect is as shown: http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/
Are these two the only values for display? That would be wrong. Different values of display show different box types.
1. Inline-block type : It belongs to the block box type, but has the characteristics of inline box type when displayed. The default alignment for side-by-side display is bottom alignment, which can be modified with vertical-align.
Use inline-block to create a horizontal menu
<html><head><style type="text/css">ul{ margin:0; padding:0;}li{ display:inline-block; width:100px; padding:10px 0; background-color:#00ccff; border:solid 1px #666666; text-align:center;}a{ color:#000000; text-decoration:none;}</style></head><body> <ul> <li><a href="http://www.ido321.com" target="_blank">菜单1</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单2</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单3</a></li> <li><a href="http://www.ido321.com" target="_blank">菜单4</a></li> </ul></body></html>Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/
PS: There is a difference between inline-block and inline. The former still belongs to block, so it has height and width attributes, while the latter does not.
2. Inline-table type : It is a table-related type, supported by IE 8 and other main browsers. See below for more table-related types.
First, look at an example that does not use inline-table
<html><head><style type="text/css">table{border:solid 2px #00aaff;}td{border:solid 2px #ccff00;padding:5px;}</style></head><body>淡忘~浅思<table> <tr> <td>A</td><td>B</td><td>C</td><td>D</td> </tr> <tr> <td>E</td><td>F</td><td>G</td><td>H</td> </tr> <tr> <td>I</td><td>J</td><td>K</td><td>L</td> </tr></table>你好</body></html>The effect is like this: http://jsfiddle.net/Web_Code/pt0j3b6n/3 /embedded/result/
If you want to create the effect of text wrapping around a table, you can use inline-table and modify the table style
table{display:inline-table;border:solid 3px #00ffaa;}Text wrapping The effect comes out: http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/
Summary of table related types
| 元素 | 所属类型 | 说明 |
| table | table | 此元素会作为块级表格来显示，表格前后带有换行符。 |
| tabel | inline-table | 此元素会作为内联表格来显示，表格前后带有换行符。 |
| tr | table-row | 此元素会作为一个表格行显示 |
| td | table-cell | 此元素会作为一个表格单元格显示 |
| th | table-cell | 此元素会作为一个表格单元格显示 |
| tbody | table-row-group | 此元素会作为一个或多个行的分组来显示 |
| thead | table-header-group | 此元素会作为一个或多个行的分组来显示 |
| tfoot | table-footer-group | 此元素会作为一个或多个行的分组来显示 |
| col | table-column | 此元素会作为一个单元格列显示 |
| colgroup | table-column-group | 此元素会作为一个或多个列的分组来显示 |
| caption | table-caption | 此元素会作为一个表格标题显示 |
3. list-item Type : This type can display multiple elements as a list, and add a list tag at the beginning of the element
Set all divs in the example to the list-item type, use list-style -type specifies the mark as a hollow circle
<html><head><style type="text/css">div{ display:list-item; list-style-type:circle; margin-left:20px;}</style></head><body> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div></body></html>
Effect: http://jsfiddle.net/Web_Code/pt0j3b6n/5/embedded/result/
4. Run-in type and compact type : When the element is specified as run-in or compact type, if there is a block type element after the element, Run-in type elements will be included inside block type elements, while compact type elements are placed to the left of
block elements. These two attributes have not gained popularity. A demo about run-in: http://www.zhangxinxu.com/study/201203/css-run-in.html
5. none type : change the display value When specified as none, the element will not be displayed. PS: Unlike visibility:hidden, the element with display:none will not occupy the original space, but visibility will still occupy the original space.
Original article first published: http://www.ido321.com/1300.html
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
