任务9_CSS盒模型

2016-08-14 本文已影响0人饥人谷_江君

课程目标

掌握盒模型相关知识点
了解IE盒模型和W3C 盒模型区别

学习建议

视频未覆盖的知识点会提供详细的文档资料

预习视频

课程任务

问答

一、盒模型包括哪些属性

盒模型的属性

盒模型属性
根据以上图件可以看出盒模型属性由里向外包括：

element（content）：元素，盒子的内容，显示文本和图像
padding：内边距，定义元素边框与元素内容之间的空白区域。
接受长度值或百分比值，但不允许使用负值
会受到框中填充的背景颜色影响
padding-top,padding-right,padding-bottom,padding-left
border：围绕元素内容和内边距的一条或多条线
每个边框有 3 个方面：宽度、样式，以及颜色
边框是受到盒子的背景颜色影响
如果希望边框出现，就必须声明一个边框样式
margin：围绕在元素边框的空白区域
接受任何长度单位、百分数值甚至负值。
margin-top,margin-right,margin-bottom,margin-left

如果要它显示你设计的宽高大小，使用命令box-sizing: border-box;，这样有的时候会便于计算。

行内元素设置盒模型属性

对于行内元素，手动设置宽高是无效的，它本身的宽高是由自身决定的。
行内元素可以设置margin、padding，但是只有水平方向，也就是左右方向的margin和padding是有效的，垂直方向，也就是上下方向的margin和padding是无效的。而如果上下padding如果设置边框或者背景色，会把边框和背景色撑开。但是它本身并不会挤占空间，这样的话可能会出现一个覆盖的问题。

以下为实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>行内元素设置盒模型属性</title>
    <style>
        .span-child {
            padding: 20px;
            border: 1px solid red;
            background: yellow;
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <span class="span">
    我是一个行内元素我是一个行内元素我是一个行内元素
    <br>我是一个行内元素<span class="span-child">我是行内元素的一个孩子</span>我是一个行内元素
    <br>我是一个行内元素我是一个行内元素我是一个行内元素</span>
</body>

</html>

以下为输出结果

行内元素设置盒模型输出结果

外边距的合并
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距相遇又分为以下三种情况

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

以下为实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>外边距合并</title>
    <style>
        * {
            width: 100px;
            height: 100px;
            padding: 0;
            margin: 0;
        }

        .div1 {
            margin: 10px 0;
            background: red;
        }

        .div2 {
            background: blue;
            margin: 20px 0;
        }

        .outer {
            background: green;
            margin: 40px 0;
        }

        .inner {
            width: 50px;
            height: 50px;
            background: white;
            margin: 60px 0;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

以下为输出结果

外边距实例输出结果

注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align: center是让块级元素内的元素（文本或图片）居中，只能作用在块级元素。

附块级元素与行内元素的分类：

块级元素：div、p、h1…h6、table、tr、ul、li、dl、dt、form
行内元素：a、span、img、input、button、em、textarea

以下为实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>盒模型中的水平居中</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .container {
        width: 300px;
        height: 300px;
        margin: 50px auto;
        background: red;
    }
    
    .child {
        width: 200px;
        height: 200px;
        text-align: center;
        background: blue;
    }
</style>

<body>
    <div class="container">
        <div class="child">我是江君的孩子</div>
    </div>
</body>

</html>

以下为输出结果

盒模型的水平居中输出结果

三、如果遇到一个属性想知道兼容性，在哪查看?

通过网址 http://caniuse.com/ 去查询其兼容性
比如想要查代码box-sizing的兼容性

box-sizing兼容性

四、IE 盒模型和W3C盒模型有什么区别?

IE盒模型

IE6 IE7 IE8 IE9，不声明doctype，触发quirks怪异模式，采用IE盒模型展现。非IE浏览器仍然采用标准模式渲染
IE盒模型宽度=边框+padding+内容宽度
border区域不会填充背景色

IE盒模型

W3C盒模型

IE6 IE7 IE8 IE9，声明doctype，触发标准模式，采用W3C盒模型展现。非IE浏览器采用标准模式渲染
W3C盒模型宽度= 内容宽度
div的背景颜色充满了padding和border

标准盒模型

兼容方案
使用css3新样式box-sizing，box-sizing有两个值

content-box：w3c标准盒模型
border-box：“IE盒模型”

参考文章

IE盒模型与W3C盒模型浅总结

五、以下代码的作用？兼容性？

*{ box-sizing: border-box;}

上文中讲到，盒子模型分为标准盒模型和IE盒模型，两个模型不尽相同，兼容方案就是利用该代码,将标准盒模型以IE盒模型的形式来展现，以下为box-sizing属性值的的详细展开

box-sizing属性值

代码
写一个 btn 的class，任何 a，span，div，button添加此class后后变成如下按钮的样式（鼠标hover背景色#c14d21，鼠标按下背景色#e25f31）。

<a class="btn" href="#">确定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 发送</button>

预览地址

task_09_01

本教程版权归本人和饥人谷所有，转载须说明来源

任务9_CSS盒模型

课程目标

学习建议

预习视频

课程任务

问答

猜你喜欢

热点阅读