漫谈CSS之盒子模型

最新推荐文章于 2022-11-19 23:55:48 发布

daisy_Hawen

最新推荐文章于 2022-11-19 23:55:48 发布

阅读量753

点赞数

分类专栏： css 文章标签： css 盒模型

本文链接：https://blog.csdn.net/sinat_25127047/article/details/50560732

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Css盒模型

css中最讨厌的莫过于盒模型了，一定要把盒模型搞明白
关于页面布局的两种属性：

浮动float
定位

浮动

浮动布局示例

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link  rel="stylesheet"type="text/css" href="mystyle.css">
    <title>float</title>
</head>
<body>
<div id="box1"></div>
<div id="box1"></div>
</body>
</html>

设置两个盒子模型：一个红盒子（200px*200px），一个蓝盒子（400*300）

#box1{
    background: red;
    width:200px;
    height: 200px;
}

#box2{
    background: blue;
    width:400px;
    height:300px;
}

具体显示如图，蓝盒子被红盒子挤到下面去了
这里写图片描述

#box1{
    background: red;
    width:200px;
    height: 200px;
    float:left;
}

给box1加一个float:left;

可以看到红蓝盒子重叠了，如何让两个盒子并列呢
这里写图片描述

#box2{
    background: blue;
    width:400px;
    height:300px;
    float:left;
}

给box2加一个float:left;
这里写图片描述

并列显示了！
还有一种解决办法是将box2 {Clear: left;}解决了重叠，然而box2在box1下面了？并没有达到效果：
CLEAR属性会强迫段落出现在图片流终止处。使用CLEAR属性，前一段结束后第二片将在下一段的首行显示，图片不是与第二段对齐，而是另起一行。

父元素塌陷问题

比如，我们想要的如下效果：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>

 .father-div{
            background-color: #000000;
 }
        .items{
            margin: 10px;
 float: left;
 height: 100px;
 background-color: #FF0000;
 }
        .next-div{
            background-color: #0099FF;
 height: 100px;
 }
    </style>
    <body>
        <div class="father-div">
            <div class="items">第一个</div>
            <div class="items">第二个</div>
            <div class="items">第三个</div>
        </div>
        <div class="next-div">next-div</div>
    </body>
</html>

却发现实际运行效果是这样的：
这里写图片描述

可以看到，father-div本应该包裹三个items，但是它的高度却消失了。
出现这种情况的时候，我们可以通过如下几种方法来解决：
1. 在father-div里加入height属性，该方法适用于子元素高度已知并且固定的情况。
2. 在最后一个子元素后加入

，清除浮动元素。
3. 在father-div里加入overflow:hidden属性。
这里推荐后两种方法。
可以参考 http://www.w3cfuns.com/article-5598795-1-1.html的讲解

关于定位

Position：static , relative , absolute

static ：默认
relative：相对位置
absolute：绝对位置

如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止

relative和absolute实现布局效果

relative和absolute实现布局效果
这一步只要想演示一下使用相对定位和绝对定位实现的两例布局。在前面的基础上，div-1进行相对定位，而div-1a和div-1b进行绝对定位，从而实现两列布局的效果：

#div-1 {
       position:relative;
      }
          #div-1a {
           position:absolute;
          top:0;
          right:0;
         width:200px;
         }
        #div-1b {
        position:absolute;
             top:0;
             left:0;
           width:200px;
            }

效果
这里写图片描述
最近又发现的问题，代码如下，最近在学习jQuery，然互，下面的代码很明显是两个按钮，一个控制盒子左移，一个控制盒子右移这行代码，

，加入没有设置position是absolute的话，是无效的，盒子不会移动。但是我们可以看到盒子的left在变化，也就是说如果position：static，是不再受left影响。

<body>
<button id="btn-1" ></button>
<button id="btn-2" ></button>
<div id="box" style="width: 20px; height:20px;background: blue;position: absolute"></div>
<script>
    $(function(){
        $("#btn-1").bind("click",function(){
            $("div").animate({
                left:"+=20px"
            },3000)
        });
        $("#btn-2").bind("click",function(){
            $("div").animate({
                left:"-=20px"
            },3000);
        })
    })
</script>
</body>

兼容性问题

CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；他们不同之处呢？两者的计算方法不一至：
1、W3C的标准Box Model:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

2、IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算（元素大小）*/
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)


.boxtest {
    border: 20px solid;
    padding: 30px;
    margin: 30px;
    background: #ffc;
    width: 300px;
 }

解决这种不兼容的问题也很简单，用CSS3的box-sizing属性

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>box-sizing_CSS参考手册_web前端开发参考手册系列</title>
    <style>
        .test{
        width:200px;
        height:70px;
        padding:10px;
        border:15px solid #999;
        -moz-box-sizing:content-box;
        -ms-box-sizing:content-box;
        box-sizing:content-box;
        background:#eee;}//标准盒模式
        .test2{
        width:200px;
        height:70px;
        padding:10px;
        border:15px solid #999;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
        background:#eee;
        margin-top:20px;}//怪异盒模式
    </style>
</head>
<body>
<div class="test">content-box</div>
<div class="test2">border-box</div>
 //怪异模式盒模型定义的width（定义）=padding*2+width（实际）+border*2 实际width=150px=200px-25*2

</body>
</html>