css 盒子模型
2017-03-21 16:42
351 查看
为什么要理解盒子模块:
html界面的布局就像由多个盒子组成的界面,
理解盒子的结构,以满足不同的业务场景需要的布局。
Css 盒子模型:
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、
内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)
都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。下面是Box Model的图示:
说明:上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- bottom、padding-left)
、边框(border-top、border-right、border-bottom、border- left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距
下图是Css模型边距图解:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/** 通配符,代表所有标签 */
*{
padding: 0px;
margin: 0px;
}
/*ID选择器*/
#myDiv{
/*实际的宽高,width -左右边距+ 左右边框*/
width: 200px;
height: 300px;
border: 1px solid red;
/*
padding填充,内边距
*/
/*
1.上下左右的值
2.上下,左右
3.上,左右,下
4.上,右,下,左
*/
padding: 0px 10px 0px;
margin: 10px 20px 10px;
}
#myDiv2{
width: 200px;
height: 300px;
border: 1px solid green;
}
/*类选择器*/
.title{
color: blue;
font-size: 14px;
}
/*混合使用*/
span.title{
font-size: 25px;
}
div > p{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="myDiv">
<p>abcdef</p>
</div>
<div id="myDiv2">
</div>
<span class="title">
Javascripttest
</span>
<i class="title">ActionScript</i>
</body>
</html>
相关文章推荐
- css--盒子模型
- css 盒子模型
- CSS中的盒子模型
- CSS标准盒子模型
- 10-DIV+CSS-盒子模型实例
- CSS--CSS入门/CSS语法/盒子模型/CSS定位
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型
- [HTML/CSS]盒子模型,块级元素和行内元素
- CSS学习1——基本布局以及盒子模型
- 【技术】DIV+CSS两种盒子模型
- 关于CSS里盒子模型的一些感触
- CSS 盒子模型
- 标准W3C盒子模型和IE盒子模型---CSS布局经典盒子模型[转]
- 盒子模型 以及CSS的box-sizing属性。
- CSS基础之盒子模型及浮动布局
- 从div盒子模型谈如何写可维护的css代码
- 初学牛腩CSS核心内容标准流,盒子模型,浮动,定位
- css之盒子模型
- CSS——盒子模型
- 从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动