CSS學(xué)習(xí)摘要-布局

bigdevil_s 發(fā)布于2019-04-23 13:39 / 2920人閱讀

摘要：注全文摘自介紹布局頁(yè)面布局技術(shù)允許我們拾取網(wǎng)頁(yè)中的元素，并且控制它們相對(duì)正常布局流周邊元素父容器或者主視口窗口的位置。添加此代碼將給出以下結(jié)果絕對(duì)定位絕對(duì)定位絕對(duì)定位用于將元素移動(dòng)到頁(yè)面的任何位置，以創(chuàng)建復(fù)雜的布局。

注：全文摘自MDN-介紹CSS布局

CSS頁(yè)面布局技術(shù)允許我們拾取網(wǎng)頁(yè)中的元素，并且控制它們相對(duì)正常布局流、周邊元素、父容器或者主視口/窗口的位置。在這個(gè)模塊中將涉及更多關(guān)于頁(yè)面布局技術(shù)的細(xì)節(jié)：

浮動(dòng)
定位
CSS 表格
彈性盒子
網(wǎng)格

每種技術(shù)都有它們的用途，各有優(yōu)缺點(diǎn)。

正常布局流

正常布局流是指在不對(duì)頁(yè)面進(jìn)行任何布局控制時(shí)，瀏覽器默認(rèn)的HTML布局方式。讓我們快速地看一個(gè)HTML的例子：

I love my cat.


  Buy cat food
  Exercise
  Cheer up friend


The end!

默認(rèn)情況下，瀏覽器的顯示如下:

注意，HTML元素完全按照源碼中出現(xiàn)的先后次序顯示——第一個(gè)段落、無(wú)序列表、第二個(gè)段落。

布局技術(shù)會(huì)覆蓋默認(rèn)的布局行為：

position屬性 — 正常布局流中，默認(rèn)為 static ，使用其它值會(huì)引起元素不同的布局方式，例如將元素固定到瀏覽器視口的左上角。
浮動(dòng)——應(yīng)用 float值，諸如 left 能夠讓塊級(jí)元素互相并排成一行，而不是一個(gè)堆疊在另一個(gè)上面。
display 屬性——標(biāo)準(zhǔn)值 block, inline or inline-block 會(huì)改變?cè)卦谡２季至髦械男袨榉绞?見 Types of CSS boxes )，而一些不常見或特殊的值允許我們使用完全不同的方式進(jìn)行布局，使用工具比如Flexbox。

浮動(dòng)

浮動(dòng)技術(shù)允許元素浮動(dòng)到另外一個(gè)元素的左側(cè)或右側(cè)，而不是默認(rèn)的一個(gè)堆疊另一個(gè)。float 的主要用途是布置出多個(gè)列并且浮動(dòng)文字以環(huán)繞圖片。下面我們快速瀏覽一下 float 屬性并通過一個(gè)例子來(lái)說明。

float 屬性有四個(gè)可能的值：

left — 將元素浮動(dòng)到左側(cè)。
right — 將元素浮動(dòng)到右側(cè)。
none — 默認(rèn)值, 不浮動(dòng)。
inherit — 繼承父元素的浮動(dòng)屬性。

簡(jiǎn)單HTML示例

下面展示了如何用浮動(dòng)來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的兩列布局。首先看一下HTML：

2 column layout example

  First column
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 



  Second column
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.

代碼中有一個(gè)一級(jí)標(biāo)題和兩個(gè)簡(jiǎn)單的

元素。每個(gè)又各自包含一個(gè)二級(jí)標(biāo)題和一個(gè)段落。默認(rèn)情況下。HTML內(nèi)容自上而下顯示：

整列浮動(dòng)

下面讓我們將兩個(gè)

元素排成一行。下面的代碼可以實(shí)現(xiàn)這個(gè)效果. 注意這兩個(gè)

一個(gè)浮動(dòng)值為 left，另外一個(gè)浮動(dòng)為 right。這意味著它們其中一個(gè)往左靠，另外一個(gè)往右靠。給這兩個(gè)元素分別設(shè)置 width值，使得它們能夠在同一行放下來(lái)，并且設(shè)置一個(gè)水平的間距(總寬度不要大于100!).

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

修改過的代碼如下：

定位技術(shù)

定位技術(shù)(position)允許我們將一個(gè)元素從它在頁(yè)面的原始位置準(zhǔn)確地移動(dòng)到另外一個(gè)位置。

有四種主要的定位類型需要我們了解：

靜態(tài)定位(Static positioning) 是每個(gè)元素默認(rèn)的屬性——它表示“將元素放在文檔布局流的默認(rèn)位置——沒有什么特殊的地方”。
相對(duì)定位(Relative positioning) 允許我們相對(duì)元素在正常的文檔流中的位置移動(dòng)它——包括將兩個(gè)元素疊放在頁(yè)面上。這對(duì)于微調(diào)和精準(zhǔn)設(shè)計(jì)(design pinpointing)非常有用。
絕對(duì)定位(Absolute positioning) 將元素完全從頁(yè)面的正常布局流中移出，類似將它多帶帶放在一個(gè)圖層中. 我們可以將元素相對(duì)于頁(yè)面的元素邊緣固定，或者相對(duì)于離元素最近的被定位的祖先元素(ancestor element)。絕對(duì)定位在創(chuàng)建復(fù)雜布局效果時(shí)非常有用，例如通過標(biāo)簽顯示和隱藏的內(nèi)容面板或者通過按鈕控制滑動(dòng)到屏幕中的信息面板.
固定定位(Fixed positioning) 與絕對(duì)定位非常類似，除了它是將一個(gè)元素相對(duì)瀏覽器視口固定，而不是相對(duì)另外一個(gè)元素。在創(chuàng)建類似頁(yè)面滾動(dòng)總是處于頁(yè)面上方的導(dǎo)航菜單時(shí)非常有用。

簡(jiǎn)單定位示例

我們將展示一些示例代碼來(lái)熟悉這些布局技術(shù). 這些示例代碼都作用在相同的HTML上：

Positioning

I am a basic block level element.
I am a basic block level element.
I am a basic block level element.

該HTML將使用以下CSS默認(rèn)樣式：

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

渲染效果如下:

相對(duì)定位

相對(duì)定位通常用來(lái)對(duì)布局進(jìn)行微調(diào)，比如將一個(gè)圖標(biāo)往下調(diào)一點(diǎn)，以便放置文字. 我們可以通過下面的規(guī)則添加相對(duì)定位來(lái)實(shí)現(xiàn)效果:

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

這里我們給中間段落一個(gè)position``relative值——這屬性本身不做任何事情，所以我們還添加了top和left屬性。這些可以將受影響的元素向下向右移——這可能看起來(lái)和你所期待的相反，但你需要把它看成是左邊和頂部的元素被“推開”一定距離，這就導(dǎo)致了它的向下向右移動(dòng)。

添加此代碼將給出以下結(jié)果：

絕對(duì)定位

絕對(duì)定位用于將元素移動(dòng)到web頁(yè)面的任何位置，以創(chuàng)建復(fù)雜的布局。有趣的是，它經(jīng)常被用于與相對(duì)定位和浮動(dòng)的協(xié)同工作。

回到我們最初的非定位示例，我們可以添加以下的CSS規(guī)則來(lái)實(shí)現(xiàn)絕對(duì)定位：

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

這里我們給我們的中間段一個(gè)position的 absolute值，并且和前面一樣加上 top和left屬性。但是，添加此代碼將給出以下結(jié)果：

這和之前截然不同！定位元素現(xiàn)在已經(jīng)與頁(yè)面布局的其余部分完全分離，并位于頁(yè)面的頂部。其他兩段現(xiàn)在靠在一起，好像之前那個(gè)中間段落不存在一樣。top和left屬性對(duì)絕對(duì)位置元素的影響不同于相對(duì)位置元素。在這種情況下，他們沒有指定元素相對(duì)于原始位置的移動(dòng)程度。相反，它們指定元素應(yīng)該從頁(yè)面邊界的頂部和左邊的距離(確切地說，是元素的距離)。

我們現(xiàn)在暫時(shí)不討論固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在瀏覽器窗口的邊緣，而不是它定位的父節(jié)點(diǎn)的邊緣。

CSS 表格

HTML表格對(duì)于顯示表格數(shù)據(jù)是很好的，但是很多年前——在瀏覽器中支持基本的CSS之前——web開發(fā)人員過去也常常使用表格來(lái)完成整個(gè)網(wǎng)頁(yè)布局——將它們的頁(yè)眉、頁(yè)腳、不同的列等等放在不同的表行和列中。這在當(dāng)時(shí)是有效的，但它有很多問題——表布局是不靈活的，非常重的標(biāo)記，難以調(diào)試和語(yǔ)義上的錯(cuò)誤（比如，屏幕閱讀器用戶在導(dǎo)航表布局方面有問題）。

CSS表格的存在是為了讓您能夠像表格一樣布局元素，而不需要上面描述的任何問題——這聽起來(lái)可能有些奇怪，您應(yīng)該使用表格元素作為表格數(shù)據(jù)，但有時(shí)這可能是有用的。例如，您可能想要列出一個(gè)表單，其中有標(biāo)簽和文本輸入；這可能很棘手，但是CSS表使其變得容易。

讓我們來(lái)看一個(gè)例子。首先，創(chuàng)建HTML表單的一些簡(jiǎn)單標(biāo)記。每個(gè)輸入元素都有一個(gè)標(biāo)簽，我們還在一個(gè)段落中包含了一個(gè)標(biāo)題。為了進(jìn)行布局，每個(gè)標(biāo)簽/輸入對(duì)都封裝在

中。


  First of all, tell us your name and age.
  
    First name:
    
  
  
    Last name:
    
  
  
    Age:

現(xiàn)在，我們例子中的CSS。除了使用 display屬性外，大多數(shù)CSS都是相當(dāng)普通的。

, 和被告知要分別顯示表、表行和表單元——基本上，它們會(huì)像HTML表格標(biāo)記一樣，導(dǎo)致標(biāo)簽和輸入在默認(rèn)情況下排列整齊。我們所要做的就是添加一些大小、邊緣等等，讓一切看起來(lái)都好一點(diǎn)，我們就完成了。

你會(huì)注意到標(biāo)題段落已經(jīng)給出了 display: table-caption;——這使得它看起來(lái)就像一個(gè)表格 ——和caption-side: bottom; 讓標(biāo)題在表格的底部下進(jìn)行設(shè)計(jì)，即使標(biāo)記是在源的輸入之前。這就能讓你有一點(diǎn)靈活的彈性。

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

結(jié)果如下：

柔性盒子

CSS是一種功能強(qiáng)大的語(yǔ)言，它可以做很多事情，但它卻在布局上有所下降。傳統(tǒng)的老式布局方法，如float和positioning工作，但有時(shí)它們會(huì)感覺比他們需要的更復(fù)雜、更靈活、更有彈性。例如，如果你想要：

垂直中心盒子的內(nèi)容(不僅僅是文本；line-height 將會(huì)失效)。
制作幾列有相同的高度包含不同數(shù)量?jī)?nèi)容的列，不使用固定的高度，或用背景圖像偽裝。
在一行中創(chuàng)建幾個(gè)盒子，占用相同數(shù)量的可用空間，不管有多少個(gè)，并且如果它們有內(nèi)邊距，外邊距等就應(yīng)用它。

上面的例子幾乎不可能通過常規(guī)的CSS實(shí)現(xiàn)——柔性盒子(或flexbox)是為了讓這些東西更容易實(shí)現(xiàn)而被發(fā)明的。

讓我們來(lái)看一個(gè)例子；首先，一些簡(jiǎn)單的HTML：


  This is a box
  This is a box
  This is a box

這里我們有一個(gè)

元素，里面有三個(gè)

，再加上幾個(gè)按鈕來(lái)創(chuàng)建一個(gè)新盒子，和重新設(shè)置demo。默認(rèn)情況下，子元素不會(huì)被布局或改變大小，使用傳統(tǒng)的方法，我們必須仔細(xì)地對(duì)每個(gè)元素設(shè)置大小，允許寬度、外邊距、邊框和內(nèi)邊距，如果我們添加了另一個(gè)子元素，我們就必須完全改變所有的值。

使用Flexbox替代它：

html {
  font-family: sans-serif;
}

section {
  width: 93%;
  height: 240px;
  margin: 20px auto;
  background: purple;
  display: flex;
}

div {
  color: white;
  background: orange;
  flex: 1;
  margin-right: 10px;
  text-shadow: 1px 1px 1px black;
}

div:last-child {
  margin-right: 0;
}

section, div {
  border: 5px solid rgba(0,0,0,0.85);
  padding: 10px;
}

這個(gè)CSS的兩行非常有趣：

display: flex; 告訴
元素的子元素作為flexible boxes——默認(rèn)情況下，它們都將展開以填充父類的可用高度，不管它是什么，并將其列出來(lái)——有足夠的寬度來(lái)包裝他們的內(nèi)容。
flex: 1; 告訴每個(gè)
元素，在行中獲得相同數(shù)量的空間，不管有多少。

為了進(jìn)一步說明這是多么的神奇，我們還將添加一些JavaScript，以便您可以通過按下_Create box_按鈕來(lái)添加進(jìn)一步的子

。

var section = document.querySelector("section");
var createBtn = document.querySelector(".create");
var resetBtn = document.querySelector(".reset");

function createBox() {
  var box = document.createElement("div");
  box.textContent = "This is a box";
  section.appendChild(box);
}

createBtn.onclick = createBox;

resetBtn.onclick = function() {
  while (section.firstChild) {
      section.removeChild(section.firstChild);
  }
  createBox();
  createBox();
  createBox();
}

這是一個(gè)例子——多試試見證Flexbox作為一個(gè)布局工具的強(qiáng)大。

網(wǎng)格布局

這里提到的最具實(shí)驗(yàn)性的特性是CSS網(wǎng)格，它在瀏覽器中還沒有得到廣泛的支持。Web頁(yè)面通常使用網(wǎng)格系統(tǒng)布局，與打印媒體相同，這里的想法是通過定義一個(gè)網(wǎng)格來(lái)簡(jiǎn)化這個(gè)過程，然后定義內(nèi)容的哪些部分位于網(wǎng)格的每個(gè)區(qū)域。

目前的CSS網(wǎng)格在任何地方都還沒有得到真正的支持(除了Firefox和Chrome的實(shí)驗(yàn)性版本)。
IE和Edge支持一種更舊的、過時(shí)的技術(shù)。這是我們將來(lái)可以期待的！

注意：為了更好地了解當(dāng)前的網(wǎng)格框架和其他正在使用的技術(shù)，以及即將到來(lái)的原生CSS網(wǎng)格規(guī)范，請(qǐng)參閱我們的 Grids 文章。

【end】

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)css布局 css布局 css布局教程學(xué)習(xí)css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2181.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

bigdevil_s

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

1

閱讀 3840·2021-11-23 09:51
關(guān)于安裝wireshark中npcap一直無(wú)法安裝以及winpcap無(wú)法安裝解決方法

閱讀 4628·2021-11-15 11:37
工資低？裸辭？項(xiàng)目黃？走了多少?gòu)澛分挥形易约褐溃?/a>

閱讀 3602·2021-09-02 15:21

Zoom 公布其“1 億美元發(fā)展基金”的首輪投資名單

閱讀 2803·2021-09-01 10:31
酷銳云：周年慶第二波，新上香港、美國(guó)GIA直連線路特價(jià)套餐，限量20臺(tái)

閱讀 938·2021-08-31 14:19
HOSTMEM ，$10/年， 1核/512M內(nèi)存/10GB SSD/500GB流量/1G帶寬

閱讀 916·2021-08-11 11:20
傲游主機(jī)：美國(guó)CN2/香港CN2/德國(guó)CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

閱讀 3372·2021-07-30 15:30
一個(gè)圖片偶爾加載不出來(lái)的事故

閱讀 1759·2019-08-30 15:54

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS學(xué)習(xí)摘要-布局

正常布局流

浮動(dòng)

簡(jiǎn)單HTML示例

2 column layout example

First column

Second column

整列浮動(dòng)

定位技術(shù)

簡(jiǎn)單定位示例

Positioning

相對(duì)定位

絕對(duì)定位

CSS 表格

柔性盒子

網(wǎng)格布局

相關(guān)文章

CSS學(xué)習(xí)摘要-定位

CSS學(xué)習(xí)摘要-盒子模型

CSS學(xué)習(xí)摘要-浮動(dòng)與清除浮動(dòng)

**JS / CSS 常用實(shí)戰(zhàn)代碼片段**

**JS / CSS 常用實(shí)戰(zhàn)代碼片段**

發(fā)表評(píng)論

0條評(píng)論

bigdevil_s

男|高級(jí)講師

TA的文章

1

關(guān)于安裝wireshark中npcap一直無(wú)法安裝以及winpcap無(wú)法安裝解決方法

工資低？裸辭？項(xiàng)目黃？走了多少?gòu)澛分挥形易约褐溃?/a>

Zoom 公布其“1 億美元發(fā)展基金”的首輪投資名單

酷銳云：周年慶第二波，新上香港、美國(guó)GIA直連線路特價(jià)套餐，限量20臺(tái)

HOSTMEM ，$10/年， 1核/512M內(nèi)存/10GB SSD/500GB流量/1G帶寬

傲游主機(jī)：美國(guó)CN2/香港CN2/德國(guó)CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

一個(gè)圖片偶爾加載不出來(lái)的事故

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS學(xué)習(xí)摘要-布局

正常布局流

浮動(dòng)

簡(jiǎn)單HTML示例

2 column layout example

First column

Second column

整列浮動(dòng)

定位技術(shù)

簡(jiǎn)單定位示例

Positioning

相對(duì)定位

絕對(duì)定位

CSS 表格

柔性盒子

網(wǎng)格布局

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！