今天所學(xué)到的如下：
AM
1.盒子模型的傳參
<style>
div{
width: 100px;
height: 100px;
background: red;
margin:100px 200px 300px;
}
</style>
注釋： margin：100px 四個(gè)方向全部改變
margin：100px 200px top，bottom--100px;left,right--200px
margin: 100px 200px 300px top--100px;right,left--200px;bottom--300px
margin: 100px 200px 300px 400px 按順時(shí)針轉(zhuǎn)
2.padding
<style>
div{
width: 100px;
height: 100px;
background: red;
padding:20px 30px 40px;
}
</style>
注釋：傳一個(gè)參數(shù) 四個(gè)方向都改變
傳兩個(gè)參數(shù) 第一參數(shù)top,bottom;第二參數(shù)left,right
傳三個(gè)參數(shù) 第一參數(shù)top;第二參數(shù)left,right;第三個(gè)參數(shù)bottom
傳四個(gè)參數(shù) top,right,bottom,left
3.
<style>
*{margin: 0;padding: 0}
div{
width: 300px;
height: 300px;
background: rebeccapurple;
padding: 20px;
}
</style>
注釋：元素內(nèi)容的起始位置，是基于它自身width，height的起始位置
4.標(biāo)簽的分類
<style>
div{
width: 100px;
height: 100px;
background: rebeccapurple;
margin-top: 100px;
margin-bottom: 100px;
}
a{
width: 100px;
height: 100px;
background: rebeccapurple;
margin-top: 100px;
margin-bottom: 100px;
}
input{
width:100px;
height:100px;
/* display:inline-block */
}
</style>
<body>
<!--
h1,p,div,ul,li,dl,dt,dd塊標(biāo)簽
特點(diǎn)：1.獨(dú)占一行 2.能設(shè)置width,height
-->
<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)標(biāo)簽
特點(diǎn)：1.并排顯示 2.不能設(shè)置width,height 3.不能設(shè)置margin-top,margin-bottom
-->
<a href="#"></a> <span>span</span> <i>i</i> <em>em</em> <strong>strong</strong>
<br>
<!--
內(nèi)聯(lián)塊
input,img,button
特點(diǎn)：1.并排顯示 2.能設(shè)置width,height
-->
<input type="text">
<img src="images/icon1.png" alt="">
<button>button</button>
</body>
5.
<style>
/*
內(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
*/
span{
display: block;
margin-left: auto;
margin-right: auto;
background: rebeccapurple;
width: 100px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<span>span</span>
<br>
<img src="images/icon1.png" alt="">
</body>
6.水平居中
<style>
body{
text-align: center;
}
</style>
<body>
<!--
不改變內(nèi)聯(lián)和內(nèi)聯(lián)塊的display屬性 實(shí)現(xiàn)水平居中
實(shí)現(xiàn)方案:
parentElement{
text-align:center;
-->
<span>span</span><br>
<img src="images/icon1.png" alt="">
</body>
PM
1.分組選擇器
<style>
/*p{
color:red;
}
*/
/*.one{
color:red;
}
*/
/*.#two{
color:red;
}
*/
/*偽裝選擇器*/
/*
p:hover{
color:firebrick;
}
*/
/*分組選擇器*/
p,h1,div{
color:aqua;
}
</style>
<body>
<p class="one">hello world</p>
<h1>h1</h1>
<div>div</div>
2.后代選擇器
<style>
/*
.parent>p{} 親兒子
*/
/*
.parent>p{
color: aquamarine;
}
*/
/*
.parent>p{} 選擇parent之后的所有p元素
*/
.parent>p{
color: aquamarine;
}
</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>
3.兄弟選擇器
<style>
/*
兄弟選擇器
div+p{}-->選中div之后的第一個(gè)p元素
div~p{}-->選中div之后的所有元素
*/
/*
div+p{
color:tomato;
}
*/
div~p{
color:tomato;
}
/*
偽裝類選擇器
*/
input:focus{
background: pink;
}
</style>
<body>
<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>
<input type="text">
</body>
4偽元素
<style>
/*
偽元素-->用css自定義生產(chǎn)的元素
div:before{
content:"";
}
*/
div:before{
width: 100px;
height: 100px;
background: red;
content:"前面";
display: block;
}
div:after{
content: "后面";
display: block;
width: 100px;
height: 50;
background: yellow;
}
</style>
</head>
<body>
<div>
content
</div>
5.屬性
<style>
/*
屬性選擇器
語法
element[attr=value]
*/
[class="one"]{
color: yellowgreen;
}
</style>
<body>
<p class="one">hello world</p>
</body>
6.選擇器的優(yōu)先級別
<style>
/*!important>id>class>p{} */
p{
color: red !important;
}
.one{
color: yellow;
}
#two{
color: green;
}
</style>
<body>
<p class="one" id="two">hello world</p>
</body>
7.選擇器的權(quán)重
<style>
/* 選擇器嵌套的層次越深，那么權(quán)重越高*/
.child{
color: red;
}
.parent>.child{
color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
