찾다
웹 프론트엔드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으로 문의하세요.
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

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를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

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

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전