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

題一：

在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ō)明:

首先，設(shè)置html和body的高度為100%以確保頁(yè)面占滿(mǎn)整個(gè)屏幕，并去除默認(rèn)的邊距和內(nèi)邊距。
頁(yè)面分為三個(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。

終效果

最近個(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)改變左右分欄的寬度。

HTML

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

CSS

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

javascript

家好，我是三木。

這篇文章，替大家匯總了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

浮動(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 模型，通常被稱(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。

容器有以下屬性：

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

資料文章：

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種定位方式：

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)頁(yè)劃分成一個(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)格線(xiàn)
grid-column-gap：設(shè)置列間距
grid-column-start：設(shè)置左邊框所在的垂直網(wǎng)格線(xiàn)
grid-gap：設(shè)置grid-row-gap、grid-column-gap屬性
grid-row：設(shè)置grid-row-start、grid-row-end屬性
grid-row-end：設(shè)置下邊框所在的水平網(wǎng)格線(xiàn)
grid-row-gap：設(shè)置行間距
grid-row-start：設(shè)置上邊框所在的水平網(wǎng)格線(xiàn)
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：屬性用來(lái)設(shè)置元素列之間的間隔（gutter）大小
column-rule：屬性規(guī)定了列與列之間的直線(xiàn)
column-rule-color：設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則（線(xiàn)條）的顏色
column-rule-style：設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則（線(xiàn)條）的樣式
column-rule-width：設(shè)置在多列布局中被畫(huà)在兩列之間的規(guī)則（線(xiàn)條）的寬度
column-span：設(shè)置某一個(gè)內(nèi)容是否跨多欄顯示。
columns：用來(lái)設(shè)置元素的列寬和列數(shù)

資料文章：

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

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

在線(xiàn)咨詢(xún)

上一篇：有哪些網(wǎng)頁(yè)版“神器”工具，是大眾所不知道的？
下一篇：7天“切斷”變異病毒的本土傳播，深圳是如何做到的？

您的項(xiàng)目需求

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

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

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

終效果

HTML

CSS

javascript

普通布局

資料文章：

浮動(dòng)布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

您的項(xiàng)目需求