Talk about css3 layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Talk about css3 layout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

Disadvantages of using float attribute or position attribute layout

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        div {            width: 20em;            float: left;        }        #div1 {            margin-right: 2em;        }        #div3 {            width: 100%;            background-color: yellow;            height: 200px;        }    </style></head><body>    <div id="div1">        <p>                        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div2">        <p>            示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div3">        页面中其它内容    </div></body></html>

Using the above code the page is displayed as follows:

But when something different is added to any element in div1 and div2 in the above example, such as adding an image

then it will be displayed The page effect will be as follows, (that is to say, the query alignment of two elements cannot be realized)

So how to solve this problem

in css3 Add multi-column layout. Using multi-column layout, you can divide the content in an element into multiple columns for display, and ensure that the bottom of the content in each column is aligned. You can mainly use the following attributes

column-count: the number of columns to be displayed

column-width: the width of the current column display

column-gap: between multiple columns Spacing distance

column-rule: Add a spacing line between columns and set the width, color, etc. of the spacing line

General box layout

General The page layout is divided into left, middle and right, like the following example

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #left-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            float: left;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="left-sidebar">            <h2 id="左侧边栏">左侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>        <div id="contents">            <h2 id="内容">内容</h2>            <p>                示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。            </p>        </div>        <div id="right-sidebar">            <h2 id="右侧边栏">右侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>    </div></body></html>

The interface effect after running the code is as follows:

You can see that using the float attribute or position attribute, the bottom of the div elements on the left and right sides or in multiple columns is not aligned

Use box layout

Use box below Layout method to align the bottom, change the above css to the following:

        #container {            display:-moz-box;            display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                       width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

In fact, display:box is used on the outermost div, and After removing the float:left attribute of the three divs inside, the interface operation rendering is as follows:

By the way, here is the difference between using a box and a multi-column layout: 1. The width of each column in multi-column layout must be equal. 2. It is impossible to specify which column displays what content using multi-column layout. This means that multi-column layout is suitable for displaying article content but not suitable for arranging various elements of the entire web page. Structure

Flexible box layout using adaptive window

For the above example, if we want the total width of these three divs to be equal to the width of the browser window, that is, as the browser What should be done if the width of the browser window changes?

In fact, it is very simple. Just add the attribute -webkit-box-flex:1;-moz-box-flex:1; to the middle div. That’s it, the css code is as follows:

        #container {          display:-moz-box;          display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                -webkit-box-flex:1;            -moz-box-flex:1;                   width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

The interface operation effect is as shown:

Change the display of elements Order

So how do we change the display order of elements? For example, if I want the left column to be displayed on the far right and the content column to be displayed on the left, what should I do?

CSS3 provides an attribute box-ordinal-group attribute to change the display order of each element. If you look at my css, I just add box-ordinal-group to each div in it, and the change is easy. Change their display order

        #container {            display: -moz-box;            display: -webkit-box;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

The interface rendering is as follows (isn’t it amazing):

Change the arrangement of elements Direction

If you want to change the arrangement direction of elements, you can use box-orient in CSS3 to specify the arrangement direction of multiple elements. Just add the box-orient attribute to the outermost div. The css code is as follows:

        #container {            display: -moz-box;            display: -webkit-box;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

The interface completely changed immediately

Adaptive element width and height

When using box layout, the width and height of elements are adaptive, which means that the width and height of elements can change according to the change of arrangement direction

Look at the example below, the entire html interface code is as follows As shown:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="text-a">示例文字A</div>        <div id="text-b">示例文字B</div>        <div id="text-c">示例文字C</div>    </div></body></html>

The interface effect is as follows:

When we change the above code in the container The css is as follows (that is, changing the arrangement to vertical direction):

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }

Then the interface rendering is as follows:

Use flex box layout to eliminate blank space

After looking at the above renderings, you must be thinking that there is always a large blank area left in the container. How should we eliminate it? In fact, it can be solved using the flexible box layout in CSS3, that is, the total width and total height of multiple elements participating in the arrangement are always equal to the width and height of the container

Let’s modify the above code (arrange the Set the direction to horizontal and add the box-flex attribute to the middle sub-div)

The css style is as follows:

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;            -moz-box-flex:1;            -webkit-box-flex:1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

The interface display effect is as follows

Of course you can also set the arrangement direction to vertical, then the interface will naturally appear as follows

Use for multiple elements box-flex attribute

Now we not only add box-flex to the middle child div, but also add box-flex to the first child div, what will be the result?

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-b {            background-color: yellow;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：

其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部

你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值

指定水平方向与垂直方向的对齐方式

在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。

示例代码

        div {            display: -moz-box;            display: -webkit-box;            -moz-box-align: center;            -webkit-box-align: center;            -moz-box-pack: center;            -webkit-box-pack: center;            width: 200px;            height: 100px;            background-color: pink;        }

如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

See all articles