盒模型

1.盒模型包括哪些属性

盒模型本质是一个盒子,封装周围的 HTML 元素,盒子内部包括了四部分:边界(间隔),边框,填充(间隙),内容。

  • 边界(Margin):清除边框区域。Margin 没有背景颜色,它是完全透明的,也就是在边距外面自动留出的一段空白
  • 边框(Border):边框周围的填充和内容,边框是受到盒子的背景颜色影响
  • 填充(Padding):清楚内容周围的区域,会受到框中填充的背景颜色影响,也就是盒子内装的东西和边框的距离。padding 的顺序是上、右、下、左(顺时针记忆)
  • 内容(Content):盒子的内容,显示文本和图像

盒模型总共有两种模式:标准模式与怪异模式
我举了一个例子来演示标准模式与怪异模式的差别,下面是演示代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet">
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 20px solid black;
            padding: 50px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>


</html>
  • 标准模式下盒模型如下图,总宽度和高度=width/height+padding+border+margin
标准模式.png
  • 怪异模式下盒模型如下图,盒子总宽度与高度包含了内边距(padding)和边框(border)在内,所以盒子总宽度/高度 = width/height+margin = 内容区宽度/高度+padding+border+margin
怪异模式.png

<strong>PS:更改模式就需用到 css3 属性 box-sizing,它有两个值,分别是 content-box(默认模式,即标准模式)与 border-box(怪异模式)。

参考 CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性


2. text-align: center 的作用是什么,作用在什么元素上?能让什么元素水平居中

规定元素中的文本水平居中,作用在行内元素上,能让元素中的副容器水平居中,不针对元素本身


3.如果遇到一个属性想知道兼容性,在哪查看?

可以通过 can i use 中来查询


4.IE 盒模型和 W3C 盒模型有什么区别?

  • IE 盒模型就等于一个怪异模式的盒子模型,也就是说总宽度/高度 = width/height+margin = 内容区宽度/高度+padding+border+margin
  • W3C 盒模型就是标准模式的盒子模型,总宽度和高度=width/height+padding+border+margin
  • ie678怪异模式(不添加 doctype)使用 ie 盒模型;chrome,ie9+, ie678(添加 doctype) 使用标准盒模型

5.以下代码的作用?兼容性?

*{
  box-sizing: border-box;
}
  • 作用:让该 html 文件下的代码盒子模型均使用怪异模式,即宽度= 内容宽度
兼容性.png

<strong>本文版权归作者和饥人谷所有,转载请注明出处

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 3,496评论 0 3
  • 一.盒模型包括哪些属性? 盒模型包括的属性有: margin:外边距。它包括margin-top、margin-r...
    婷楼沐熙阅读 2,117评论 0 2
  • 1.盒模型包括哪些属性 盒模型是css中元素大小的呈现方式,每一个元素都有盒模型。 margin属性,margin...
    墨月千楼阅读 976评论 0 0
  • 定义和用法 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 arrayObject.u...
    亭止阅读 1,254评论 0 0