찾다
웹 프론트엔드HTML 튜토리얼说说css3布局_html/css_WEB-ITnose

使用float属性或position属性布局的缺点

<!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>

使用上面代码页面显示如下所示:

但是当上面示例中div1和div2中任何一个元素中添加了一点不一样的东西,比如说增加一个图片

那么显示的页面效果就会如下所示,(也就是说无法实现两个元素的询问对齐)

那么该怎么样解决这个问题呢

css3中加入多栏布局,使用多栏布局可以将一个元素中的内容分成多栏显示,并且确保各栏中内容底部对齐。主要可以使用如下属性

column-count:要显示的列数

column-width:当前列显示的宽度

column-gap:多栏之间的间隔距离

column-rule:在栏与栏之间增加一条间隔线,并设置该间隔线的宽度颜色等

一般性盒布局

一般性页面布局都是分成左中右,像如下的例子一样的

<!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>

代码运行后的界面效果如下所示:

可以看到使用float属性或position属性,左右两侧或多栏中div元素的底部并没有对齐

使用盒布局

下面使用盒布局的方式来使得底部对齐,将上面的css改为如下所示:

        #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;        }

其实也就是在最外层的div上使用了display:box,并去除了里面三个div的float:left的属性,界面运行效果图如下所示:

这里顺便说一下,使用盒而已和多栏布局的区别:1、多栏布局每栏宽度必须相等2、使用多栏布局不可能具体指定什么栏显示什么内容,也就是说多栏布局适合在使用显示文章内容的时候而不适合用于安排整个网页的各个元素的结构

使用自适应窗口的弹性盒布局

对于上面的例子,如果我们想让这三个div的总宽度等于浏览器窗口的宽度,也就是说随着浏览器窗口宽度的改变而改变,应该怎么做呢

事实上很简单,只要在中间的div上增加-webkit-box-flex:1;-moz-box-flex:1; 这个属性就可以了,css代码如下所示:

        #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;        }

界面运行效果如所示所示:

改变元素的显示顺序

那么我们怎样改变元素的显示顺序呢,比如说我想让左侧栏在最右,内容栏在最左显示,怎么办?

css3提供了一个属性box-ordinal-group属性来改变各元素的显示顺序,大家看看我的css只是在里面的每个div增加了box-ordinal-group,就轻而易举的改变了它们的显示顺序

        #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;        }

界面效果图如下所示(是不是挺神奇的):

改变元素的排列方向

那如果要改变元素的排列方向呢,在css3中可以使用box-orient来指定多个元素的排列方向。只需要在最外层的div上增加box-orient属性就可以了。css代码如下所示:

        #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;        }

界面立马就完全变了

元素宽度与高度的自适应

在使用盒布局时,元素的宽度与高度具有自适应性,也就是说元素的宽度与高度可以根据排列方向的改变而改变

看下面的例子,整个html界面代码如下所示:

<!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>

界面效果如下所示:

当我们改变上述代码container里面的css如下所示(也就是改变排列方式为垂直方向):

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

则界面效果图如下所示:

 

使用弹性盒布局来消除空白

看了上面的效果图,大家一定在想,容器中总还是留出一大片空白的区域,应该要怎样来消除呢?其实可以使用css3中的弹性盒布局来解决,也就是使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度与高度

下面我们来修改一下上述代码(将排列方向设置为水平,在中间一个子div上加入box-flex属性)

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;            -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;        }

界面显示效果便如下所示了

当然你也可以设置排列方向为垂直,那么界面自然会显示成如下这样了

对多个元素使用box-flex属性

现在我们不只对中间的子div加上box-flex,也对第一个子div加上box-flex,那么结果会怎么样呢

        #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里面放入图像也是可以实现水平和垂直方向居中的)

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.