1.盒子模型的傳參
《1.1》margin
div{
width:100px;
height:100px;
background: red;
margin:100px 200px 300px;
}
--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(依次對應(yīng))
《1.2》padding
div{
width:100px;
height:100px;
background:red;
padding:10px 20px 30px;
}
//傳一個參數(shù) 四個方向都改變
//傳兩個參數(shù) 第一參數(shù)top,bottom 第二個參數(shù)left,right
//傳三個參數(shù)
第一個參數(shù)top 第一參數(shù)left,right 第三個參數(shù)bottom
//傳四個參數(shù) top,right,bottom,left
《1.3》文字起始位置
<style>
*{margin:0;padding:0}
div{
width:300px;
height:300px;
background:red;
padding:20px;
}
</style>
元素內(nèi)容的起始位置,是基于它自身width,height的起始位置
《1.4》標簽的分類
①塊標簽
h1,p,div,ul,li,dl,dt,dd
特點:獨占一行，能設(shè)置寬高
<h1>h1</h1>
<p>p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<div>div</div>
②內(nèi)聯(lián)標簽
特點:
1.并排顯示
2.不能設(shè)置width,height
3.不能設(shè)置margin-top,margin-bottom
<a href="#">a</a>
<span>span</span>
<i>i</i>
<em>em</em>
<strong>strong</strong>
③內(nèi)聯(lián)塊標簽
input,img,button
特點:
1.并排顯示
2.能設(shè)置width,height
<input type="text">
<img src="images/icon1.png" alt="">
<button>btn</button>
《1.5》讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
實例
span{
display: block;
margin-left: auto;
margin-right: auto;
background: red;
width:100px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
不改變內(nèi)聯(lián)和內(nèi)聯(lián)塊的display屬性 實現(xiàn)水平居中
實現(xiàn)方案:
parentElement{
text-align:center;
}
body{
text-align：center;
}
2.其他元素選擇器
2.1分組選擇器：同時選中多個元素標簽
p,h1,div{
color:red;
}
2.2后代選擇器
.parent>p{}-----選擇parent所有直接指代的P元素
.parent p{}------選擇parent之后所有P元素
.parent>p{
color:red;
}
或
.parent p{
color:red;
}
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
2.3兄弟選擇器
div+p{} -->選中div之后的第一個p元素
div~p{} -->選中div之后的所有p元素
div+p{
color:red;
}
或
div~p{
color:yellow;
}
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
2.4針對輸入框：偽類選擇器
input:focus{
background: #ff2d51;
}
<body>
<input type="text">
</body>
2.5偽元素
偽元素-->用css自定義生產(chǎn)的元素
<style>
div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}
div:after{
content:"后面";
display: block;
width:100px;
height:50px;
background:yellow;
}
</style>
2.5屬性選擇器
語法
element[attr=value]{ }
[class="one"]{
color:red;
}
2.6選擇器的優(yōu)先級別
!important> id>class>p{}
p{
color:red !important;
}
.one{
color:yellow;
}
#two{
color:green;
}
<body>
<p class="one" id="two">hello world</p>
</body>
2.7選擇器的權(quán)重
選擇器嵌套的層次越深,那么權(quán)重越高
<style>
.child{
color:red;
}
.parent>.child{
color:green;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
最終顯示綠色
