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

【CSS】盒子模型

2016-10-01 02:37 260 查看

前言 

首先我们来看一张画框的图：



我们很容易看到它的一些属性：

       外边距（margin）：上下左右
       内边距（padding）：上下左右
       内容（content）：宽和高
       画框：宽

CSS盒子模型

       

       其实，每个画框都是一个盒子。在CSS中，我们定义了标签的以上属性，就像是用一个盒子把这些属性装到一起了，而这些属性我们可以用日常生活中的常见事物——盒子做一个比喻来理解，故称之为盒子模型。

       好了，咱们来看例子吧。首先看代码：
<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
<div class ="test_menu">栏目一</div>
<div class ="test_menu">栏目二</div>
<div class ="test_menu">栏目三</div>
<div class ="test_title">标题栏</div>
</body></span>
<span style="font-family:Microsoft YaHei;font-size:18px;">.test_menu,.test_title {
color:#663300;/*文字颜色*/
border-width:1px;/*边界线宽度*/
border-color:#f00;  /*边界线颜色*/
border-style:solid; /*实线样式，例如实线，虚线*/
/*border:1px solid #f00;  这一个和上面的三个是一样的效果*/
margin-top:10px;/*外上边距为10px*/
padding-top:10px;/*内上边距为10px*/
padding-left:10px;/*内左边距为10px*/
padding-bottom:10px;/*内下边距为10px*/
width:200px;/*内容的宽*/
}</span>


效果图如下：



结语

           
         现在只了解这么多，算是笔记吧，以备后用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航