继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

第十章 DIV CSS学习笔记

手记佰篇
关注TA
已关注
手记 60
粉丝 58
获赞 272

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。

box {

width: 70px;
margin: 10px;
padding: 5px;
}
<head>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;height:100px;background:#ccc;}
.main{background:#f00;height:500px;}
.left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;}
.right{background:#9C9;height:500px;margin-left:210px;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
<head>
<style type="text/css">
*{margin:0; padding:0;}

wrap{width:970px; margin:0 auto;}
mainbody{position:relative; margin-top:15px;}
left{float:left;width:110px; border:1px solid #999;}
mid{margin-left:123px;width:650px;border:1px solid #999;}
right{position:absolute;top:0px;margin-left:792px;border:1px solid #999;}

</style>
</head>

<body>
<div id="wrap">
<div id="header"><img src="" width="970" height="88" /></div>
<div id="mainbody">
<div id="left"><img src="" width="109" height="487" /></div>
<div id="mid"><img src="" width="649" height="439" /></div>
<div id="right"><p>欢迎使用金山软件出品的爱词霸,在线查询你英语词汇、句子释义</p><img src="" width="177" height="329" /></div>
</div>
</div>
</body>

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP