回顧復(fù)習(xí)
標(biāo)簽
塊元素 ：默認(rèn)獨(dú)占一行,內(nèi)容撐開高度酌伊，支持寬高
h1-h6
p
div
ul
ol
li
內(nèi)聯(lián)元素（行內(nèi)元素腾窝，行級(jí)元素）：不獨(dú)占一行，內(nèi)容撐開寬高居砖，不支持寬高
strong em/i
span
a
CSS
行間（內(nèi)）樣式<div id="box" style=""></div>
內(nèi)部樣式 <head><style></style></head>
外部樣式 <link rel="stylesheet" href="css/test.css">
基礎(chǔ)選擇器
標(biāo)簽選擇器 div{}
類選擇器 .box{}
id選擇器 #box{}
擴(kuò)展選擇器
并集選擇器 div,#box,.fontred{}
后代選擇器 div .fontred{}
交集選擇器 p.fontred{}
屬性選擇器 [test=abc]{}
文字樣式
font-size:20px;
font-weight:bold;
font-family:"宋體";
font-style:italic;
文本樣式
color:red|#fc3|rgb(r,g,b)
text-indent:2em;
text-align:left right center;
text-decoration:underline/none;
line-height:30px;
列表樣式
ul,ol
list-style:none; 去掉列表樣式
偽類
hover 鼠標(biāo)懸停
元素:hover{}
設(shè)置變化時(shí)間
transition:1s;
邊框
border:1px solid red;
關(guān)于邊框
<style >
#box1{
width: 100px;
height: 100px;
border: 1px solid #0000FF;
/* 圓角半徑 */
border-radius: 20px;/*邊角弧度 有一個(gè)數(shù)據(jù)管一個(gè)角虹脯，四個(gè)數(shù)據(jù)管4個(gè)角*/
/* 陰影 :x y z color*/
box-shadow: 5px 5px 10px red;
}
#box2{
width: 100px;
height: 100px;
border-bottom: 1px solid #0000FF;
border-right:2px dashed #090CFF ;
border-top:2px dashed #000000 ;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
內(nèi)邊框
padding: 10px; 四周邊框都是10px
padding: 10px 20px; 第一個(gè)管上下，第二個(gè)管左右
padding: 10px 20px 30px; 第一個(gè)管上奏候，第二個(gè)管左右循集，第三個(gè)管下
padding: 10px 20px 30px 40px; 第一個(gè)管上，第二個(gè)管右蔗草，第三個(gè)管下咒彤，第三個(gè)管右
外邊框
/* 內(nèi)邊距 */
padding: 10px;
/* 外邊距 */
margin: 10px;
外邊距自動(dòng)水平居中
<style >
#box{
width: 500px;
height: 20px;
border: 1px solid red;
text-align: center;
margin: 50px auto;
}
#box2{
width: 960px;
height: 500px;
border: 1px solid red;
margin: 0px auto;
}
#box3{
width: 360px;
height: 50px;
border: 1px solid red;
margin: 10px auto;
}
</style>
</head>
<body>
margin 可以方便讓元素在父級(jí)元素水平居中
<div id="box">java2</div>
<div id="box2">
<div id="box3">
2
</div>
</div>
</body>
外邊距的疊壓問題
<style>
span{
margin: 0 10px;
}
div{
width: 100px;
height: 100px;
border:1px solid red;
}
#box1{
margin-bottom:30px ;
}
#box2{
margin-top:10px ;
}
</style>
</head>
<body>
<!-- margin的x軸方向不存在疊壓問題 -->
<span>東軟</span><span>睿道</span>
<!-- margin的y軸方向存在疊壓問題 -->
<div id="box1"></div>
<div id="box2"></div>
</body>
外邊距的傳遞問題
<style>
body{
margin:0;
}
#box{
background: red;
/* padding:10px; */
/* border:1px solid red; */
padding-top:10px;
padding-bottom: 10px;
}
#div1{
height: 100px;
background: yellow;
margin: 0 10px;
}
#div2{
height: 100px;
background: green;
margin:0 10px;
margin-top:10px;
}
</style>
</head>
<body>
<!--
嵌套結(jié)構(gòu)中margin-top margin-bottom中存在傳遞問題
-->
<!-- <div style="height: 100px;background: #0000FF;"></div> -->
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div style="height: 100px;background: #0000FF;"></div>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
