說在前面
CSS基礎(chǔ)教程系列已經(jīng)結(jié)束，接下來就是中級(jí)教程，讓我們跟上腳步，繼續(xù)努力吧！
并且最近臨近期末考試，后面十天休刊…
display
display 屬性是用于控制布局的最重要的 CSS 屬性
display 屬性規(guī)定是否/如何顯示元素
HTML 元素都有一個(gè)默認(rèn)的 display 值
具體取決于它的元素類型
大多數(shù)元素的默認(rèn) display 值為 block 或 inline
block element 塊級(jí)元素
塊級(jí)元素總是從新行開始，并占據(jù)可用的全部寬度
盡可能向左和向右伸展
例如:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
inline element 行內(nèi)元素
內(nèi)聯(lián)元素不從新行開始，僅占用所需的寬度
例如:
<span>
<a>
<img>
display: none; 通常同JavaScript一同使用以隱藏和顯示元素，而無需刪除和重新創(chuàng)建它們
每個(gè)元素都有一個(gè)默認(rèn)display的值，但是可以覆蓋
對(duì)于使頁面以特定方式顯示同時(shí)仍遵循 Web 標(biāo)準(zhǔn)很有用
一個(gè)常見的例子是為實(shí)現(xiàn)水平菜單而生成行內(nèi)的 <li> 元素
li {
display: inline;
}
設(shè)置元素的 display 屬性僅會(huì)更改元素的顯示方式，而不會(huì)更改元素的種類
因此帶有 display: block; 的行內(nèi)元素不允許在其中包含其他塊元素
隱藏元素 - display:none 還是 visibility:hidden
通過將 display 屬性設(shè)置為 none 可以隱藏元素
該元素將被隱藏，并且頁面將顯示為好像該元素不在其中
visibility:hidden; 也可以隱藏元素
但是該元素仍將占用與之前相同的空間
元素將被隱藏，但仍會(huì)影響布局
利用CSS和JavaScript實(shí)現(xiàn)單擊顯示元素
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: solid 1px hotpink;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">點(diǎn)擊顯示面板</p>
<div id="panel">
<p>面板包括一個(gè)div元素，默認(rèn)情況下元素隱藏 display:none; </p>
<p>其使用CSS進(jìn)行樣式的設(shè)置，使用JS來顯示 display:block; </p>
<p>工作原理是帶有class="flip"的p元素?fù)碛衞nclick屬性，當(dāng)用戶點(diǎn)擊p元素（塊級(jí)元素）時(shí)，將會(huì)執(zhí)行名為 myFunction()的函數(shù)，該函數(shù)將id="panel"的div樣式從 display: none 改為 display: block</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
max-width
使用 width、max-width 和 margin: auto
像前面所述，塊級(jí)元素始終占用可用的全部寬度（盡可能向左和向右伸展）
設(shè)置塊級(jí)元素的 width 將防止其延伸到其容器的邊緣
然后可以將外邊距設(shè)置為 auto 以將元素在其容器中水平居中
元素將占用指定的寬度，剩余空間將在兩個(gè)外邊距之間平均分配
當(dāng)瀏覽器窗口小于元素的寬度時(shí)，上面這個(gè) <div> 會(huì)發(fā)生問題
瀏覽器會(huì)將水平滾動(dòng)條添加到頁面
在這種情況下，使用 max-width 可以改善瀏覽器對(duì)小窗口的處理
為了使網(wǎng)站在小型設(shè)備上可用，這一點(diǎn)很重要
ex1的寬度是固定的，不會(huì)隨著瀏覽器窗口變化而變化，而是部分長度被覆蓋
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
ex2的寬度最大是500px，并且會(huì)隨著窗口縮小而縮小
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
position
position 屬性規(guī)定應(yīng)用于元素的定位方法的類型
static、relative、fixed、absolute 或 sticky
元素其實(shí)是使用 top、bottom、left 和 right 屬性定位的
但是除非首先設(shè)置了 position 屬性，否則這些屬性將不起作用
根據(jù)不同的 position 值，它們的工作方式也不同文章來源：http://www.zghlxwxcb.cn/news/detail-476030.html
/* position: static;
HTML 元素默認(rèn)情況下的定位方式為 static（靜態(tài)）
靜態(tài)定位的元素不受 top、bottom、left 和 right 屬性的影響
position: static 的元素不會(huì)以任何特殊方式定位
始終根據(jù)頁面的正常流進(jìn)行定位
*/
div.static {
position: static;
border: 3px solid #73AD21;
}
/*
position: relative; 的元素相對(duì)于其正常位置進(jìn)行定位
設(shè)置相對(duì)定位的元素的 top、right、bottom 和 left 屬性將導(dǎo)致其偏離其正常位置進(jìn)行調(diào)整
不會(huì)對(duì)其余內(nèi)容進(jìn)行調(diào)整來適應(yīng)元素留下的任何空間
*/
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
/*
position: fixed; 的元素是相對(duì)于視口定位的，這意味著即使?jié)L動(dòng)頁面也始終位于同一位置
top、right、bottom 和 left 屬性用于定位此元素
固定定位的元素不會(huì)在頁面中通常應(yīng)放置的位置上留出空隙
*/
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
/*
position: absolute; 的元素相對(duì)于最近的定位祖先元素進(jìn)行定位（而不是相對(duì)于視口定位，如 fixed）
然而，如果絕對(duì)定位的元素沒有祖先，將使用文檔主體（body），并隨頁面滾動(dòng)一起移動(dòng)
“被定位的”元素是其位置除 static 以外的任何元素
*/
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
/*
position: sticky; 的元素根據(jù)用戶的滾動(dòng)位置進(jìn)行定位
粘性元素根據(jù)滾動(dòng)位置在相對(duì)（relative）和固定（fixed）之間切換。起先它會(huì)被相對(duì)定位，直到在視口中遇到給定的偏移位置為止 - 然后將其“粘貼”在適當(dāng)?shù)奈恢茫ū热?position:fixed）
Safari 需要 -webkit- 前綴，舉例如下:
*/
div.sticky {
position: -webkit-sticky; /* Safari的適配 加上為好 不影響其他瀏覽器的使用*/
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
/*
重疊元素
在對(duì)元素進(jìn)行定位時(shí)可以與其他元素重疊
z-index 屬性指定元素的堆棧順序（哪個(gè)元素應(yīng)放置在其他元素的前面或后面）
元素可以設(shè)置正或負(fù)的堆疊順序
*/
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
/*
具有較高堆疊順序的元素始終位于具有較低堆疊順序的元素之前
如果兩個(gè)定位的元素重疊而未指定 z-index，則位于 HTML 代碼中最后的元素將顯示在頂部
*/
定位圖像文本
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
<div class="topleft">Top Left</div>
<!-- 兩個(gè)定位的元素重疊而未指定z-index時(shí)，html代碼中后面的元素顯示在上面 -->
</div>
</body>
</html>
參考更高級(jí)的更詳細(xì)的定位技巧文章來源地址http://www.zghlxwxcb.cn/news/detail-476030.html
到了這里，關(guān)于【CSS 08】display 控制布局 塊級(jí)元素 行內(nèi)元素 隱藏元素 結(jié)合JS 最大寬度 瀏覽器窗口 定位 position z-index 堆疊的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
