盒子模型最内content-----间距padding边框border外边框margin(透明)
顺时针：上右下左top right bottom left
bother-style：dashed（虚线）solid（实线）
宽度：thin thick medium分别为135
bother的width color
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
p{
border-style: solid;
border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;/* sets border width on all sides */
border-color: lime;
padding: 30px;
margin: 12px 22px 32px 50px;
height:100px;
width: 100px;
border-top-color: red;
border-right-color:green;
border-bottom-color:blue;
}
</STYLE>
</HEAD>
<BODY>
<p>Second element of list is
a bit longer to illustrate wrapping.
</p>
</BODY>
</HTML>
bother的style设置方法
<style>p{
border:thick solid red;
}</style>
<p style="border-style:none">爱的色放士大夫</p>
<p style="border-style:hidden">爱的色放士大夫</p>
<p style="border-style:dotted">爱的色放士大夫</p>
<p style="border-style:dashed">啊打发士大夫</p>
<p style="border-style:solid">爱的色放士大夫</p>
<p style="border-style:groove">爱的色放士大夫</p>
<p style="border-style:ridge">爱的色放士大夫</p>
<p style="border-style:inset">爱的色放士大夫</p>
注：盒子模型上下margin会重叠区最大，左右和内外累加。
<style>
p,h1{
border:3px solid black;
color:white;
}
#red{
background:red;
height:200px;
width:200px;
padding: 30px;
}
#blue{
background:blue;
height:100px;
width:100px;
margin-top: 30px;
}
</style>
<h1 id="red">
<p id="blue">blue</p>
</h1>
网友评论