盒子模型、頁面布局與規劃
盒子模型原理
標準檔案流
盒子浮動
盒子塌陷
盒子定位
盒子模型原理
盒子模型概述
每個盒子都包含：邊界（margin），邊框（border），填充（padding）和內容（content）
邊界：元素邊框之外所占據的尺寸
邊框：border
填充：內容與邊距的距離
內容：標簽中的文本或嵌入標簽，用width，height設定尺寸
盒子的大小
盒子的大小=內容+填充+邊框
盒子的占據空間=內容+填充+邊框+邊距
標準檔案流
概述
1、行內元素：
<h1></h1>~<h6></h6>
<p></p>
<hr />
<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<table></table>
<div></div>
<form></form>
...
2、塊狀元素：
<img />
<span></span>
<br />
<a></a>
...
區別：
排列方式不同：行內元素從左到右依次排列，塊狀元素從上到下 >
內嵌元素不同：塊狀元素可包含行內元素，行內元素只能包含文本或其他行內元素 >
屬性設定不同：行內元素設定height和width無效，但可設定line—height，magin和padding設定上下方向無效
display屬性：頁面元素隱藏方式，隱藏以后瀏覽器消除元素，不占螢屏空間
1、隱藏HTML元素
<style type="text/css">
便簽名|類名{
display: none; 隱藏
display:block; 塊狀顯示
display:inline; 行狀顯示
}
</style>
2、隱藏div
<div style="display: none;"></div>
<div style="display: display:block ;"></div>
<div style="display: inline;"></div>
visibility屬性：頁面元素隱藏顯示方式，雖然被隱藏，但是元素還占有那塊空間
1、顯示HTML元素
<style type="text/css">
便簽名|類名{
visibility: hidden; 隱藏
visibility: visible; 顯示
}
</style>
2、顯示div
<div style="visibility: hidden; "></div>
<div style="visibility: visible;"></div>
盒子浮動
float：浮動定位方向
<style type="text/css">
#id{
float: none;默認
float: left;左浮動
float: right;右浮動
}
</style>
浮動元素的特征：
- 脫離標準檔案流，不占據頁面空間
- 浮動元素顯示在父元素的左側或右側
- 若存在浮動元素，則顯示在浮動元素之后
- 浮動元素大小默認由內容決定，但可用width，height設定
盒子塌陷
1、塌陷原因:
- 一個盒子使用了float屬性，導致父容器被撐開
- 若一個元素的高度為自適應且該元素中的所有子元素均為浮動元素，此時該元素的高度為0，產生塌陷
2、塌陷影響:
- 背景不能顯示
- 邊框不能撐開
- margin，padding設定的值不能正確顯示
3、解決方法
- 對父元素設定合適的高度
- clear：both；清楚浮動塌陷
- 父級div定義 overflow: hidden;
盒子定位
1. 靜態定位
position：static
2.相對定位
position: relative;
3.固定定位
position: fixed;
4.絕對定位
position: absolute;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248114.html
標籤：其他