html5、CSS3入門學(xué)習(xí)筆記2023-9-10分欄

題一：

在html5、CSS3語言中，在一個(gè)div區(qū)域內(nèi)劃分4列div區(qū)域。

樣例代碼：

可以使用CSS的flexbox布局來實(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;來將容器設(shè)置為flex布局，通過flex-wrap: wrap;使得內(nèi)容在行不夠的情況下自動(dòng)換行。然后，每個(gè)列的寬度設(shè)置為25%，通過padding: 10px;設(shè)置列的內(nèi)邊距。通過box-sizing: border-box;設(shè)置盒子模型為border-box以保證內(nèi)邊距不會(huì)撐開列的寬度。最后，使用:nth-child選擇器分別給奇數(shù)列和偶數(shù)列設(shè)置不同的背景顏色，以便區(qū)分列的樣式。

問題二：

在html5、CSS3語言中，我想把頁面分為4個(gè)區(qū)域，上面第一區(qū)域div為頁面全寬、高度100px；中間分為左右兩個(gè)區(qū)域div，高度600px；最下面區(qū)域div為頁面全寬、高度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>

說明:

首先，設(shè)置html和body的高度為100%以確保頁面占滿整個(gè)屏幕，并去除默認(rèn)的邊距和內(nèi)邊距。
頁面分為三個(gè)區(qū)域，分別是header、content和footer，它們的寬度都設(shè)置為100%，并且相對(duì)定位。
header區(qū)域的高度設(shè)置為100px，并設(shè)置背景顏色為#ccc。
content區(qū)域的高度設(shè)置為600px，并設(shè)置背景顏色為#ddd。其中，content區(qū)域又分為左右兩個(gè)區(qū)域，分別是left和right，它們的寬度都設(shè)置為50%，高度設(shè)置為100%，并且浮動(dòng)在左側(cè)。
left區(qū)域的背景顏色設(shè)置為#eee，right區(qū)域的背景顏色設(shè)置為#fff。
footer區(qū)域的高度設(shè)置為100px，并設(shè)置背景顏色為#ccc。

站制作中主要包括上下、左右以及混合分欄的排版模式，分欄式頁面現(xiàn)在是網(wǎng)站設(shè)計(jì)中常見的一種，它可以將網(wǎng)站展現(xiàn)的更美觀，內(nèi)容看上去井然有序。在今天的內(nèi)容中，小編將詳細(xì)介紹下分欄式頁面設(shè)計(jì)的要求。

1.頁面設(shè)計(jì)時(shí)要將主次分清，不要一味的追求漂亮而違反了頁面設(shè)計(jì)的規(guī)則，特別要注意的是不要影響用戶的瀏覽體驗(yàn)。

2.用心創(chuàng)意設(shè)計(jì)，一般來說左右分欄的網(wǎng)站看上去板塊會(huì)很少，如果我們通過創(chuàng)新設(shè)計(jì)，將頁面更為豐富，這樣用戶在瀏覽網(wǎng)站時(shí)就不會(huì)覺得死板了。

3.除了在內(nèi)容上左右分欄可以大幅度交替變換，整體的格調(diào)也不能區(qū)分得過于明顯，否則會(huì)顯得格格不入，最好讓整個(gè)頁面保持該有的視覺平衡感。

4.導(dǎo)航設(shè)計(jì)要求，不管采用是文字還是圖片的導(dǎo)航形式，都可以利用分欄充分體現(xiàn)，考慮到用戶對(duì)網(wǎng)站的視覺效應(yīng)，小編認(rèn)為在分欄中利用圖片導(dǎo)航指引效果會(huì)更好。

5.做到左右互補(bǔ)的形式，用戶在瀏覽網(wǎng)站時(shí)，由于頁面設(shè)計(jì)左右互補(bǔ)，那么瀏覽一側(cè)內(nèi)容的同時(shí)就不會(huì)遺漏另一側(cè)的內(nèi)容，甚至?xí)l(fā)用戶對(duì)網(wǎng)站內(nèi)容的思考。

總結(jié)：分欄設(shè)計(jì)從內(nèi)容和結(jié)構(gòu)上來說比普通的設(shè)計(jì)都要自由得多，兩側(cè)既獨(dú)立又緊密相連，所以，盡量發(fā)揮出我們的想象和創(chuàng)意，將好的作品展現(xiàn)到用戶面前。

原創(chuàng)文章出自暢想網(wǎng)絡(luò)，轉(zhuǎn)載地址：http://www.e-wkj.cn/xw/2493.html

家好，我是三木。

這篇文章，替大家匯總了css的布局方式，在每個(gè)布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接，不僅僅可以當(dāng)作學(xué)習(xí)資料，也可以當(dāng)作方法的查詢手冊(cè)，以后開發(fā)的時(shí)候忘記了某個(gè)屬性就來查查。

看完推薦的文章保準(zhǔn)解決你 99% 的css布局問題

每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網(wǎng)站的在線代碼編輯，可以自己修改屬性嘗試。

普通布局

使用方法——display: block/inline/inline-block

根據(jù)CSS規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁元素都有一個(gè)display屬性，用于確定該元素的類型，每一個(gè)元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素(block-level)；而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(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

浮動(dòng)布局

使用方法：float:left/right

指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。

float屬性用于定位和格式化內(nèi)容，例如讓圖像向左浮動(dòng)到容器中的文本。

float的值有：

left- 元素浮動(dòng)到其容器的左側(cè)
right- 元素浮動(dòng)到其容器的右側(cè)
none- 元素不浮動(dòng)（將僅顯示在文本中出現(xiàn)的位置）。這是默認(rèn)的
inherit- 元素繼承其父元素的浮點(diǎn)值

資料文章：

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 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器有以下屬性：

flex-direction-屬性決定主軸的方向（即項(xiàng)目的排列方向）
flex-wrap-定義設(shè)置換行模式
flex-flow-定義了項(xiàng)目在主軸上的對(duì)齊方式
justify-content-定義項(xiàng)目在交叉軸上如何對(duì)齊
align-items-定義項(xiàng)目在交叉軸上如何對(duì)齊
align-content-定義了多根軸線的對(duì)齊方式

資料文章：

w3c：https://www.w3schools.com/css/css3_flexbox_container.asp

Flex 布局教程：語法篇：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屬性用來指定一個(gè)元素在網(wǎng)頁上的位置，一共有5種定位方式：

static-靜態(tài)
relative-相對(duì)定位
fixed-固定定位
absolute-絕對(duì)定位
sticky-粘性定位

資料文章：

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總共包含如下值

table：指定對(duì)象作為塊元素級(jí)的表格，相當(dāng)于html標(biāo)簽<table>
inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格，相當(dāng)于html標(biāo)簽<table>
table-caption：指定對(duì)象作為表格標(biāo)題，相當(dāng)于html標(biāo)簽<caption>
table-cell：指定對(duì)象作為表格單元格，相當(dāng)于html標(biāo)簽<td>
table-row：指定對(duì)象作為表格行，相當(dāng)于html標(biāo)簽<tr>
table-row-group：指定對(duì)象作為表格行組，相當(dāng)于html標(biāo)簽<tbody>
table-column：指定對(duì)象作為表格列，相當(dāng)于html標(biāo)簽<col>
table-column-group：指定對(duì)象作為表格列組顯示，相當(dāng)于html標(biāo)簽<colgroup>
table-header-group：指定對(duì)象作為表格標(biāo)題組，相當(dāng)于html標(biāo)簽<thead>
table-footer-group：指定對(duì)象作為表格腳注組，相當(dāng)于html標(biāo)簽<tfoot>

資料文章：

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)頁劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。

column-gap Specifies the gap between the columns

grid：設(shè)置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow屬性
grid-area：設(shè)置grid-row-start, grid-column-start, grid-row-end, grid-column-end屬性
grid-auto-columns：設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬
grid-auto-flow：設(shè)置排序方式
grid-auto-rows：設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的行高
grid-column ：設(shè)置grid-column-start and、grid-column-end properties
grid-column-end：設(shè)置右邊框所在的垂直網(wǎng)格線
grid-column-gap：設(shè)置列間距
grid-column-start：設(shè)置左邊框所在的垂直網(wǎng)格線
grid-gap：設(shè)置grid-row-gap、grid-column-gap屬性
grid-row：設(shè)置grid-row-start、grid-row-end屬性
grid-row-end：設(shè)置下邊框所在的水平網(wǎng)格線
grid-row-gap：設(shè)置行間距
grid-row-start：設(shè)置上邊框所在的水平網(wǎng)格線
grid-template：設(shè)置grid-template-rows,、grid-template-columns、grid-areas屬性
grid-template-areas：設(shè)置網(wǎng)格的區(qū)域，一個(gè)區(qū)域由多少單元格組成
grid-template-columns：設(shè)置列寬
grid-template-rows：設(shè)置行高
row-gap：設(shè)置行與行之間的間距

資料文章：

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

column-count：描述元素的列數(shù)
column-fill：設(shè)置多列內(nèi)容的平衡填充模式
column-gap：屬性用來設(shè)置元素列之間的間隔（gutter）大小
column-rule：屬性規(guī)定了列與列之間的直線
column-rule-color：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的顏色
column-rule-style：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的樣式
column-rule-width：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的寬度
column-span：設(shè)置某一個(gè)內(nèi)容是否跨多欄顯示。
columns：用來設(shè)置元素的列寬和列數(shù)

資料文章：

淺談CSS3多列布局：https://juejin.cn/post/6844903450623524872

CSS columns分欄布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

在線咨詢

上一篇：前端基礎(chǔ)入門（HTML）
下一篇：使用CSS隱藏頁面元素的幾種方法，你知道它們的具體區(qū)別嗎？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html5、CSS3入門學(xué)習(xí)筆記2023-9-10分欄

普通布局

資料文章：

浮動(dòng)布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

您的項(xiàng)目需求