盒子模型

最新推荐文章于 2024-07-27 09:56:28 发布

原创最新推荐文章于 2024-07-27 09:56:28 发布 · 592 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vuejs

本文详细介绍了CSS中的盒子模型、浮动原理及清除浮动的方法，并通过实例展示了如何利用这些概念实现简单的两列布局。

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。

一些元素，默认带有padding，比如ul标签。

所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。

可以使用*进行清除：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }

举例：利用border属性画一个三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="box.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!--<div class="box1">这是盒子1的内容</div>-->
<!--<div class="box2">这是盒子2的内容</div>-->
<div></div>
</body>
</html>

div{
    width: 0px;
    height: 0px;
    border: 50px solid white;
    border-top-color: red;
    border-bottom: none;

}

div属于快元素，从新行开始，占一整行。

浮动float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。

left right

清除浮动：clear。规定元素的那一侧不允许其他浮动元素。

浮动会让元素塌陷，即被浮动元素的父元素不具有高度，例如一个父元素包含了浮动元素，它将塌陷具有零高度处理方法，1 浮动元素后加 div设置 clear:both;height:0;overflow:hidden; 2 使用clearfix 3 设置父元素浮动

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值：	visible
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

实现如下图所示的简单两列布局，整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。

效果图:

/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
/*------法一
.mainBox{width:960px;
height:300px;
background-color:#cff;
clear:left;}
------*/

/*------法二------*/

.mainBox{width:960px;
background-color:#CFF;
overflow:hidden;
*zoom:1;}

.lBox{width:740px;
height:300px;
background-color:#c9f;
float:left;}

.rBox{width:210px;
height:300px;
background-color:#fcf;
float:right;}
/*------总结：常用的清除浮动的方法。
1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

3、使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

此三种方法各有利弊，使用时应择优选择，个人习惯于第一种，比较稳定可靠。
参考链接：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html
------*/

</style>
</head>

<body>

<div class="mainBox">
<div class="lBox"></div>
<div class="rBox"></div>
</div>

</body>
</html>

或者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

*
{
   padding:0;
   margin:0;
}
.mainBox
{
   width:960px;
   margin:0 auto;
   background-color:#CFF;
   overflow:visible;
}
.leftBox
{
   width:740px;
   height:300px;
   background-color:#C9F;
   float:left;
}
.rightBox
{
   width:210px;
   height:300px;
   background-color:#FCF;
   float:right;
}
.clear
{
   clear:both;
   height:0;/*解决IE6下有高度的问题*/
   overflow:hidden;
}
</style>
</head>