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

盒相关样式

2015-06-14 09:01 519 查看

CSS盒结构

CSS中的盒状模型用于描述一个为HTML元素形成的矩形盒状。CSS盒状模型还涉及为各个元素调整外边距、边框、内边距和内容的具体操作。

content 指内容，可以是文字、图片等元素。
padding 指内边距，也有人称之为空白、内补丁等。主要用来设置内容到边框之间的距离，就像一个缓冲带。
border 指边框，用于设置内容的边框线粗和样式等。
margin 指外边距，也可称为边界。用来设置一块内容与一块内容之间的距离。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box
{
height: 100px;
width: 450px;
margin: 20px;
padding: 20px;
border: solid 20px #c60;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box">盒状模型结构</div>
</body>
</html>

在默认布局下，当元素包含内容后，width和height会自动调整为内容的高度和宽度。

在CSS中，边界又称为外补丁，最简单的方法是使用margin属性。它可以接受任何长度单位，如像素、磅、英寸、厘

米、百分等。该属性可以有1～4个值。
margin: <top> <right> <bottom> <left>

网页元素边框可以用border属性来设置，该属性允许用户定义网页元素所有边框的样式、宽度和颜色。
border: width style color

内容溢出

overflow属性检索或设置当对象的内容溢出其指定高度及宽度时如何管理内容。
overflow: visible auto hidden scroll

visible 不剪切内容也不添加滚动条。假如显示声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条。
hidden 不显示超过对象尺寸的内容。
scroll 总是显示滚动条。

除此之外，还包含有overfllow-x和overflow-y属性，其参数与overflow属性近似相同。

控制浏览器的行为
box-sizing属性可以让用户通过计算一个元素宽度来指定控制浏览器的行为。
box-sizing: content-box border-box inherit
content-box 浏览器对盒模型的解释遵从W3C标准。
border-box 浏览器对盒模型的解释与IE6相同。

区域可缩放
resize属性设置使元素的区域可缩放，调节元素尺寸大小。适用于任意获得"overflow"属性条件的容器。
resize: none both horizontal vertical inherit
none 用户代理没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both 用户代理提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal 用户代理提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical 用户代理提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
inherit 默认继承。

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

标签：

相关文章推荐

新的分享

章节导航