1.瀏覽器內核及前綴
在CSS中新的屬性標準尚未明確的情況下，各瀏覽器廠商對新屬性的支持情況也不相同，這個階段會對屬性加廠商前綴進行區分，
根據不同的瀏覽器內核，CSS前綴有所不同，最基本的瀏覽器內核有四種，其他內核都是基于此四種進行再研發的，
① Gecko內核，前綴為“-moz-”，火狐瀏覽器
② Webkit內核，前綴是“-webkit-”，也叫谷歌內核，Chrome瀏覽器最先開發使用，Safari瀏覽器也使用該內核
目前，國內很多瀏覽器也使用了webkit內核，如360極速、世界之窗、獵豹等
③ Trident內核，前綴為“-ms-”，也稱 IE內核
④ Presto內核，前綴是“-o-”，目前只有Opera使用
代碼實體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS瀏覽器內核</title>
<style>
div {
width: 500px;
height: 500px;
background-color:orange;
border: 36px solid rgba(255,255,255,0.5);
margin: 60px auto;
padding: 50px;
font-size: 200px;
font-weight: bolder;
color: rgba(255,255,255,0.5);
text-align: center;
-webkit-background-clip: content-box;
/*屬性值：
border-box，從邊框開始實作背景
padding-box，從padding開始實作背景
content-box，從內容開始實作背景
text，從文本開始實作背景
為適應不同瀏覽器，需要同時設定帶有不同瀏覽器內核前綴的屬性
*/
}
</style>
</head>
<body>
<div>馬可波羅</div>
</body>
</html>
2.定位，定義元素相對于正常位置應該出現的位置
分類：
⑴ 普通流定位，Normal
⑵ 浮動定位
將元素排除在普通流之外，浮動元素不在頁面中占據空間，可以放置在包含框的左邊或者右邊，浮動元素依舊位于包含框內
浮動元素框可以向左或向右移動，直到外邊緣碰到包含框或另一個浮動框的邊框
浮動元素外邊緣不會超過其父元素的內邊緣
浮動元素不會互相重疊、不會上下浮動
行內元素浮動后會變為塊級元素
語法：float: none / left / right;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮動定位</title>
<style>
div {
width: 200px;
height: 200px;
}
div.one{ background-color: pink; float: right;}
div.two{ background-color: hotpink;}
div.three{ background-color: deeppink;}
</style>
</head>
<body>
<div align="center">1</div>
<div align="center">2</div>
<div align="center">3</div>
</body>
</html>
清除浮動，是在使用了浮動之后必不可少的，為了網站布局的效果清除浮動也變的非常麻煩
屬性 clear，屬性值：left（清除左浮動）、right（清除右浮動）、both（全部清除）
常用清除方式：① 結尾處加空div標簽 clear: both，或在下一個元素前加 clear:both ② 浮動元素的父元素定義偽元素“ ::after” ③ 浮動元素的父元素定義“overflow: hidden” ④ 浮動元素的父元素定高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮動定位</title>
<style>
div.parent{ border:2px solid red; overflow: hidden} /*第三種方式：overflow:hidden 或 display:inline-block 或 display:table-cell */
div.one{ width: 150px; height: 150px; background-color: pink; float: left;}
div.two{ width: 150px; height: 150px; background-color: hotpink; float: left;}
div.three{ width: 150px; height: 150px; background-color: deeppink; float: left;}
/*div.clear{ clear: both;} 第一種方式*/
/*div.parent::after{
content: "";
display: block;
clear: both;
} 第二種方式*/
</style>
</head>
<body>
<div >
<div align="center">1</div>
<div align="center">2</div>
<!-- <div ></div> 第一種方式-->
</div>
<div align="center">3</div>
</body>
</html>
⑶ 相對定位
⑷ 絕對定位
⑸ 固定定位
3.display屬性
根據CSS規范，每一個網頁元素都有一個display屬性，用于確定該元素的型別
每一個元素都有默認的display屬性值，比如 div的默認display屬性值為“ block”（塊級元素），而 span的默認display屬性值為“ inline”（行內元素）
塊級元素與行內元素是可以轉換的，即 display屬性值可以設定修改
display常用屬性值：
none，隱藏物件，且不占據空間
inline，指定物件為行內元素（行內元素）
block，指定物件為塊級元素
inline-block，指定物件為行內塊級元素，可以設定寬高、margin、padding，但會識別代碼之間的空白！
table-cell，指定物件作為表格的單元格
flex，指定物件為彈性盒子
另外，visibility:hidden和 opacity:0 也會隱藏物件，但仍然占據物理空間
4.position定位，指定一個元素定位方法的型別
屬性值：① static，默認值，元素顯示在正常的內容流中，忽略top、bottom、left、right偏移量及z-index宣告，一般用于去除定位
② relative，生成相對定位的元素，相對于其正常位置進行定位，因此，left:20px會向元素的left位置添加20像素，但其正常位置依然占據
③ fixed，生成固定定位的元素，一旦生成其原始位置不再占據，且不隨瀏覽器界面滾動而改變，元素的位置通過 top、right、bottom、left屬性值進行規定
④ absolute，生成絕對定位的元素，相對于瀏覽器視窗進行偏移，一旦發生偏移，原正常位置不再占有，元素的位置通過 top、right、bottom、left屬性值進行規定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
left: 50px;
top: 30px;
/*position: absolute;*/
/*position: relative;*/
position: fixed;
}
pre{font-size: 130px;}
</style>
</head>
<body>
<div></div>
<pre>文本內容</pre>
<pre>文本內容</pre>
<pre>文本內容</pre>
<pre>文本內容</pre>
<pre>文本內容</pre>
</body>
</html>
5.常用居中方式小結
文本內容水平居中，text-align:center
行內文字垂直居中，line-height=height
盒子水平居中，margin:0px center
子元素在父元素內居中，① 父元素定義為彈性盒子，display:flex; align-items:center; justify-content:center;
② 定義父元素為單元格，display:table-cell; vertical-align:middle; 子元素中定義水平居中，margin: 0 auto;
③ 定義父元素為相對位置，position:relative; 定義子元素為絕對位置，position:absolute; left:25%; top:25%;
6.z-index堆疊順序
一旦修改了元素的定位方式，在元素可能發生堆疊，使用 z-index屬性可以控制元素重疊的順序
z-index屬性：
① z-index僅能在定位的元素上生效
② z-index屬性值為數值，數值越大表示堆疊越高，即離用戶越近
③ 可以設定為負值，表示離用戶更遠，一般不建議設定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
left: 100px;
top: 100px;
/*position: absolute;*/
position: relative;
/*position: fixed;*/
}
div:first-child{
background-color: deeppink;
left: 0px;
top: 0px;
z-index: 2;
}
div:last-child{
background-color: darkorange;
left: 200px;
top: 200px;
z-index: 3;
}
div:nth-child(2){
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2365.html
標籤：Html/Css
上一篇：SharePoint Online 創建一級審批流（二）
下一篇：CSS選擇器區別