css里，怎樣使多個(gè)div元素并列一行？

想要讓多個(gè)div元素并列成一行，可以將div元素的float屬性設(shè)置為left。但這樣做還不夠，應(yīng)為當(dāng)瀏

創(chuàng)新互聯(lián)公司，為您提供重慶網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)成都邊坡防護(hù)網(wǎng)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

覽器的寬度小于這幾個(gè)div的寬度總和時(shí)還是會(huì)有div會(huì)跑到底部，所以需要將想要并列的div元素套

在另外一個(gè)大div里，當(dāng)然，這個(gè)大div寬度要大于并排div寬度的總和。這樣子，就可以做到怎么變

換窗口大小時(shí)div都不會(huì)跑到下面了。

以下是具體演示步驟：

1、打開一個(gè)HTML文件編輯器。先在里面輸入HTML的基本元素。

2、在body標(biāo)簽里添加一個(gè)大div來容納并列的div。

3、在大div里添加想要并列的div元素，并在style屬性里添加float：left即可

4、運(yùn)行效果。

4. 如何用css約束一個(gè)層不可見？

style

.cheshi1?{?width:500px;?height:100px;?float:left;?display:none;}

/style

div?class="cheshi1"

2222222222

/div

如上例：這個(gè)div是不會(huì)顯示的，其中display:none;是不可見的關(guān)鍵。

這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于 HTML 等文檔類型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。

可能的值

值 ? ? ? ? ? ? ??描述

none ? ?此元素不會(huì)被顯示。 ?

block ? ?此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。 ?

inline ? ?默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。 ?

inline-block ? ?行內(nèi)塊元素。（CSS2.1 新增的值） ?

list-item ? ?此元素會(huì)作為列表顯示。 ?

run-in ? ?此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。 ?

compact ? ?CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 ?

marker ? ?CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 ?

table ? ?此元素會(huì)作為塊級(jí)表格來顯示（類似 table），表格前后帶有換行符。 ?

inline-table ? ?此元素會(huì)作為內(nèi)聯(lián)表格來顯示（類似 table），表格前后沒有換行符。 ?

table-row-group ? ?此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 tbody）。 ?

table-header-group ? ?此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 thead）。 ?

table-footer-group ? ?此元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示（類似 tfoot）。 ?

table-row ? ?此元素會(huì)作為一個(gè)表格行顯示（類似 tr）。 ?

table-column-group ? ?此元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示（類似 colgroup）。 ?

table-column ? ?此元素會(huì)作為一個(gè)單元格列顯示（類似 col） ?

table-cell ? ?此元素會(huì)作為一個(gè)表格單元格顯示（類似 td 和 th） ?

table-caption ? ?此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 caption） ?

inherit ? ?規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 ?

css樣式布局及rem用法梳理

視口（viewport）是用來約束網(wǎng)頁中最頂級(jí)塊元素的，即它決定了網(wǎng)頁的大小，網(wǎng)頁是先在視口上渲染，然后再通過視口放回到瀏覽器窗口上的，網(wǎng)頁的渲染過程如下：

pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁是1：1的放到瀏覽器窗口上，而移動(dòng)端視口就有點(diǎn)特殊，移動(dòng)端視口的寬度是比移動(dòng)端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁是視口上渲染完之后，為了能在移動(dòng)端屏幕上顯示整個(gè)網(wǎng)頁，整個(gè)視口會(huì)整體縮放到屏幕的寬度，這樣，網(wǎng)頁看上去就整體縮放

具體如何設(shè)置視口以及禁止視口頁面縮放可以自行百度

（主要針對(duì)移動(dòng)端以及pc端網(wǎng)頁需要實(shí)現(xiàn)等比放大縮小頁面效果）

大概有以下幾種

1、流體布局

流體布局其實(shí)就是寬度用百分比，高度用固定值的布局方式，寬度通過百分比來適配不同寬度的屏幕。

為了適配手機(jī)端不同尺寸的屏幕，我們?cè)诙x元素寬度的時(shí)候可以寫百分比，百分比是相對(duì)于屏幕的寬度，所有寬度就可以做到自適應(yīng)，而在高度方向，由于網(wǎng)頁的高度是不定的，所以我們可以把高度寫成固定的值(px),這種布局方式叫做流體布局。

注意兩個(gè)概念

2、彈性盒模型布局flex

這種布局方式是通過css3新增的一些輔助布局的樣式屬性來制作布局的方式。

3、rem布局

rem是一種相對(duì)長(zhǎng)度單位，通過這個(gè)長(zhǎng)度單位可以實(shí)現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。

4、響應(yīng)式布局 （媒體查詢）

通過樣式動(dòng)態(tài)查詢屏幕的寬度，動(dòng)態(tài)切換樣式來適配不同寬度屏幕的布局方式。

Bootstrap是最典型的一種

待補(bǔ)充

實(shí)際開發(fā)中，pc端頁面需要實(shí)現(xiàn)響應(yīng)式等比縮放（即自適應(yīng)），使用rem+彈性布局是比較現(xiàn)實(shí)及理想的解決方式

移動(dòng)端可以使用rem布局，也可以使用px實(shí)現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設(shè)計(jì)要求的

css3規(guī)定：1rem的大小就是根元素html的font-size的值。

rem其實(shí)是一個(gè)單位 ，是個(gè)相對(duì)單位 root em。rem就是root（根元素的大?。┫鄬?duì)于html元素的字體大小的單位。

rem布局的原理

就是根據(jù)一個(gè)html根元素來控制，網(wǎng)頁的布局，實(shí)現(xiàn)類似于自適應(yīng)等比例的縮放的布局。

rem優(yōu)勢(shì)

通過修改html文字的大小，來改變頁面中元素的大小，實(shí)現(xiàn)了頁面的整體控制

rem的作用

通過設(shè)置 根元素html的font-size的大小，來控制整個(gè)html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動(dòng)設(shè)備的寬度大小來實(shí)現(xiàn)自適應(yīng)，不同的設(shè)備都展示一致的頁面效果。

簡(jiǎn)單用法

vscode中安裝cssrem插件，通過這個(gè)插件可以自動(dòng)計(jì)算rem數(shù)值。

具體設(shè)置如下

注意:設(shè)置后 vscode軟件需要重啟 否則計(jì)算的rem值會(huì)出錯(cuò)

待補(bǔ)充

可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，

待補(bǔ)充