盒子模型圖
盒子代碼學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.p1 {
background-color: rebeccapurple;
width: 100px;
height: 100px;
}
.p2 {
background-color: aqua;
width: 100px;
height: 100px;
}
img {
width: 100px;
height: 100px;
}
.p3 {
background-color: blue;
width: 100px;
height: 100px;
border-width: 5px;
/*邊框的寬度*/
border-color: brown;
/*邊框的顏色*/
border-style: solid;
/*邊框的樣式*/
/* border: 10px solid red; 簡化寫法border: 寬度 樣式 顏色 */
padding: 20px;/*和margin用法一樣 內邊距不算在寬高*/
}
.p4 {
background-color: wheat;
width: 100px;
height: 100px;
border-top: 5px red solid;
border-left: 10px blue dotted;
border-right: 10px blue dotted;
border-bottom: 5px red solid;
margin: auto;/* margin 外邊距設置 */
/* margin-left: 20px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 5px; */
}
</style>
<title>Document</title>
</head>
<body>
<p class="p1">盒子模型高度height寬度width</p>
<span class="p2">行內元素常規不能修改寬高</span>
<img src="img/html.jpg" width="200px" /><img src="img/css.jpg" height="100px" />
<div class="p3">盒子邊框屬性 和padding</div>
<div class="p4">盒子邊框屬性 和margin</div>
</body>
</html>
效果圖如下
display屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display屬性</title>
<style type="text/css">
div,span{background-color: #00aaee;
border:1px #666 solid;}
.one{font-size: 0px;}
div{display:inline-block;
font-size:16px;
width:100px;
height:30px;
padding:5px;
margin:10px;}
/*span{display:block;
width:100px;
height:30px;
padding:5px;
margin:10px;}*/
span{display:none;}
a:hover span{display:inline;}
</style>
</head>
<body>
<!--塊級元素-->
<!-- <div class="one"> -->
<div>display屬性-div</div>
<div>display屬性-div</div>
<div>display屬性-div</div>
<div>display屬性-div</div>
<div>display屬性-div</div>
<div>display屬性-div</div>
<!-- </div> -->
<hr/>
<!--內聯元素-->
<span>display屬性-sapn</span><span>display屬性-sapn</span><span>display屬性-sapn</span>
<hr/>
<a href="#">指我...<span>和你捉迷藏</span></a>
</body>
</html>