CSS框模型

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

这章我们将学习css中的框模型、每一个文本在网页中都是以块的形式存在，每一个文本在网页中的定位都要利用到框模型的内边距与外边距问题，边距值的给定关乎着页面显示的效果。

一.框模型（box model）：

1.框模型（又叫：方框属性，盒子属性，盒子模型）：设置了元素框处理元素内容，内边距，边框，外边距，高度，宽度

元素实际宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+又外边框

1.width 和 height指内容区域的宽度和高度

2.增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

2.外边框

1.什么是外边框：围绕在元素边框周围的空白区域，页面会为元素增加额外的空白距离，外边距是透明的，位置在方框外

2.属性：

margin：

1.统一设置四个方向的外边距

margin：值；

margin：10px

2.单方向设置：

margin-left/right/top/bottom：value；

3.margin简写

margin：value：（四个方向）；

margin：value（上下） value（左右）；

margin：value（上） value（左右） value（下）；

margin：value（上） valuye（右） value（下） value（左）；

4.margin取值（单位）：

px，%；

auto：如果左右外边距设置为 auto 的话，那么当前元素在它外层容器中就会水平居中显示，多数

使用在块级元素在其外层容器内的水平居中

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
margin:100px auto 0px auto;
}
</style>
</head>
<body>
<div></div>
</body></html>

复制代码

5.外边距合并

当两个垂直外边距相遇时，他们将形成1格外边距，称为外边距合并，外边距的值，以大为主（只针对垂直）

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
}
#d1{
margin-bottom:100px;
}
#d2{
margin-top:200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body></html>

复制代码

6.问题

内外嵌套的div元素，如果这种内层div的margin-top，默认会作用于外层div的margin-top上，而内层没有任何效果

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
width:100px;
height:100px;
background:yellow;
}
#d2{
margin-top:50px;
width:60px;
height:50px;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body></html>

复制代码

出现这种情况的解决方案：

1.外层元素添加边框

2.通过外层div调节padding实现

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
width:100px;
height:100px;
background:yellow;
border:1px solid black;
}
#d2{
margin-top:50px;
width:60px;
height:50px;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body></html>

复制代码

3.内边距

1.什么是内边距：内容区域与边框之间的空间

2.特点：元素一旦设置了内边距后，会扩大整个元素区域

3.属性

padding：value；上下左右

padding：value（上下） value（左右）；

padding：value（上） value（左右） value（下）；

padding：value（上） value（又） value（下） value（左）；

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
border:1px solid red;
padding:20px 30px;
}
</style>
</head>
<body>
<span id="d1">
这是一段文本
</span>
</body></html>

复制代码

这是没给padding值的效果:

这是给上下内边距20px，左右30px的效果：

4.css重置/重写

取消了一些元素（ul，p，h1）自带的样式

<!DOCTYPE html-->
<html>
<head>
<meta charset="utf-8"/>
<style>
div.box{
width:200px;
height:100px;
padding:20px;
margin:40px;
border:2px solid red;
}
</style>
</head>
<div class="box">
this is content.
this ia content.this is content.
</div>
<body> </body>

复制代码

[HTML5开发] CSS框模型

[HTML5开发] CSS框模型

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

最佳新人

用微信扫一扫