1.CSS邊框 2.display屬性 3.css盒子模型 4.浮動float 5.overflow溢出屬性 ：設置當元素的內容溢出其區域時發生的事情。 圓形頭像示例： 總結一點: width寬度設置的時候,直接可以寫100px或30%。30%這種百分比的寫法,它的寬度按照父級標簽的寬度 ...
1.CSS邊框
邊框屬性：
1.border-width 寬度
2.border-style 樣式
none 無邊框
dotted 點狀虛線邊框
dashed 矩形虛線邊框
solid 實線邊框
3.border-color 顏色
示例：
div{
width: 200px;
height: 200px;
統一設置邊框：
/*border-style: solid;*/ 邊框樣式
/*border-color: red;*/ 邊框顏色
/*border-width: 10px;*/ 邊框寬度
border:10px solid red; 簡寫方式
單獨為某一個邊框設置樣式：
border-right-width: 2px;
border-right-style: dotted;
border-right-color: greenyellow;
border-right: 2px dotted greenyellow; 單獨設置邊框的簡寫方式
border-left-style: solid;
border-right-style: dotted;
border-top-style: dashed;
border-bottom-style: none;
}
控制圓角:
用border-radius這個屬性能實現圓角邊框的效果
將border-radius設置為長或高的一半即可得到一個圓形,
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%; 50%-100%都是圓形2.display屬性
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline; /*將標簽設置為內斂標簽，預設寬度為內容寬度，不可設置寬高，同行顯示*/
display: inline-block; /*將標簽設置為同時具備內斂和塊級標簽的一些特性,比如 1.可以設置高度寬度 2.預設寬度是內容寬度 3.但是不獨占一行，同行顯示 */
display: none; /*隱藏標簽 ,並且不占用自己之前的空間*/
}
span{
border: 2px solid blue;
}
.c1{
width: 200px;
height: 200px;
display: inline-block;
display: block; /* 將內斂標簽設置為塊級標簽，預設寬度為父元素寬度，可設置寬高，換行顯示*/
display: none; /* 隱藏標簽 ,並且不占用自己之前的空間*/
visibility: hidden; /* 隱藏標簽,但是標簽還占用原來的空間 */
}
<div>
離離原上草，一歲一枯榮！
</div>
<span class="c1">鷹擊長空</span>
<span class="c2">魚翔淺底</span>
值 意義
display:"none" HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用。
display:"block" 預設占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。
display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin- bottom和float屬性都不會有什麼影響。
display:"inline-block" 使元素同時具有行內元素和塊級元素的特點。
隱藏標簽：
visibility: hidden; /* 隱藏標簽,但是標簽還占用原來的空間 */
display: none; /* 隱藏標簽 ,並且不占用自己之前的空間 */
註意一點：塊級標簽不管你設置的寬度是多少，都會占用你整個頁面寬度的空間3.css盒子模型
在css裡面，每個標簽可以稱為一個盒子模型：
1.margin(外邊距): 外邊距：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
margin 外邊距：
margin-top 距離上面標簽的距離
margin-bottom 距離下麵標簽的距離
margin-left 距離左邊標簽的距離
margin-rigth 距離右邊標簽的距離
兩個簡寫的方式：
margin: 10px 20px;
margin: 10px 5px 6px 3px;推薦簡寫方式
常見居中：
.mycenter {
margin: 0 auto; #上下0像素，左右自適應，居中的效果
}
在寫css樣式的時候，都會先寫一個
body{
margin:0;
}
即body的上下左右的margin都設置為0。
2.padding(內邊距): 內邊距：用於控制內容與邊框之間的距離；
padding的常用簡寫方式：
提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序作用於四邊；
padding: 10px 20px 5px 2px; 推薦簡寫方式，順序：上右下左
3.border(邊框寬度): 圍繞在內邊距和內容外的邊框。
4.content(內容區域): 盒子的內容，顯示文本和圖像。
示例：
div{
width: 200px;
height: 100px;
border: 2px solid deeppink;
/*padding-top: 10px;*/
/*padding-left: 5px;*/
/*padding-right: 2px;*/
/*padding-bottom: 4px;*/
padding: 10px 20px; /*10px上下內邊距 ,20px左右內邊距 *!*/
padding: 10px 20px 5px 2px; 簡寫方式，順序：上右下左
padding: 10px 20px 5px 0; 數值為0時不寫單位
}
.d1 {
width: 200px;
height: 100px;
border: 2px solid deeppink;
margin-bottom: 200px;
}
.d2{
margin-top: 100px;
border: 2px solid blue;
}
.c1{
margin-left: 100px;
margin-right: 200px;
}
.c2{
margin-left: 100px;
<div class="d1">
勸君更進你一杯酒，西出陽關無故人！
</div>
<div class="d2">
<span class="c1">
感時花濺淚
</span>
<span class="c2">
恨別鳥驚心
</span>
</div>
兩個情況:
1.垂直方向,如果上下兩個標簽都設置了margin外邊距,取兩者的最大的值。（上面標簽的margin-bottom: 200px;下麵標簽的margin-top: 100px;）
2.水平方法,如果兩個標簽都設置了margin外邊距,取兩者的邊距之和。（左邊標簽的 margin-right: 200px; 右邊標簽的margin-left: 100px;）
4.浮動float
在 CSS 中，任何元素都可以浮動。預設寬度為內容寬度，脫離文檔流，向指定的方向一直移動
佈局用的,設置了浮動的標簽會脫離正常文檔流,會造成父級標簽塌陷的問題
關於浮動的兩個特點：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
三種取值：
left：向左浮動
right：向右浮動
none：預設值，不浮動
示例：
.c1{
background-color: red;
height: 100px;
width: 100px;
float: left;
}
.c2{
background-color: blue;
height: 100px;
width: 100px;
float: right;
}
<div class="cc clearfix">
<span>xxx</span>
<div class="c1"></div>
<div class="c2"></div>
</div>
浮動會造成父級標簽塌陷問題
解決方法:
1 父級標簽設置高度
.cc{
height: 100px;
}
2 偽元素選擇器清除浮動,給父級標簽加上下麵這個類值
.clearfix:after{
content: '';
display: block;
clear: both; 清除浮動clear
}
父級標簽class='clearfix'
clear的值和描述， clear屬性規定元素的哪一側不允許其他浮動元素。
值 描述
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 預設值。允許浮動元素出現在兩側。5.overflow溢出屬性 ：設置當元素的內容溢出其區域時發生的事情。
.c1{
width: 200px;
height: 200px;
border: 1px solid red;
overflow: hidden;
overflow: auto;
}
<div class="c1">
漢皇重色思傾國，御宇多年求不得。楊家有女初長成，養在深閨人未識。天生麗質難自棄，一朝選在君王側。回眸一笑百媚生，六宮粉黛無顏色。
春寒賜浴華清池，溫泉水滑洗凝脂。侍兒扶起嬌無力，始是新承恩澤時。雲鬢花顏金步搖，芙蓉帳暖度春宵。春宵苦短日高起，從此君王不早朝。
</div>
值 描述
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
overflow（水平和垂直均設置）
overflow-x（設置水平方向，只出現x軸的滾動條）
overflow-y（設置垂直方向，只出現y軸的滾動條） 圓形頭像示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圓形的頭像示例</title>
<style>
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;#圓形的邊框
overflow: hidden; #溢出的內容隱藏
}
.header-img>img {
width: 100%; #讓img標簽按照外層div標簽的寬度來顯示 ，相當於將圖片的大小設置為父級標簽的大小來顯示了
}
</style>
</head>
<body>
<div class="header-img">
<img src="meinv.png" alt="">
</div>
</body>
</html> 總結一點:
width寬度設置的時候,直接可以寫100px或30%。30%這種百分比的寫法,它的寬度按照父級標簽的寬度的百分比來計算.
6.定位position:相對定位和絕對定位
1.position:static;
預設就是它
2.position:relative;
相對定位,保留原來位置的空間,相對自己原來的位置移動，參照物為元素本身
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置左上角為參照物。使用場景：絕對定位元素的參照物
3.position:absolute;
絕對定位,不保留原來位置的空間,按照父級標簽或者祖先標簽中有設置了position為相對定位的標簽,如果有,按照他的位置移動,如果沒有按照body移動
預設寬度為內容寬度，脫離文檔流，參照物為第一個定位祖先/根元素
設置為絕對定位的元素框從文檔流完全刪除，也會有父級標簽塌陷的問題，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，
那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，
而不論原來它在正常流中生成何種類型的框。如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。
4.position:fixed;
固定定位,根據瀏覽器視窗位置來定位。預設寬度為內容寬度，脫離文檔流，參照物為視窗。
不管頁面怎麼動，都在整個屏幕的某個位置。
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。
註意： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。
但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: blue;
height: 100px;
width: 100px;
相對定位：
/*position: relative; !*相對定位,保留原來的空間位置,相對自己原來的位置移動,以左上角為基準*!*/
/*top: 20px; !*往下移20px,距離原來位置的上邊框20px *!*/
/*top: -20px; !*往上移20px,距離原來位置的上邊框20px *!*/
/*left: 20px; !*往右移20px,距離原來位置的左邊框20px *!*/
/*right: 20px;!*往左移20px,距離原來位置的右邊框20px *!*/
/*bottom: 20px;!*往上移20px,距離原來位置的下邊框20px *!*/
/*bottom: -20px;!*往下移20px,距離原來位置的下邊框20px *!*/
絕對定位：
position: absolute; /* 絕對定位,不保留自己原來的位置,按照父級標簽或者祖先級標簽..中設置了position為 relative的標簽的位置進行移動,如果一直找不到設置了設個屬性的標簽,那麼按照body標簽來移動 */
top: 20px;
left: 20px;
}
.c3{
background-color: green;
height: 100px;
width: 100px;
}
.ccc{
height: 100px;
width: 200px;
background-color: purple;
}
#子元素.c2就會以父級.cc的左上角為原始點進行定位
.cc{
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="ccc"></div>
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>回到頂部示例:position為fixed固定定位,通過相對於瀏覽器視窗的距離來設置位置.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 500px;
width: 200px;
}
.c2{
background-color: green;
height: 500px;
width: 200px;
}
.s1{
position: fixed; /*固定定位,位置是根據瀏覽器視窗來的*/
left: 20px;
bottom: 20px;
background-color: blue;
height: 40px;
width: 80px;
text-align: center;/*文本的水平對齊方式為居中對齊*/
line-height: 40px; /* line-height屬性設置行高。和標簽高度一致,標簽內容就垂直居中 */
}
/*a標簽的字體顏色等設置必須選中a標簽才行*/
.s1 a{
color: white;
text-decoration: none;/*去掉a標簽預設的自劃線*/
}
</style>
</head>
<body>
<!--<a name="top">這裡是頂部,親！</a>--> <!-- 錨點 -->
<div id="top">這是頂部</div> <!-- 錨點 -->
<div class="c1"></div>
<div class="c2"></div>
<span class="s1">
<a href="#top">回到頂部</a> <!-- 觸發錨點 -->
</span>
</body>
</html>
錨點設置的兩種方式：
1. <a name="top">這裡是頂部,親！</a> <!-- 錨點 -->
2. <div id="top">這是頂部</div> <!-- 錨點 -->
觸發錨點的a標簽寫法：
<a href="#top">回到頂部</a> <!-- 觸發錨點 -->7.z-index控制層級：設置元素的堆疊順序
模態對話框示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.mode{
position: fixed;
left: 50%; /* 按照視窗寬度的50%來移動 */
top:50%; /* 按照視窗高度的50%來移動 */
#設置了left：50%和top：50%，你這個標簽的左上角相對於頁面的左面是50%，上面是50%，所以我們還要移動視窗，往左移動標簽寬度的一半，往上移動高度的一半就行了。
height: 400px;
width: 300px;
background-color: white;
z-index: 100; /* 數值越大越在上層顯示 */
margin-left: -150px;/* 允許使用負值 */
margin-top: -200px;
}
</style>
</head>
<body>
<div>
<h1>
接天蓮葉無窮碧，映日荷花別樣紅<
</h1>
</div>
<div class="mode">
</div>
<div class="shadow">
</div>
</body>
</html>
z-index 設置對象的層疊順序。一般用在模態對話框上
1. z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，z-index的值誰大誰在上面。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
2. 只有定位了的元素，才能有z-index,（Z-index 僅能在定位元素上奏效），不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素float不能使用z-index
3. z-index值沒有單位，就是一個正整數，預設的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。
4. 從父現象：父親慫了，兒子再牛逼也沒用
5.元素可擁有負的 z-index 屬性值。
6.該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。8.opacity透明度
用來定義透明效果。取值範圍是0~1，0是完全透明，1是完全不透明。
.c1{
background-color: rgba(255,0,0,0.3); /* 背景顏色或者字體顏色等單獨的透明度 */
height: 100px;
width: 100px;
}
.c2{
background-color: rgb(255,0,0);
height: 100px;
width: 100px;
opacity: 0.3; /* 整個標簽透明度 */
}
<div class="c1">
你好
</div>
<div class="c2">
我好
</div>
