Day041--CSS, 盒模型, 浮動
-
表單標籤
-
input
-
type
-
text 普通的文字
-
password 密碼
-
radio 單選 預設選中新增checked
-
互斥的效果 給radio標籤新增 相同的name
-
-
checkbox 多選
-
submit 表單提交按鈕
-
button 普通的按鈕
-
reset 充值按鈕
-
-
name 會被封裝到請求體中的key
-
value 是標籤顯示的內容,會被封裝到請求體中的value
-
-
select
-
name 會被封裝到請求體中的key
-
子元素一定是 option
-
value 是標籤顯示的內容,會被封裝到請求體中的value
-
selected 預設選中的狀態
-
-
-
textarea
-
name
-
value
-
rows 行數 決定了它的高度
-
cols 列數 決定了它的寬度
-
-
-
css的三種引入方式
-
行內樣式 它的權重是最高的
<div style = 'width:200px;color: red;'> alex </div>
2.內接式
<head> <style> div{ color:red; } </style> </head>
3.外接式
<head> <link rel="stylesheet" href="./index.css"/> </head>
-
-
選擇器
-
基本選擇器
種類種類 語法 作用 標籤選擇器 div{} 選中頁面中所有的 div標籤,選的共性類選擇器 .box{} 找的是'共性'的元素,class可以重複,又可以設定多個 id選擇器 #box{} 找的是'特性'的標籤,它是唯一,通常是與後面的js有很大關係 統配符選擇器 *{} 不建議在工作中使用,可以拿著做測試.重置樣式庫:https://meyerweb.com/eric/tools/css/reset/ -
高階選擇器
種類 語法 作用 後代選擇器 div p{} 選取後代(所有的孩子)的元素 子代選擇器 div>p{} 選取親兒子的元素 組合選擇器 div,p,a,span{} 多個標籤選擇器組合,構成了組合選擇器 交集選擇器 div.atcive 前面是標籤選擇器,第二個是類選擇器 -
偽類選擇器 '愛恨準則 LoVe HAte'
種類 作用 a:link{} 沒有被訪問過的樣式 a:visited{} 訪問過後的樣式 a:hover 懸浮時的樣式 a:active 摁住的時候的樣式 -
權重的問題
-
數 id 類 標籤的數量
-
行內樣式 1000 > id 100 > 類 10 > 標籤 1
-
-
今日內容
盒模型
概念:
屬性:
-
width 內容的寬度
-
height 內容的高度
-
padding 內邊距 內容到邊框之間的距離
-
背景色也被填充
-
-
border 邊框
-
margin 外邊距
需求: 做一個302*302的盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*有多種方法*/ .box{ width: 200px; height: 200px; /*四個方向全部設定*/ padding: 50px; border: 1px solid red; background-color: darkslateblue; } </style> </head> <body> <!--做一個302*302的盒子--> <div class="box"></div> </body> </html>
盒模型的計算
如果保證盒模型不變,當加padding,就要對盒模型的寬或者高減,保證盒模型的不變
通過padding能調整子內容的位置,對於padding來說,通常描述的是父子之間的距離
width
定義:內容的寬度
height
定義:內容的高度
padding
定義:內邊距 內容到邊框之間的距離
.container{
width: 200px;
height: 200px;
background-color: darkgoldenrod;
/*一個值 四個方向都有值*/
/*padding: 30px;*/
/*兩個值:上下 左右*/
/*padding: 20px 30px;*/
/*三個值: 上 左右 下 */
/*padding: 30px 20px 40px;*/
/*四個值: 上 右 下 左 順時針*/
padding: 20px 30px 40px 50px;
}
四個方向單獨設定
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
border
定義:盒子的邊框
.box{
width: 300px;
height: 300px;
background-color: darkgoldenrod;
/*border: 1px solid darkred;*/
/*根據方向來設定屬性*/
/*border-left: 1px solid darkred;*/
/*border-right: 5px dotted darkgoldenrod;*/
/*border-top: 10px double darkblue;*/
/*border-bottom: 1px solid greenyellow;*/
/*根據三要素*/
/*border-width: 5px 10px 1px;*/
/*border-style: solid double dashed;*/
/*border-color: red yellow darkcyan darkgray;*/
/*border: 0;*/
border-radius: 50%;
}
製作小三角
.sanjiao{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-bottom: 50px solid green;
border-right: 50px solid transparent;
}
margin
定義:外邊距 一個盒子到另一個盒子的距離
前提條件是: 標準文件流下
-
水平方向上 不會出現問題
-
垂直方向上: 會出現塌陷問題,我們以後再佈局頁面的時候設定一個方向,而不要設定兩個方向
讓標準文件流下的盒子居中
/*讓盒子居中*/
/*margin-right: auto;*/
/*margin-left: auto;*/
margin: 0 auto;
浮動
要浮動一起浮動,另外 有浮動清除浮動
浮動的好處:
浮動實現元素並排
浮動的現象:
-
脫標
-
字圍效果
-
如果標籤一旦浮動,就不區分行內標籤還是塊級標籤,可以任意設定寬高
-
貼邊現象
浮動帶來的問題
如果父盒子沒有設定高度,子盒子都設定浮動,(脫標了,不在文件上佔位置) 撐不起父盒子的高度
清除浮動
-
給父盒子設定固定高度
-
內牆法
-
在最後一個浮動元素的後面新增一個空的塊級的標籤,給這個標籤設定類名clearfix
-
.clearfix{
clear:both;
} -
程式碼冗餘
-
CSS居中補充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ width: 100%; height: 200px; background-color: green; } .active{ width: 400px; height: 80px; margin: 0 auto; background-color: yellow; } .box{ width: 400px; height: 80px; background-color: red; text-align: center; line-height: 80px; float: left; } </style> </head> <body> <div class="father"> <div class="active"> <div class="box">alex</div> </div> </div> </body> </html>View Code
絕對定位的盒子的居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ width: 300px; height: 400px; background-color: red; position: relative; } .box{ width: 40px; height: 40px; background-color: green; position: absolute; left: 50%; margin-left: -20px; } /*屬性選擇器*/ input[type='text']{ font-size: 20px; } ul li:first-child{ color: red; } ul li:last-child{ color: greenyellow; } ul li:nth-child(4){ color: deepskyblue; } ul li:nth-child(4n+1){ color: orange; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <input type="text"> <input type="password"> <input typeof="submit"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>View Code