• 950阅读
  • 1回复

CSS盒子模型 [复制链接]

上一主题 下一主题
离线啊冲
 

只看楼主 倒序阅读 使用道具 楼主  发表于: 2016-02-02


CSS盒子模型

发表于 2015 年 11 月 13 日


如上图所示,元素到盒子的边距叫做Padding内边距,边框是border,盒子到另外一个盒子的边距叫做Margin外边距
下面这个例子index.html写了关于盒子模型的内容
<html>
<head>
<title>CSS盒子模型</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h2>下面演示了一个CSS盒子模型</h2>
<!-- 下面演示一个大盒子中包含小的盒子,以及边框效果和边距效果 -->
<div class="wrapper">
<div class="content">
<h3>盒子模型测试</h3>
<h3>盒子模型测试</h3>
<h3>盒子模型测试</h3>
</div>
</div>
</body>
</html>
下面这个例子index.css写了关于盒子模型的样式
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式
/* 由于DIV默认是没有大小的,所以这里,我们设置一下宽度高度 */
.wrapper{
margin:auto; /*让这个盒子居中显示 */
width:500px;
height:500px;
background-color:gray;
border:5px solid green;
border-radius:10px;
box-shadow:5px 5px 5px red;
}
.content{
margin:30px;
padding:30px;
width:270px;
height:270px;
background-color:red;
border:10px solid yellow;
border-radius:10px;
}
h2{
font-size:40px;
text-align:center;
color:black;
text-shadow:5px 5px 5px red;
}
/* 由于标签属性默认之间都有边距(可能是浏览器默认给的属性)
所以这里我们设置下元素之间的间距,也就是margin */
h3{
margin:0;
}

善者 慈悲心常在 无怨无恨 以苦为乐
默认压缩密码www.hifyl.com
文件分享密码问题:http://www.hifyl.com/read-htm-tid-4444.html
离线v2680267313

只看该作者 沙发  发表于: 2016-04-30
用户被禁言,该主题自动屏蔽!
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个