您的位置：首页 > Web前端 > CSS

css盒子模型part3

2015-11-18 21:40 525 查看

许久没有接触前端了，然而也并没有进行温习，许多便不再熟息，最近又重新接触，找了些资料，于是乎便将基础的东西整理一下。

css就是设置网页的各个组成部分的表现形式。引入css的核心目的就是实现网页的结构内容和表现形式的分离，将原来html所承担的与结构无关的功能剥离出来。

而所谓的盒子模式，就是一种用来编排网页的一种排版方式。由于其出色且灵活的表现，可通过大小不一的盒子或者是盒子之间的嵌套来布局网页，使得网页更加的简洁，更加的方便，尤其是css3中的弹性盒子模型的出现，为网页带来了不一样的布局体验（ps,当然本人并没有接触过css3~~）。

关于盒子模型的基本属性：内容(content)、填充(padding)、边框(border)、边界(margin)。

（ps，从百度盗的图片哈哈）

（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

盒子模型的border样式：

div{
<!--边框-->
border-width:2px;
border-style:solid;
border-color:red;
<!--上下左右border-->
<!--border-top,border-right,border-left-->
}

填充:

div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}

边界：

div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}

简单的盒子模型

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的盒子模型</title>
</head>
<style type="text/css">

body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
text-align: center;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 100px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: red;
font-size: 16px;
text-align:center;
}
.mainBox p {
line-height: 1.5em;
text-align:center;
margin: 35px 5px 5px 5px;
}

</style>
</head>

<body>
<div class="mainBox">
<h3>1.....</h3>
<p>简单的css盒子模型</p>
</div>
<div class="mainBox">
<h3>2.......</h3>
<p>简单的css盒子模型</p>
</div>
<div class="mainBox">
<h3>3......</h3>
<p>简单的css盒子模型</p>
</div>

</body>
</html>

————–初学—-共勉！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css盒子模型 css

相关文章推荐

新的分享

章节导航