題一:
在html5、CSS3語(yǔ)言中,在一個(gè)div區(qū)域內(nèi)劃分4列div區(qū)域。
樣例代碼:
可以使用CSS的flexbox布局來(lái)實(shí)現(xiàn)在一個(gè)div區(qū)域內(nèi)劃分4列div區(qū)域的效果。以下是一個(gè)樣例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.column {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
.column:nth-child(odd) {
background-color: #f2f2f2;
}
.column:nth-child(even) {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the content of column 1.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the content of column 2.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is the content of column 3.</p>
</div>
<div class="column">
<h2>Column 4</h2>
<p>This is the content of column 4.</p>
</div>
</div>
</body>
</html>
在上面的代碼中,我們使用了display: flex;來(lái)將容器設(shè)置為flex布局,通過(guò)flex-wrap: wrap;使得內(nèi)容在行不夠的情況下自動(dòng)換行。然后,每個(gè)列的寬度設(shè)置為25%,通過(guò)padding: 10px;設(shè)置列的內(nèi)邊距。通過(guò)box-sizing: border-box;設(shè)置盒子模型為border-box以保證內(nèi)邊距不會(huì)撐開(kāi)列的寬度。最后,使用:nth-child選擇器分別給奇數(shù)列和偶數(shù)列設(shè)置不同的背景顏色,以便區(qū)分列的樣式。
問(wèn)題二:
在html5、CSS3語(yǔ)言中,我想把頁(yè)面分為4個(gè)區(qū)域,上面第一區(qū)域div為頁(yè)面全寬、高度100px;中間分為左右兩個(gè)區(qū)域div,高度600px;最下面區(qū)域div為頁(yè)面全寬、高度100px。
樣例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #content, #footer {
width: 100%;
position: relative;
}
#header {
height: 100px;
background-color: #ccc;
}
#content {
height: 600px;
background-color: #ddd;
}
#left, #right {
width: 50%;
height: 100%;
float: left;
}
#left {
background-color: #eee;
}
#right {
background-color: #fff;
}
#footer {
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
說(shuō)明:
最近個(gè)人項(xiàng)目需要實(shí)現(xiàn)一個(gè)左右分欄且左右寬度可以手工拖動(dòng)調(diào)節(jié)的web頁(yè)面,這里記錄下實(shí)現(xiàn)過(guò)程,效果如下圖,整個(gè)web頁(yè)面包含左右兩個(gè)分欄,中間是個(gè)4px像素的拖動(dòng)條,鼠標(biāo)移動(dòng)到上面可以左右拖動(dòng)改變左右分欄的寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>web分欄寬度可調(diào)節(jié)示例</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="resize"></div>
<div id="right">right</div>
</div>
<script src="resize.js"></script>
</body>
</html>
body {
margin: 0;
overflow-y: hidden;
}
#container {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
#left {
width: calc(30% - 4px);
background-color:indianred;
}
#resize {
width: 4px;
height: 100vh;
cursor: ew-resize;
}
#resize:hover {
background-color: blue;
}
#right {
width: 70%;
/* height: 100vh; */
background-color:green;
}
家好,我是三木。
這篇文章,替大家匯總了css的布局方式,在每個(gè)布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接,不僅僅可以當(dāng)作學(xué)習(xí)資料,也可以當(dāng)作方法的查詢(xún)手冊(cè),以后開(kāi)發(fā)的時(shí)候忘記了某個(gè)屬性就來(lái)查查。
看完推薦的文章保準(zhǔn)解決你 99% 的css布局問(wèn)題
每篇文章不僅僅包含介紹,還有代碼案例,以及如w3c網(wǎng)站的在線(xiàn)代碼編輯,可以自己修改屬性嘗試。
使用方法——display: block/inline/inline-block
根據(jù)CSS規(guī)范的規(guī)定,每一個(gè)網(wǎng)頁(yè)元素都有一個(gè)display屬性,用于確定該元素的類(lèi)型,每一個(gè)元素都有默認(rèn)的display屬性值,比如div元素,它的默認(rèn)display屬性值為“block”,成為“塊級(jí)”元素(block-level);而span元素的默認(rèn)display屬性值為“inline”,稱(chēng)為“行內(nèi)”元素。
w3c:https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display
w3c:https://www.w3school.com.cn/css/css_inline-block.asp
用法:https://zhuanlan.zhihu.com/p/65353887
使用方法:float:left/right
指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,允許文本和內(nèi)聯(lián)元素環(huán)繞它。
float屬性用于定位和格式化內(nèi)容,例如讓圖像向左浮動(dòng)到容器中的文本。
float的值有:
w3c:https://www.w3schools.com/css/css_float.asp
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/float
CSS深入理解之float浮動(dòng):https://segmentfault.com/a/1190000014554601
使用方法——display:flex/inline-flex
Flexible Box 模型,通常被稱(chēng)為 flexbox,是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。
容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開(kāi)始位置(與邊框的交叉點(diǎn))叫做main start,結(jié)束位置叫做main end;交叉軸的開(kāi)始位置叫做cross start,結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size,占據(jù)的交叉軸空間叫做cross size。
容器有以下屬性:
w3c:https://www.w3schools.com/css/css3_flexbox_container.asp
Flex 布局教程:語(yǔ)法篇:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
深度解析 CSS Flexbox 布局:https://juejin.cn/post/6844904116141948936
48張小圖帶你領(lǐng)略flex布局之美:https://juejin.cn/post/6866914148387651592
使用方法——position:absolute/relative...
給元素設(shè)置postion屬性后,就可以定義該元素的top,bottom,left,right四個(gè)屬性。當(dāng)然postion的值不同,對(duì)應(yīng)的top,bottom,left,right這四個(gè)屬性的值代表的含義也不相同
position屬性用來(lái)指定一個(gè)元素在網(wǎng)頁(yè)上的位置,一共有5種定位方式:
w3c: https://www.w3schools.com/css/css_positioning.asp
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
CSS 定位詳解:https://www.ruanyifeng.com/blog/2019/11/css-position.html
使用方法——display:table/table-row/table-cell....
有兩種方式使用表格布局 -HTML Table(<table>標(biāo)簽)和CSS Table(display:table 等相關(guān)屬性)。
HTML Table是指使用原生的<table>標(biāo)簽,而CSS Table是指用CSS屬性模仿HTML 表格的模型。
table布局的display總共包含如下值
display:table的幾個(gè)用法:https://blog.51cto.com/u_4048786/3205160
css table布局大法:https://segmentfault.com/a/1190000007007885
display:table的用法:https://www.jianshu.com/p/037a706ba9e9
使用方法 ——display:grid
網(wǎng)格布局將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局。
w3c:https://www.w3schools.com/css/css_grid.asp
CSS Grid 網(wǎng)格布局教程:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Grid 布局:https://juejin.cn/post/6854573220306255880
A Complete Guide to Grid:https://css-tricks.com/snippets/css/complete-guide-grid/
使用方法——column-count
column-count: length | auto
column-width:interger | auto
淺談CSS3多列布局:https://juejin.cn/post/6844903450623524872
CSS columns分欄布局教程:https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。