今天學(xué)到了什么
1 盒子的傳參
margin:100px 四個方向全部改變
margin:100px 200px; top,bottom-- 100px left,right -- 200px
//傳三個參數(shù) top--100 left,right -- 200 bottom --300
margin:100px 200px 300px;
//傳四個參數(shù)（順時針）
margin:100px 200px 300px 400px
top right bottom left
2 html 元素特點
元素內(nèi)容的起始位置,是基于它自身width,height的起始位置
padding就可以移動元素寬高
標簽的分類
- 塊標簽 特點①單獨成行
②可以被設(shè)置寬高width height
h1 p dl ul li dt dd div
- 內(nèi)標簽 特點①并排顯示
②不可被設(shè)置寬高width height
③不可設(shè)置margin-top，margin-bottom
a span i em strong
-內(nèi)聯(lián)塊 特點①并排顯示
②可以被設(shè)置寬高width height
input button img
- 各個標簽?zāi)J
塊標簽?zāi)J display:block;
內(nèi)聯(lián)默認 display:inline;
內(nèi)聯(lián)塊默認 display:inline-block
- 內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
圖片居中（內(nèi)聯(lián)塊）
/*方法一*/
/*給父級加 text-align: center; */
/*body{
text-align: center;
}*/
.header{
text-align: center;
}
/*方法二*/
img{
display: block;
margin-left: auto;
margin-right: auto;
}
(注意：圖片大小不要超過父標簽設(shè)置范圍之外 不然無法居中
兩個圖片要不同大小 至少需要定義一個 兩個都居中用img定義就行 )
3選擇器
<style>
/* p{
color:red;
} */
/* .one{
color:yellow;
} */
/* #two{
color:green;
} */
/* 偽類選擇器 */
/*li：hover，p:hover（懸?。﹞
color:black;
cursor：pointer（光標變手）
} */
/* 分組選擇器 */
p,h1,div{
color:red;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
</body>
</html>
4 后代選擇器
.parent>p{} 親兒子
.parent>p{
color:red;
}//前兩個變紅
.parent p{
color:red;
} 選擇parent之后的所有p元素 //前三個變紅
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
<p>hello world</p>
</div>
5 兄弟選擇器
div+p{
color:red;
}//選中div之后的第一個p元素
div~p{
color:yellow;
}//選中div之后的所有p元素
- 偽類選擇器
input:focus{}
input:focus{
background: #ff2d51;
}//點擊時輸入框變紅
<body>
<input type="text">
</body>
6 偽元素
用css自定義生產(chǎn)的元素
div:before{
content:"前面"
寬高
}//div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}//注意 分號一定要用英文模式
7屬性選擇器
element[attr=value]{
}//[class="one"]{
color:red;
}//[class="one"]和.one 差不多
8選擇器優(yōu)先級別
9 選擇器的權(quán)重
2.png
10 文字雙背景
-
一個div 一個h2//注意設(shè)置寬高背景
3png.png
-兩個div 中間一個a（網(wǎng)站的應(yīng)用）
// .nav{
height: 60px;
width: auto;
background: yellow;
}
.nav2{
text-decoration-line: none;
display: block;
text-align: center;
line-height: 60px;
height: 60px;
width: 100px;
background: blue;
margin-left: auto;
margin-right: auto;
}
.nav2 a{
text-decoration-line: none;
color: black;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav2">
<a href="#">關(guān)于遠大</a>
</div>
</div>
11關(guān)于表格
-
表格跨越列
image.png -
表格跨越行
5.png
不太流暢有
-1跨行
豎為<th rowspan="3">商城</th><td>衣服</td><td>電腦</td>//三行任意列 三列一行被商城替代
-2跨列
橫為<tr>
<th colspan="2">商城</th>
</tr>
<tr><td></td> <td></td></tr>(任意行2列 一列三行被商城替代)
-3 表格合并
table{border-collapse: collapse;}
-4 線的問題
table,td,th{border:1px solid #333}（邊界實心）
-5 字的讓位（定義了盒子寬度）
text-indent: 20px;
-div a {text-decoration-color: none;}//網(wǎng)頁導(dǎo)航下劃線顏色
