HTML_盒子模型
內容
一.邊框
1.邊框顏色
border-color 邊框顏色(可以設置上邊框，如:border-top-color,也可以整體設置，但是要注意順序)
2.邊框粗細
border-width 邊框粗細(可以設置上邊框，如:border-top-width,也可以整體設置，但是要注意順序)
2.邊框樣式
border-style 邊框樣式(可以設置上邊框，如:border-top-style,也可以整體設置，但是要注意順序)
二.外邊距
1.margin 盒子距離瀏覽器的距離 (可以設置上外邊距，如:margin-top,也可以整體設置，但是要注意順序)
2.居中 margin: 0px auto
三.內邊距
1.padding 內容到盒子的距離 (可以設置上內邊距，如:padding-top,也可以整體設置，但是要注意順序)
四.盒子模型的尺寸
尺寸默認：padding+margin+wigth+border
box-sizing 方便計算盒子模型尺寸（默認為content-box，border-box代表隨著內容的寬度高度變化而變化）
五.圓角
border-radius 圓角（左上，右上，右下，左下）
/*如果想要一個圓，那么必須滿足寬和高一致，圓角取寬度或者高度的二分之一*/
/*如果想要半圓，那么必須滿足寬是高的2倍，圓角取寬度的二分之一*/
/*如果想要四分之一圓，那么必須滿足寬和高相等，圓角取寬度相等值*/
六.盒子陰影
box-shadow 默認為外陰影，內陰影為inset
box-shadow: 5px -5px 20px black;
例題：
例題一
<html>
<head>
<title>邊框顏色</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border:3px pink solid;
/*border-top-color: aqua;
borer-left-color:blue;*/
/*上右下左*/
border-color:greenyellow pink deepskyblue mediumpurple ;
/*邊框粗細*/
border-width: 20px;
/*邊框樣式*/
border-bottom-style: double;
}
</style>
</head>
<body>
<div>
盒子模型
</div>
</body>
</html>
例題二
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0px;
}
.main{
border: 1px solid aqua;
width: 300px;
height: 150px;
/*margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;*/
/*margin: 50px 50px;*/
margin: 0px auto;
}
h1{
background-color: blue;
margin: 0px;
}
.fourth{
background-color: aquamarine;
}
.third{
background-color: plum;
}
.secondmain{
border: 1px solid aqua;
width: 300px;
height: 150px;
}
.fourth,.third{
padding: 15px 30px;
}
</style>
</head>
<body>
<div class="main">
<h1>會員登錄</h1>
<div>
<form method="post" action="#">
<div class="third">
<span>用戶名</span>
<input type="text" name="username"/>
</div>
<div class="fourth">
<span>密 碼</span>
<input type="password" name="userpwd"/>
</div>
</form>
</div>
</div>
<div class="secondmain">
外邊距測試
</div>
</body>
</html>
例題三
<!DOCTYPE html>
<html>
<head>
<title>圖形</title>
<style type="text/css">
div{
border: 2px pink solid;
width: 200px;
height: 200px;
/* 如果想要一個圓，那么必須滿足寬和高一致，圓角取寬度或高度的二分之一*/
border-radius: 50%;
}
.a1{
border: 2px aqua solid;
width: 200px;
height: 100px;
/* 如果想要半圓，那么必須滿足寬是高的2倍，圓角取寬度的二分之一*/
border-radius: 100px 100px 0px 0px;
}
.a2{
border: 2px palegreen solid;
width: 100px;
height: 100px;
/* 如果想要四分之一圓，那么必須滿足寬和高相等，圓角取寬度相等值*/
border-radius: 0px 0px 100px 0px;
}
</style>
</head>
<body>
<div>
</div>
<div class="a1">
</div>
<div class="a2">
</div>
</body>
</html>
例題四
<!DOCTYPE html>
<html>
<head>
<title>盒子陰影</title>
<style type="text/css">
div{
border: 3px solid aqua;
width: 200px;
height: 200px;
}
div:hover{
box-shadow: 5px -5px 20px pink;
}
</style>
</head>
<body>
<a>
<div class="div01">
</div>
</a>
</body>
</html>
轉載于:https://www.cnblogs.com/tinghao/p/9895785.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： docker - 在centos7和wi
- 下一篇： 基于sentry的前端错误监控日志系统(