溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS如何實(shí)現(xiàn)流式布局

發(fā)布時(shí)間：2021-10-27 17:22:04 來(lái)源：億速云 閱讀：235 作者：小新 欄目：編程語(yǔ)言

小編給大家分享一下CSS如何實(shí)現(xiàn)流式布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、html結(jié)構(gòu)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus?">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<link rel="stylesheet" href="fluied.css">

<title>流式布局</title>

</head>

<body>

<div id="wrapper" class="clearfix">

<!-- 頭部和導(dǎo)航 -->

<div id="header">

<div id="navigation">

<ul>

<li>

<a href="#">

首頁(yè)

</a>

</li>

<li>

<a href="#">

導(dǎo)航一

</a>

</li>

</ul>

</div>

</div>

<!-- 側(cè)邊欄 -->

<div id="sidebar">

<p>這里是側(cè)邊欄</p>

</div>

<!-- 內(nèi)容部分 -->

<div id="content">

<p>這里是內(nèi)容</p>

</div>

<!-- 頁(yè)腳部分 -->

<div id="footer">

<p>這里是頁(yè)腳</p>

</div>

</div>

</body>

</html>

2、固定布局樣式

@charset "utf-8";

* {

margin: 0;

padding: 0;

}

#wrapper {

margin-right: auto;

margin-left: auto;

width: 960px;

border: 1px solid red;

}

#header {

margin-right: 10px;

margin-left: 10px;

width: 940px;

}

#navgation {

padding-bottom: 25px;

margin-top: 26px;

margin-left: -10px;

padding-right: 10px;

padding-left: 10px;

width: 940px;

}

#navigation ul li {

display: inline-block;

}

#navigation ul li a {

text-decoration: none;

color: black;

}

#content {

margin-top: 58px;

margin-right: 10px;

float: right;

width: 698px;

border-bottom: 1px solid red;

height: 100px;

}

#sidebar {

border-right-color: #e8e8e8;

border-right-style: solid;

border-right-width: 2px;

margin-top: 58px;

padding-right: 10px;

margin-right: 10px;

margin-left: 10px;

float: left;

width: 220px;

border-bottom: 1px solid red;

height: 100px;

}

#footer {

float: left;

margin-top: 20px;

margin-right: 10px;

margin-left: 10px;

clear: both;

width: 940px;

}

.clearfix:before,

.clearfix:after {

content: "";

display: block;

clear: both;

width: 0;

height: 0;

visibility: hidden;

font-size: 0;

}

3、將固定布局改為流式布局

將固定像素寬度轉(zhuǎn)換為對(duì)應(yīng)的百分比寬度公式：

目標(biāo)元素寬度 &divide; 上下文元素 = 百分比寬度

@charset "utf-8";

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

/*

* 初始狀態(tài)下、1em = 16px;

* 設(shè)置了根元素的字體大小為62.5%，

*這時(shí)，1em = 10px

*/

font-size: 62.5%;

}

#wrapper {

margin-right: auto;

margin-left: auto;

width: 96%;

border: 1px solid red;

}

#header {

margin-right: 1.04166667%;

margin-left: 1.04166667%;

width: 97.9166667%;

border-bottom: 1px solid red;

font-size: 4.8em;

}

#navgation {

padding-bottom: 25px;

margin-top: 26px;

margin-left: -1.04166667%;

padding-right: 1.04166667%;

padding-left: 1.04166667%;

width: 100%;

}

#navigation ul li {

display: inline-block;

}

#navigation ul li a {

text-decoration: none;

color: black;

}

#content {

margin-top: 58px;

margin-right: 1.04166667%;

float: right;

width: 72.7083333%;

border-bottom: 1px solid red;

height: 100px;

font-size: 2em;

}

#sidebar {

border-right-color: #e8e8e8;

border-right-style: solid;

border-right-width: 2px;

margin-top: 58px;

padding-right: 1.04166667%;

margin-right: 1.04166667%;

margin-left: 1.04166667%;

float: left;

width: 22.7083333%;

border-bottom: 1px solid red;

height: 100px;

font-size: 2em;

}

#footer {

float: left;

margin-top: 20px;

margin-right: 1.04166667%;

margin-left: 1.04166667%;

clear: both;

width: 97.9166667%;

height: 100px;

font-size: 1.2em;

}

.clearfix:before,

.clearfix:after {

content: "";

display: block;

clear: both;

width: 0;

height: 0;

visibility: hidden;

font-size: 0;

}

以上是“CSS如何實(shí)現(xiàn)流式布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手