元素在页面中显示成一个方块，类似一个盒子
需要设置的有：
盒子的宽度（width）
盒子的高度（height）
盒子的边框（border）
盒子的内容和边框之间的间距 （padding）
盒子与盒子之间的间距（margin）
border-right:30px dotted #000;
solid 实线
dotted 点线
dashed 虚线
简写的方式 顺时针的标注
padding:20px 80px 100px 40px; 上右下左
padding:20px 80px 100px;
padding:20px 80px;
盒子模型里面的注释是 /* content */ 不是 <!-- -->
存储文字案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box_model</title>
<style type="text/css">
.box{
width:500px;
height:200px;
color:green;
background-color:gold;
/*
border-top-color:#000;
border-top-width:10px;
border-top-style:dotted;
border-top:30px solid #000;
border-left:30px dotted #000;
border-right:30px dotted #000;
border-bottom:30px solid #000;
*/
border:30px solid #000;
/*
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
padding:20px 30px 30px;
*/
padding:20px;
}
</style>
</head>
<body>
<div class="box">Lonely tonight, like the sea tonight, love disaster.
My love for you has turned into this lonely sea.
Think your heart has made your shadow run rampant in your mind!
Lonely tonight, like the sea tonight, love disaster.
My love for you has turned into this lonely sea.
Think your heart has made your shadow run rampant in your mind!
Lonely tonight, like the sea tonight, love disaster.
My love for you has turned into this lonely sea.
Think your heart has made your shadow run rampant in your mind!
Lonely tonight, like the sea tonight, love disaster.
My love for you has turned into this lonely sea.
Think your heart has made your shadow run rampant in your mind!
Lonely tonight, like the sea tonight, love disaster.
My love for you has turned into this lonely sea.
Think your heart has made your shadow run rampant in your mind!
Lonely tonight, like the sea tonight, love disaster.
</div>
</body>
</html>
margin 是外间距
盒子模型练习 width:140px; 需要计算后减去部分值 200 - 60 = 140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box_test</title>
<style type="text/css">
.box{
background-color:gold;
width:140px;
height:140px;
border:10px solid #000;
padding:20px;
}
</style>
</head>
<body>
<div class="box">this is a box test!</div>
</body>
</html>
盒子的width和height设置的是盒子内容的宽和高，盒子的真实尺寸计算公式
盒子宽度=width+padding左右+border左右
盒子高度=height+padding上下+border上下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box_test</title>
<style type="text/css">
.box01,.box02,.box03{
width:50px;
height:50px;
background-color:gold;
}
.box02,.box03{
border:50px solid #000;
}
.box03{
padding:50px;
}
</style>
</head>
<body>
<!--<h1 class="mytitle"></h1>-->
<div class="box01">1</div><br/>
<div class="box02">2</div><br/>
<div class="box03">3</div><br/>
</body>
</html>
新闻标题的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>news</title>
<style type="text/css">
.news_title{
width:380px;
height:35px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
color:#333;
font-family:"Microsoft Yahei";
font-weight:normal;
padding-top:15px;
line-height:20px;
padding-left:20px;
}
</style>
</head>
<body>
<h3 class="news_title">news_menu</h3>
</body>
</html>
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
