01盒子模型的傳參
margin:100px; 四個方向全部改變
margin: 100px 200px; top-botton--100px; left-right--200px;
margin: 100px 200px 300px; top--100px;left-right--200px; bottom--300px;
margin: 100px 200px 300px 400px;
top right bottom left 按順時針
<style>
div{
width: 100px;
height: 100px;
background: red;
margin: 100px 200px 300px;
}
</style>
02padding填充
padding
傳一個參數(shù) 四個方向都改變
傳兩個參數(shù) 第一參數(shù)top,bottom 第二個參數(shù)left,right
傳三個參數(shù) 第一個參數(shù)top 第一參數(shù)left,right 第三個參數(shù)bottom
傳四個參數(shù) top,right,bottom,left
<style>
div{
width: 100px;
height: 100px;
background: red;
padding: 10px 20px 30px;
}
</style>
03html
元素內(nèi)容的起始位置索赏，是基于自身width,height的起始位置
01.png
04標(biāo)簽的分類
<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>
h1,p,div,ul,li,dl,dt,dd 塊標(biāo)簽
特點(diǎn)：1盼玄，獨(dú)占一行 2，能設(shè)置width,height.
<a href="#">a</a><span>span</span><i>i</i><em>em</em><strong>strong</strong>
<br>
內(nèi)聯(lián)標(biāo)簽
特點(diǎn)： 1并排顯示 2不能設(shè)置width,height 3不能設(shè)置margin-top,margin-bottom.
<input type="text">
<img src="images/icon1.png" alt="">
<button>btn</button>
內(nèi)聯(lián)塊 ： input,img,button
特點(diǎn)：1并排顯示 2能設(shè)置width,height
05 內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
{
display: block;
margin-left: auto;
margin-right: auto;
}
塊標(biāo)簽?zāi)J(rèn) display:block;
內(nèi)聯(lián)默認(rèn) display:inline;
內(nèi)聯(lián)塊默認(rèn) display:inline-block
06 水平居中
<style>
body{
text-align: center;
}
</style>
不改變內(nèi)聯(lián)和內(nèi)聯(lián)塊的display屬性 實(shí)現(xiàn)水平居中
方案 ：
parentElement{
text-align:center;
}
07選擇器
<style>
/* p{
color:red;
} */
/* .one{
color:yellow;
} */
/* #two{
color:green;
} */
/* 偽類選擇器 */
/* p:hover{
color:firebrick;
} */
/* 分組選擇器 */
p,h1,div{
color:red;
}
</style>
body>
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
</body>
08后代選擇器
<style>
/*.parent>p{} 親兒子*/
/* .parent>P{
color: red;
}*/
/*.parent p 選擇parent之后所有p元素*/
.parent p{
color: red;
}
</style>
<body>
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
<p>hello world</p>
</div>
</body>
09兄弟選擇器
<style>
div+p{
color: red; --div+p{}選中div之后的第一個元素
}
div~p{
color: yellow; --div~p{} 選中div之后的所有元素
}
div~p{
color: yellow;
}
input:focus{
background: green;
}
偽類選擇器： input:focus{}
</style>
</head>
<body>
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<input type="text">
</body>
10偽元素
02.png
偽元素-->用css自定義生產(chǎn)的元素
div:before{
content: "";
}
11屬性選擇器
<style>
/* 屬性選擇器
語法
element[attr=value]{
}
*/
p[class="one"]{
color: red;
}
</style>
<body>
<p class="one">hello world</p>
</body>
12選擇器的優(yōu)先級
<p class="one" id="two">hello world</p>
important>id>class>p
13選擇器的權(quán)重
<style>
/*選擇器嵌套層次的越深潜腻，權(quán)重越重*/
.child{
color: yellow;
}
.parent{
color: red;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
