【目錄】
一、布局相關的標簽
二、盒子模型
三、浮動
四、定位
（有個即刻偷師學藝的方法——
在瀏覽器里，打開一個設計很棒的網頁，滑鼠點擊右鍵，選擇“檢查”，即可查看網頁的HTML+CSS代碼和相對應的布局位置
除錯自己寫的網頁時，也可以使用“檢查”直接修改代碼）
一、布局相關的標簽
二、盒子模型
1、什么是盒子模型
# 就以快遞盒為例
快遞盒與快遞盒之間的距離(標簽與標簽之間的距離 margin外邊距)
盒子的厚度(標簽的邊框 border)
盒子里面的物體到盒子的距離(內容到邊框的距離 padding內邊距)
物體的大小(內容 content)
# 如果你想要調整標簽與標簽之間的距離 你就可以調整margin
# 瀏覽器會自帶8px的margin，一般情況下我們在寫頁面的時候，上來就會先將body的margin去除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; /*上下左右全是0 /*margin: 10px 20px; !* 第一個上下 第二個左右*!*/ /*margin: 10px 20px 30px; !*第一個上 第二個左右 第三個下*!*/ /*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/ } /*p {*/ /* margin-left: 0;*/ /* margin-top: 0;*/ /* margin-right: 0;*/ /* margin-bottom: 0;*/ /*}*/ #d1 { margin-bottom: 50px; } #d2 { margin-top: 20px; /*不疊加 只取大的*/ } #dd { margin: 0 auto; /*只能做到標簽的水平居中*/ } p { border: 3px solid red; /*padding-left: 10px;*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 50px;*/ /*padding: 10px;*/ /*padding: 10px 20px;*/ /*padding: 10px 20px 30px;*/ /*padding: 10px 20px 30px 40px;*/ /*規律和margin一模一樣*/ } </style></head><body><!-- <p style="border: 1px solid red;" id="d1">ppp</p>--><!-- <p style="border: 1px solid orange;" id="d2">ppp</p>--><!--<div style="border: 3px solid red;height: 400px;width: 400px">--><!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>--><!--</div>--><p>ppp</p></body></html>代碼例子
2、盒子模型相關的CSS屬性
（1）布局屬性
display 顯示
| 值 | 描述 || ------------ | ---------------------------------------------------- || none | 此元素不會被顯示， || block | 此元素將顯示為塊級元素，此元素前后會帶有換行符， || inline | 默認，此元素會被顯示為行內元素，元素前后沒有換行符， || inline-block | 行內塊元素，（CSS2.1 新增的值） |float 浮動
| 值 | 描述 || ------- | ---------------------------------------------------- || left | 元素向左浮動， || right | 元素向右浮動， || none | 默認值，元素不浮動，并會顯示在其在文本中出現的位置， || inherit | 規定應該從父元素繼承 float 屬性的值， |clear 清除
| 值 | 描述 || ------- | ------------------------------------- || left | 在左側不允許浮動元素， || right | 在右側不允許浮動元素， || both | 在左右兩側均不允許浮動元素， || none | 默認值，允許浮動元素出現在兩側， || inherit | 規定應該從父元素繼承 clear 屬性的值， |visibility 可見
| 值 | 描述 || -------- | ------------------------------------------------------------ || visible | 默認值，元素是可見的， || hidden | 元素是不可見的， || collapse | 當在表格元素中使用時，此值可洗掉一行或一列，但是它不會影響表格的布局，被行或列占據的空間會留給其他內容使用，
如果此值被用在其他的元素上，會呈現為 "hidden"， || inherit | 規定應該從父元素繼承 visibility 屬性的值， |overflow 溢位
| 值 | 描述 || ------- | -------------------------------------------------------- || visible | 默認值，內容不會被修剪，會呈現在元素框之外， || hidden | 內容會被修剪，并且其余內容是不可見的， || scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容， || auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容， || inherit | 規定應該從父元素繼承 overflow 屬性的值， |overflow-x
overflow-y
（2）尺寸
（3）內補白
（4）外邊距
三、浮動——float
1、什么是浮動
2、設定浮動
<style> body { margin: 0; } #d1 { height: 200px; width: 200px; background-color: red; float: left; /*浮動 浮到空中往左飄*/ } #d2 { height: 200px; width: 200px; background-color: greenyellow; float: right; /*浮動 浮到空中往右飄*/ } </style>3、清除浮動
清除浮動的目的：
阻止行框圍繞浮動框，一般使用行框的clear 屬性（屬性值 ： left 、right、both、none ，表示框的哪一邊不該挨著浮動框）
clear: bothclear: leftclear: right<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } #d1 { border: 3px solid black; } #d2 { height: 100px; width: 100px; background-color: red; float: left; } #d3 { height: 100px; width: 100px; background-color: greenyellow; float: left; } #d4 { /*height: 100px;*/ clear: left; /*該標簽的左邊(地面和空中)不能有浮動的元素*/ } /* 萬金油——前端框架必備CSS */ .clearfix:after { content: ''; display: block; clear:both; } </style></head><body><div id="d1" class="clearfix"> <div id="d2"></div> <div id="d3"></div><!-- <div id="d4"></div>--></div></body></html>解決浮動帶來的影響的例子
清除方法二：
/* 萬金油——前端框架必備CSS ——清除浮動*/ .clearfix:after { content: ''; display: block; clear:both;
四、定位——position (標簽默認的狀態是靜態的（static）)
# 不脫離檔案流
1.相對定位
# 脫離檔案流
1.浮動
2.絕對定位
3.固定定位
1、相對定位—relative
.box { position: relative; top: 10px; left: 20px;}
2、絕對定位— absolute
.box { position: absolute; top: 10px; left: 20px}
3、固定定位— fixed
.box { position: fixed; top: 10px; left: 20px;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } #d1 { height: 100px; width: 100px; background-color: red; left: 50px; /*從左往右 如果是負數 方向則相反*/ top: 50px; /*從上往下 如果是負數 方向則相反*/ /*position: static; !*默認是static無法修改位置*!*/ position: relative; /*相對定位 標簽由static變為relative它的性質就從原來沒有定位的標簽變成了已經定位過的標簽 雖然你哪怕沒有動 但是你的性質也已經改變了 */ } #d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已經定位過了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; top: 100px; } #d4 { position: fixed; /*寫了fixed之后 定位就是依據瀏覽器視窗*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black; } </style></head><body><!-- <div id="d1"></div>--><!--<div id="d2">--><!-- <div id="d3"></div>--><!--</div>--><div style="height: 500px;background-color: red"></div><div style="height: 500px;background-color: greenyellow"></div><div style="height: 500px;background-color: blue"></div><div id="d4">回到頂部</div></body></html>例子
4、空間位置 —屬性 z-index
eg:百度登陸頁面 其實是三層結構
1.最底部是正常內容(z=0) 最遠的
2.黑色的透明區(z=99) 中間層
3.白色的注冊區域(z=100) 離用戶最近
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style></head><body><div>這是最底層的頁面內容</div><div class="cover"></div><div class="modal"> <h1>登陸頁面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>點我點我~</button></div></body></html>z-index
（PS: 瀏覽器的顯示其實是建立在一個立體模型上的，螢屏的上方為 x軸，左邊為y軸，z 軸 則是與用戶的視線相對的，即像 垂直插在螢屏上的一根棍子，z 的值，代表著離用戶視覺的距離，值越大，離用戶越近，顯示的效果就是 最先看到的內容，是z 值最大的標簽部件，）
5、透明度opacity
/* 它不單單可以修改顏色的透明度還同時修改字體的透明度rgba只能影響顏色 （a的值用于設定透明度）而opacity可以修改顏色和字體 */opacity: 0.5;
參考閱讀：
https://www.cnblogs.com/xiaoyuanqujing/articles/11670018.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39109.html
標籤：Html/Css
上一篇：CSS背景圖片的6個有趣的技巧