[CSS屬性設置，盒子模型，網頁布局]
CSS屬性設置
1. 寬和高
width：屬性可以為元素設置寬度.
height：屬性可以為元素設置高度.
塊級標簽的寬度不修改的情況下默認占瀏覽器的一整行，塊級標簽的高度也是取決於標簽內文本的高度，但是可以通過CSS設置
行內標簽的寬度和高度都是由內容來決定的，行內標簽是無法設置長寬的，即使設置了也無效
2. 顏色屬性
color
- hex（十六進制色：color: #FFFF00 --> 縮寫：#FF0）
- rgb（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
- rgba（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
- hsl（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
- hsla（和HSL相似，A表示Alpha透明度，取值0~1之間。）
transparent
- 全透明，使用方式：color: transparent;
opacity
- 元素的透明度，語法：opacity: 0.5;
- 屬性值在0.0到1.0范圍內，0表示透明，1表示不透明。
- filter濾鏡屬性（只適用於早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。
3. 字體屬性
font-style: 用於規定斜體字體
- normal：字體正常顯示
- italic：字體斜體顯示
- oblique：字體傾斜顯示
font-weight: 設置字體的粗細
- normal：默認
- bold：粗體
- bolder：加粗，相當於和標簽
- lighter：更細
- 100 ~ 900：整百（設置具體更細400=normal，700=bold）
- inherit：繼承父元素字體的粗細值
font-size: 設置字體的大小
- medium：默認值
-
"可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large -
相對於父標簽中字體的尺寸進行調節。可選參數值：smaller、 larger -
百分比指定文字大小。 -
用長度值指定文字大小，不允許負值。
font-family：字體名稱
- 使用逗號隔開多種字體（優先級從前向后，如果系統中沒有找到當前字體，則往后面尋找）
font：簡寫屬性
- 語法：font：字體大小/行高 字體;（字體要在最后）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字體屬性</title>
<style>
.p1 {
font-weight: bold; /*文字粗細：粗體*/
font-style: italic; /*文字風格：傾斜（默認正常）*/
font-size:20px; /*文字大小：大小值*/
font-family: "宋體"; /*文字字體：宋體*/
/*一次性設置縮寫格式：字體屬性簡寫*/
font: bolder italic 20px "宋體";
}
</style>
</head>
<body>
<p class="p1">哈哈哈哈哈哈</p>
<p>哈哈哈哈哈2</p>
<p>哈哈哈哈哈3</p>
</body>
</html>
4. 文本屬性
white-space: 設置元素中空白的處理方式
- normal：默認處理方式。
- pre：保留空格，當文字超出邊界時不換行
- nowrap：不保留空格，強制在同一行內顯示所有文本，直到文本結束或者碰到br標簽
- pre-wrap：保留空格，當文字碰到邊界時換行
- pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行
direction: 規定文本的方向
- ltr：默認，文本方向從左到右。
- rtl：文本方向從右到左。
text-align:文本的水平對齊方式
- left：默認，向左對齊
- center：居中顯示
- right：向右對齊
line-height:文本行高
- normal：默認
vertical-align: 文本所在行高的垂直對齊方式
- baseline：默認
- sub：垂直對齊文本的下標，和標簽一樣的效果
- super：垂直對齊文本的上標，和標簽一樣的效果
- top：對象的頂端與所在容器的頂端對齊
- text-top：對象的頂端與所在行文字頂端對齊
- middle：元素對象基於基線垂直對齊
- bottom：對象的底端與所在行的文字底部對齊
- text-bottom：對象的底端與所在行文字的底端對齊
text-indent:文本首行縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
- capitalize：文本中的每個單詞以大寫字母開頭。
- uppercase：定義僅有大寫字母。
- lowercase：定義僅有小寫字母。
text-overflow: 文本溢出樣式
- clip：修剪文本。
- ellipsis：顯示省略符號...來代表被修剪的文本。
- string：使用給定的字符串來代表被修剪的文本。
text-decoration:文本的裝飾
- none：默認。
- underline：下划線。
- overline：上划線。
- line-through：中線。
text-shadow：文本陰影
- text-shadow: 5px 5px 5px #888;
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
word-wrap：自動換行
- word-wrap: break-word;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div套文本</title>
<style>
div {
width: 200px; /*設置div寬度*/
height: 200px; /*設置div高度*/
background-color: green; /*設置div背景顏色*/
text-align: center; /*文本居中顯示*/
direction: rtl; /*文本方向從右到左*/
text-decoration: line-through; /*內容中間加中線*/
text-indent: 10px; /*首行縮進10px*/
line-height: 300px; /*設置文本行高*/
text-shadow:2px 2px 3px #00FF99; /*設置文本陰影*/
}
</style>
</head>
<body>
<div>
哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
5. 背景屬性
background-color 背景顏色
background-image 設置圖像為背景
- url("https://gitee.com/geng-feng/blogimage/raw/master/images/1.jpg"); 圖片地址
- background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果
background-position 設置背景圖像的位置坐標
- background-position: center top; 圖片中上顯示
- background-position: center center; 圖片置中，x軸center，y軸center
- 1px -195px 截取圖片某部分，分別代表坐標x，y軸
background-repeat 設置背景圖像不重復平鋪
- no-repeat：設置圖像不重復，常用
- round：自動縮放直到適應並填充滿整個容器
- space：以相同的間距平鋪且填充滿整個容器
background-attachment 背景圖像是否固定或者隨着頁面的其余部分滾動
- scroll：默認屬性
- fixed：圖片隨着頁面滾輪移動，容器視覺消失圖片消失
background 簡寫
- background: url("o_ns.png") no-repeat 0 -196px;
- background: url("o_ns.png") no-repeat center bottom 15px;
- background: url("o_ns.png") no-repeat left 30px bottom 15px;
背景屬性演示
參考博客（練習題）：https://www.cnblogs.com/linhaifeng/articles/9011138.html
6. 列表屬性
list-style-type: 列表項標志的類型
- none：去除標志
- decimal-leading-zero：有序列表01
- square;：實心方塊
- circle;：空心圓
- upper-alph： 大寫字母
- disc;：實心圓
list-style-position：列表項標志的位置
- inside：靠里面顯示
- outside：靠外面顯示
list-style-image：將圖象設置為列表項標志
- list-style-image: url("img/1.jpg")
- 需在 list-style-position:inside ;配合下使用
list-style：縮寫
- list-style: square inside; 方塊靠里顯示
列表屬性演示
7. 邊框屬性
border-style：邊框樣式
- solid：實線
- double：雙線
- dotted：點狀線條
- dashed：虛線
border-color：邊框顏色
border-width：邊框寬度
border-radius：圓角
- 1個參數：四個角都應用
- 2個參數：第一個參數應用於 左上、右下；第二個參數應用於 左下、右上
- 3個參數：第一個參數應用於 左上；第二個參數應用於 左下、右上；第三個參數應用於右下
- 4個參數：左上、右上、右下、左下（順時針）
border: 簡寫
- border:2px yellow solid;
box-shadow：邊框陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- box-shadow: 10px 10px 5px #888;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框</title>
<style>
div{
width: 800px;
height: 500px;
border-style: solid; 邊框為實線
border-style: dotted; /*設置邊框為點狀*/
border-style: dashed; /*設置邊框為虛線*/
border-style: double; /*設置邊框為雙線*/
border-color: #00FF99; /*設置邊框顏色*/
border-width: thin; /*邊框更細*/
border-width: thick; /*加粗*/
border-width: 5px; /*自定義粗細*/
border-radius: 50px; /*邊框弧度（四角都應用）*/
border: 5px #00FF99 solid;/*簡寫：寬度，顏色，實線*/
box-shadow: 10px 50px 20px #888; /*邊框陰影*/;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
頭像實現邊框：
實現代碼
CSS顯示模式：塊級別、行內、行內塊級
在HTML中HTML將所有標簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有標簽分為兩類，分別是容器級是塊級元素和行內元素
#1、HTML中容器級與文本級
容器級標簽：可以嵌套其他的所有標簽
div、h、ul>li、ol>li、dl>dt+dd
文本級標簽：只能嵌套文字、圖片、超鏈接
span、p、buis、strong、em、ins、del
#2、CSS中塊級與行內
塊級：塊級元素會獨占一行，所有的容器類標簽都是塊級，文本標簽中的p標簽也是塊級
div、h、ul、ol、dl、li、dt、dd 還有標簽p
行內：行內元素不會獨占一行，所有除了p標簽以外的文本標簽都是行內
span、buis、strong、em、ins、del
行內塊級 img
#3、塊級元素與行內元素的區別
1、塊級元素block
特點：獨占一行
可以設置寬高
若沒有設置寬度，那么默認和父元素一樣寬
（比如下例中的div的父元素是body，默認div的寬就是body的寬）
若沒有設置寬高，那么就按照設置的來顯示
2、行內元素inline
不會獨占一行
不可以設置寬高
盒子寬高默認和內容一樣
3、行內塊級元素inline-block
不會獨占一行
可以設置寬高
轉換
display：可以控制HTML元素的顯示效果
- none：不顯示。 HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用
- block：顯示為塊級元素。
- inline：顯示為內聯元素。
- inline-block：行內塊級元素（會保持塊元素的高寬）。
- list-item：顯示為列表元素。
visibility
- visible：元素可見
- hidden：元素不可見（可以隱藏某個元素，但仍需占用與未隱藏之前一樣的空間。雖然該元素被隱藏了，但仍然會影響布局）
- collapse：當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的布局。
display屬性
“無意義”的HTML元素div和span
- HTML只是賦予內容的手段，大部分HTML標簽都有其意義（例如，標簽p創建段落，h1標簽創建標題等等）的，然而div和span標簽似乎沒有任何內容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式，所以當樣式表失效時它就沒有任何的作用
- 它們被用來組合成一大塊的HTML代碼並賦予一定的信息，大部分用類屬性class和標識屬性id與元素聯系起來。span和div的不同之處在於span是內聯的，用在一小塊的內聯HTML中。而div（division）元素是塊級的（簡單地說，它等同於其前后有斷行），用於組合一大塊的代碼，為HTML 文檔內大塊的內容提供結構和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便於建立不同集成的類。
- div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制
盒子模型
盒子模型，英文即box model。無論是div、span、還是a都是盒子。
但是，圖片、表單元素一律看作是文本，它們並不是盒子。這個很好理解，比如說，一張圖片里並不能放東西，它自己就是自己的內容。
盒子屬性
一個盒子中主要的屬性：width、height、padding、border、margin、content。如下：
- width和height：內容的寬度、高度（不是盒子的寬度、高度）。
- padding：內邊距（用於控制內容與邊框之間的距離）
- border：邊框（ 圍繞在內邊距和內容外的邊框，邊框有三個要素：像素（粗細）、線型、顏色）
- margin：外邊距（用於控制元素與元素之間的距離，從視覺角度達到相互隔開的目的）
- content: 內容，盒子的內容，顯示文本和圖像
盒子模型的示意圖：
以上屬性又分為上、右、下、左四個方向
問題：頁面元素的寬度width、高度height如何計算？
答案：元素的實際占位尺寸 = 元素尺寸 + padding + 邊框寬度 比如：元素實際占位高度 = height屬性 + 上下padding + 上下邊框寬度
盒模型的層次關系
我們通過一個經典的盒模型3D立體結構圖來理解，如圖：
內邊距（padding）
- padding屬性用於設置內邊距。 是指 邊框與內容之間的距離。
- padding-top:上內邊距
- padding-right:右內邊距
- padding-bottom:下內邊距
- padding-left:左內邊距
注意： 后面跟幾個數值表示的意思是不一樣的。
| 值的個數 | 表達意思 |
|---|---|
| 1個值 | padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素 |
| 2個值 | padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3個值 | padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4個值 | padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針 |
box-sizing 屬性
content-box； 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box；告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那么這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內邊距</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid pink;
padding: 50px;
}
.box1 {
width: 200px;
height: 200px;
border: 1px solid pink;
padding: 50px;
/*內邊距設置完不影響大小的方式：取消伸縮*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">你好啊</div>
<div class="box1">你好啊</div>
</body>
</html>
內邊距
外邊距（margin）
margin屬性用於設置外邊距。 設置外邊距會在元素之間創建“空白”，定義了元素與其他相鄰元素的距離， 這段空白通常不能放置其他內容。
-
margin-top：上外邊距
-
margin-right：右外邊距
-
margin-bottom：下外邊距
-
margin-left：左外邊距
-
margin：上外邊距 右外邊距 下外邊距 左外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外邊距</title>
<style>
* {
margin: 0; /*取消所有默認的外邊距*/
padding: 0; /*取消所有默認的內邊距*/
}
div{
width: 200px;
height: 200px;
}
.box1 {
/*邊框：1px粗、實線、紅色*/
border: 1px solid red;
margin-bottom: 100px; /*與下面邊框外邊距為100px*/
}
.box2 {
/*邊框：1px、虛線、藍色*/
border: 1px dashed blue;
/*與上面邊框外邊距為200px，誰大就會覆蓋誰*/
margin-top: 200px;
}
.box3 {
border: 1px solid red;
display: inline-block; /*塊級轉行內塊級*/
margin-right: 50px;/*與右面邊框的外邊距為50px*/
}
.box4 {
border: 1px dashed blue;
display: inline-block;
/*margin-left: -5px;*/
/*與左面邊框的外邊距為50px，（左右或上下的外邊距值一樣會重合不會累加）*/
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
外邊距
margin-top塌陷問題
控制子盒在父盒內移動采用此類方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決塌陷問題</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
/*border: 1px solid black;*/ /*父盒不加邊框*/
/*控制子盒在父盒內移動用padding*/
padding-top: 100px ; /*設置上內邊距為100px*/
box-sizing: border-box;
}
/*在所有兒子前面加參照物*/
.father:before {/*不想加框推薦采用此類方式*/
content: ""; /*添加參照物*/
display: table;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
/*margin-top: 100px;*/ /*內部移動不推薦*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
解決塌陷
水平居中和垂直居中
水平居中包含兩種情況：
塊級元素的水平居中：margin:0px auto;
文字內容的水平居中：text-align: center;
內容居中顯示
讓盒子中存儲的文字、圖片水平居中，用 text-align center；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內容在盒子中水平且垂直居中</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
/*水平居中*/
text-align: center; /*內容居中*/
/*垂直居中*/
line-height: 20px; /*內容行高*/
padding-top: 60px; /*距離頂部60px*/
box-sizing: border-box; /*取消盒子拉伸*/
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
內容居中顯示
盒子居中顯示
如果想讓盒子自己相對於父元素水平居中，需要用到 margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中顯示</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
border: 1px solid black;
margin: 0 auto; /*基於body居中顯示*/
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
line-height: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
盒子居中顯示
按比例設置寬高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按比例設置寬高</title>
<style>
p {
/*width: 800px;*/
width: 80%; /*按照比例設置寬度*/
height: 100px;
background-color: pink;
margin: 0 auto;
}
html,body { /*並集選擇器設置父標簽高度*/
height: 100%; /*高度設置百分之百供子標簽參照*/
}
div {
width: 200px; /*設置寬度*/
height: 80%; /*必須參照父標簽設置高度*/
background-color: blue;
}
</style>
</head>
<body>
<p></p>
<div></div>
</body>
</html>
按比例設置寬高
CSS網頁布局
float浮動
理解浮動屬性首先要搞清楚，什么是文檔流？ 文檔流：瀏覽器根據元素在html文檔中出現的順序，元素會自動從左向右，從上到下依次排列
在CSS中，任何元素都可以浮動。浮動的元素會生成一個塊級框，而不論它本身是何種元素
關於浮動的兩個特點：
1、浮動的框可以向左或者向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
2、由於浮動框不在文檔流中，所以文檔流中的塊級框表現得就像浮動框不存在一樣
ps：浮動元素脫離文檔流意味着：無論是什么級的元素都可以設置寬高，且垂直方向沒有浮動的元素會自動填充 浮動元素在文檔流中原先的位置,浮動元素重新歸位后就會覆蓋該元素
在 CSS 中，我們通過 float 屬性實現元素的浮動：
float: 浮動方向(left、right、none);
-
left： 向左浮動
-
right 向右浮動
-
none 默認不浮動
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style> .box1 { width: 100px; height: 100px; background-color: red; float: left; /*向左浮動*/ } .box2 { width: 200px; height: 200px; background-color: green; float: left; /*向左浮動*/ } .box3 { width: 100px; height: 100px; background-color: blue; float: right; /*向右浮動*/ } .box4 { width: 200px; height: 200px; background-color: pink; float: right; /*向右浮動*/ } </style> </head> <body> <div class="box1">你好</div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html> 浮動演示
浮動元素貼靠問題
- 當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
- 當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素
- 直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>當父元素為body時的貼靠</title>
<style>
.box1 {
width: 100px;
height: 500px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 400px;
background-color: green;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
.box4 {
width: 400px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1">你好</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
足夠顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>當父元素為設定的div時</title>
<style>
.box1 {
width: 100px;
height: 500px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 400px;
background-color: green;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
.box4 {
width: 400px;
height: 200px;
background-color: pink;
float: left;
}
.father { /*設置父元素的大小*/
/*這個寬度不足夠顯示浮動元素，應該合理設置父元素寬度*/
width: 700px;
height: 1200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">你好</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
不足夠顯示
浮動元素的字圍現象
- 沒有浮動文字、圖片、超鏈接等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字圍現象</title>
<style>
img {
width: 200px;
float: left; /*向左浮動*/
}
</style>
</head>
<body>
<img src="https://gitee.com/geng-feng/blogimage/raw/master/images/huge.jpg" alt="">
<p>
胡歌，1982年9月20日出生於上海市徐匯區，中國內地影視男演員、流行樂歌手，民盟盟員，畢業於上海戲劇學院表演系。 1996年，14歲的胡歌便成為上海教育電視台的小主持人。2005年在仙俠劇《仙劍奇俠傳》中塑造了“李逍遙”一角，並演唱該劇插曲《六月的雨》《逍遙嘆》。2006年8月遭受嚴重車禍，2007年6月復出。2009年主演仙俠劇《仙劍奇俠傳三》，並演唱片尾曲《忘記時間》。2010年主演的穿越劇《神話》在央視八套播出。2011年參演歷史題材電影《辛亥革命》提名大
眾電影百花獎“最佳新人獎”。2012年主演玄幻劇《軒轅劍之天之痕》。2013年主演兩部話劇，憑借《如夢之夢》獲得北京丹尼國際舞台表演藝術獎“最佳男演員獎”；2014年參演戰爭劇《四十九日·祭》提名上海電視節白玉蘭獎“最佳男配角獎”；2015年主演的諜戰劇《偽裝者》、古裝劇《琅琊榜》、都市劇《大好時光》相繼播出，獲中國電視劇飛天獎“優秀男演員提名獎”、上海電視節白玉蘭獎“最佳男主角獎”、中國電視金鷹獎“觀眾喜愛的男演員獎”、中國金鷹電視藝術節“最具人氣男演員獎”等獎項。2016年登上央視春晚演唱歌曲《相親相愛》。2017年二度登上央視春晚演 唱歌曲《在此刻》，獲得共青團中央“全國向上向善好青年”崇義友善好青年稱號，2018年憑借《獵場》二度提名上海電視節白玉蘭獎“最佳男主角獎” 。2019年，主演的刁亦男執導電影《南方車站的聚會》入圍戛納國際電影節主競賽單元。2020年12月，2020中國品牌人物500強排名53。
</p>
</body>
</html>
字圍現象1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字圍現象</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: palevioletred;
float: left; /*向左浮動*/
}
span {
/*將行內設置為行內塊級*/
display: inline-block;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
字圍現象2
浮動元素的高度問題（父級塌陷）
如果需要兩個框在一行顯示可以將兩個框都設置為浮動框。
但浮動框會帶來一個副作用：當父級標簽沒有定義高度時，會引起父級標簽塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父級標簽塌陷問題</title>
<style>
.header { /*頁首居中顯示*/
border: 5px solid black;
width: 800px;
/*height: 200px; !*不設置高度就會塌陷*!*/
margin: 0 auto;
}
.logo { /*logo左顯示*/
width: 200px;
height: 100px;
background-color: #ff9019;
float: left;
}
.nav { /*標題右顯示*/
width: 500px;
height: 100px;
background-color: #3FFFB7;
float: right;
}
.content { /*內容居中顯示*/
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #FF0E4C;
}
.footer { /*頁腳居中顯示*/
width: 800px;
height: 200px;
margin: 0 auto;
background-color: #C399FF;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
父級塌陷問題
父級塌陷不是我們希望的結果，原因在於浮動相當於和父級標簽進行了分層，沒有浮動時子標簽會撐起父標簽的高度，但浮動后父標簽失去內容填充，於是就塌陷了。
解決父級塌陷的三種方案：
- 給父級標簽設置高度 height: 200px;
- ovweflow:hidden
- 偽元素選擇器來消除浮動（常用推薦）
clear 清除浮動
clear這個屬性必須設置在塊級、並且不浮動的元素中。
須知：元素是從上到下、從左到右依次加載的。
- none : 默認值。允許兩邊都可以有浮動對象
- left : 不允許左邊有浮動對象
- right : 不允許右邊有浮動對象
- both : 不允許左右有浮動對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
.header { /*頁首居中顯示*/
border: 5px solid black;
width: 800px;
margin: 0 auto;
}
.header:after{ /*添加偽元素選擇器解決塌陷*/
content: '';
display: table;
clear: both; /*清除浮動*/
}
.logo { /*logo左顯示*/
width: 200px;
height: 100px;
background-color: #ff9019;
float: left;
}
.nav { /*標題右顯示*/
width: 500px;
height: 100px;
background-color: #3FFFB7;
float: right;
}
.content { /*內容居中顯示*/
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #FF0E4C;
clear: both;
}
.footer { /*頁腳居中顯示*/
width: 800px;
height: 200px;
margin: 0 auto;
background-color: #C399FF;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
清除浮動方法
清除浮動的通用方法：
在寫HTML頁面之前，先提前寫好處理浮動帶來影響的CSS代碼
# 浮動帶來的影響
會造成父標簽塌陷的問題
"""
解決浮動帶來的影響 推導步驟
1.自己加一個div設置高度
2.利用clear屬性
#d4 {
clear: left; /*該標簽的左邊(地面和空中)不能有浮動的元素*/
}
3.通用的解決浮動帶來的影響方法
在寫html頁面之前 先提前寫好處理浮動帶來的影響的 css代碼
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要標簽出現了塌陷的問題就給該塌陷的標簽加一個clearfix屬性即可
上述的解決方式是通用的 到哪都一樣 並且名字就叫clearfix
"""
之后只要標簽出現了塌陷問題就給該塌陷的標簽加一個clearfix屬性即可，上述的解決方式是通用的，在哪都一個鳥樣，且名字就叫clearfix
網頁布局練習：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>網頁布局練習</title>
<style>
* {/*取消所有默認的內外邊距*/
margin: 0;
padding: 0;
}
html,body { /*給父級設置高度供子元素參考*/
height: 100%;
}
body { /*父標簽的背景顏色*/
background-color: #cccccc;
}
.header { /*頁首：紅色居中顯示*/
width: 80%;
height: 10%;
background-color: red;
margin: 0 auto;
padding: 20px; /*內邊距20px*/
box-sizing: border-box;/*取消拉伸效果*/
}
.content { /*內容：綠色居中顯示*/
width: 80%;
height: 78%;
background-color: green;
margin: 0 auto;
margin-top: 1%; /*上外邊距1%*/
padding: 20px; /*內邊距20px*/
box-sizing: border-box; /*取消拉伸效果*/
}
.footer { /*頁腳：藍色居中顯示*/
width: 80%;
height: 10%;
background-color: blue;
margin: 0 auto;
margin-top: 1%; /*上外邊距1%*/
}
.logo {
width: 20%;
height: 100%;
background-color: pink;
float: left;
}
.nav {
width: 75%;
height: 100%;
background-color: yellow;
float: right;
}
.left {
width: 20%;
height: 100%;
background-color: #800080;
float: left;
}
.right {
width: 75%;
height: 100%;
background-color: #87ceeb;
float: right;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
參考代碼
overflow 屬性溢出
設置當對象的內容超過其指定高度及寬度時如何顯示內容
- visible：默認值。內容不會被修剪，會呈現在元素框之外。
- hidden：內容會被修剪，並且其余內容是不可見的。
- scroll： 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
- auto： 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
- inherit：規定應該從父元素繼承 overflow 屬性的值
- overflow（水平和垂直均設置）
- overflow-x（設置水平方向）
- overflow-y（設置垂直方向）
position 定位
-
static：靜態
所有的HTML標簽默認都是靜態的static，無法改變位置，不能當作絕對定位的參照物，並且設置標簽對象的 top、bottom、left 和 right屬性是不起作用的
-
relative：相對定位
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
-
absolute：絕對定位(常用)
相對於已經定過位的父標簽做移動（如果沒有父標簽就以body為參照），元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。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> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .box1 { height: 100px; width: 200px; background-color: #f4ff77; } .box2 { height: 100px; width: 200px; background-color: #ff6ff1; left: 30px; /*從左往右 如果是負數 方向則相反*/ top: 30px; /*從上往下 如果是負數 方向則相反*/ /*position: static; !*默認是static無法修改位置*!*/ position: relative; /*相對定位 標簽由static變為relative它的性質就從原來沒有定位的標簽變成了已經定位過的標簽 雖然你哪怕沒有動 但是你的性質也已經改變了 */ } .box3 { height: 100px; width: 200px; background-color: #00FF99; } </style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>相對定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相對定位</title> <style> body{ margin: o; } input{ width: 200px; height: 50px; } input:focus{ outline: none; background-color: #00FF99; } img { height: 50px; position: relative; top: 20px; } </style> </head> <body> <input type="text" name="call" placeholder="請輸入圖片中的驗證碼"> <img src="2.png" alt=""> </body> </html> 應用場景絕對定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對定位</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .box1 { height: 100px; width: 200px; background-color: red; position: relative; /*已經定位過了*/ } .box2 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; /*從左往右*/ top: 100px; /*從上往下*/ } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> 絕對定位定位盒子居中顯示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位實現盒子居中顯示</title> <style> .box1 { width: 500px; height: 500px; background-color: #7eff99; position: relative; /*父級相對定位*/ } .box2 { width: 100px; height: 100px; background-color: #e46f99; /*margin: 0 auto; !*只能實現水平居中，不能實現垂直居中*!*/ position: absolute;/*子級絕對定位*/ left: 50%; /*從左往右*/ margin-left: -50px; /*左外邊距*/ top: 50%; /*從上往下*/ margin-top: -50px; /*上外邊距*/ } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> 定位盒子居中固定定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .box1{ height: 500px; background-color: #ff839b } .box2{ height: 500px; background-color: #ccffa0 } .box3{ height: 500px; background-color: #70ddff } .box4 { position: fixed; /*寫了fixed之后 定位就是依據瀏覽器窗口*/ bottom: 10px; /*距離瀏覽器底部10px*/ right: 20px; /*距離瀏覽器右側20px*/ height: 100px; width: 100px; background-color: #ea5aeb; /*背景顏色*/ border: 2px dotted black; /*添加邊框：2px粗、點狀線、黑色*/ border-radius: 50%; /*設置成圓形邊框*/ text-align: center; /*內容居中顯示*/ line-height: 100px; /*內容行高*/ } a{ text-decoration: none; /*去掉內容的下划線*/ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"> <a href="#">回到頂部</a> </div> </body> </html> 固定定位脫離文檔流：
絕對定位
固定定位
不脫離文檔流：
相對定位
z-index 屬性
用於指定定位的元素的覆蓋關系（設置其層疊順序），值大的在外層展示
設置元素的層疊順序：
-
z-index 值表示誰壓着誰，數值大的壓蓋着數值小的，
-
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
-
z-index值沒有單位，就是一個正整數，默認的z-index值為0。如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰就在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
-
從父現象：父標簽層級低無法展示，子標簽層級再高也無法展示
父元素沒有z-index值, 那么子元素誰的z-index值大誰蓋住誰 父元素z-index值不一樣, 那么父元素誰的z-index值大誰蓋住誰
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層疊</title> <style> .father1 { width: 300px; height: 300px; background-color: red; position: relative;/*相對定位*/ } .son1 { width: 100px; height: 100px; background-color: yellow; position: absolute; /*絕對定位*/ left: 300px; top: 300px; z-index: 2; /*子1的值大它就在上面*/ } .father2 { width: 300px; height: 300px; background-color: green; position: relative; } .son2 { width: 100px; height: 100px; background-color: pink; position: absolute; left: 350px; top: 50px; z-index: 1; /*子2的值小它就在下面*/ } </style> </head> <body> <div class="father1"> <div class="son1"></div> </div> <div class="father2"> <div class="son2"></div> </div> </body> </html> z-index層疊從父現象：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>從父現象</title> <style> .father1 { width: 300px; height: 300px; background-color: red; position: relative; /*相對定位*/ z-index: 1; /*父1比父2小*/ } .son1 { /*子1被子2壓蓋着*/ width: 100px; height: 100px; background-color: yellow; position: absolute; /*絕對定位*/ left: 300px; top: 300px; z-index: 2; /*子1比子2大但是仍被壓蓋着*/ } .father2 { width: 300px; height: 300px; background-color: green; position: relative; /*相對定位*/ z-index: 2; /*父2比父1大*/ } .son2 { /*子2蓋住子1*/ width: 100px; height: 100px; background-color: pink; position: absolute; /*絕對定位*/ left: 350px; top: 50px; z-index: 1; /*子2比子1小但還是在外層*/ } </style> </head> <body> <div class="father1"> <div class="son1"></div> </div> <div class="father2"> <div class="son2"></div> </div> </body> </html> 從父現象 -