css1：盒模型

TalkingData 发布于2019-08-30 10:59 / 3144人阅读

摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。

最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？
嗯，有办法，box-sizing: border-box;就可以啦。
嗯，过关啦，那么标准盒模型和怪异盒模型分别是什么东西呢？

盒模型

包括content-内容，padding-内边距，border-边框，margin-外边距。具体参见链接描述

常见的css盒模型分两类：怪异（IE）盒模型和标准盒模型，两种盒模型有着很大的不同。

	提出组织	元素宽度计算方式（高度计算类比宽度）
标准盒模型	w3c	content宽度
怪异（IE）盒模型	IE	content宽度 + padding值 + border值

用图片表示可能更形象一点：

上文说过，有办法让这两种盒模型互相转换，那就是通过box-sizing这个属性： box-sizing就是告诉浏览器怎么去计算一个元素的宽高。

有两个取值：content-box和border-box，分别对应两种计算方式。
content-box只包含元素内容的宽度。如果给设置了border或者padding，元素的总宽度就要加上border和padding值。
border-box包含元素内容的宽度，padding和border值。
实例如下：

content box

分割线

border box

结果如下：

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114700.html

【转】scrollTop为0的问题

摘要：所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。不过加上后，则显示正常。即获取高度时使用，经测试，代码在下都能显示正常了。主要是浏览器的模式，有两个，。其中前者是怪异模式，后者是标准模式。原文地址http://wo13145219.iteye.com/blog/2001598 一、先遇到document.body.scrollTop值为0的问题　　做页面的时候可能会用到位置...

pakolagij 2019-08-19 18:15 评论0 收藏0
CSS盒模型以及与之相关的知识点

CSS盒模型以及与之相关的知识点盒模型分为哪几种 - 标准盒模型 - IE盒模型两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...

channg 2019-08-30 11:11 评论0 收藏0
CSS盒模型以及与之相关的知识点

CSS盒模型以及与之相关的知识点盒模型分为哪几种 - 标准盒模型 - IE盒模型两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...

Ashin 2019-08-02 15:20 评论0 收藏0
CSS盒模型以及与之相关的知识点

CSS盒模型以及与之相关的知识点盒模型分为哪几种 - 标准盒模型 - IE盒模型两者区别在于 width 和 height 计算方式上的不同: 标准盒模型 width = content width; IE核模型 width = content width + padding + border CSS 如何来设置这两种模型 box-sizing: border-box box-siz...

frolc 2019-08-23 18:10 评论0 收藏0
关于css margin，你需要知道的一切

摘要：前两个元素之间的是，因为较小的顶部与较大的底部相结合。这是由于两个重叠造成的。同样，这种行为也有一定的逻辑。这意味着在使用百分比时，元素周围的大小都是相同的。为了保证的可读性，本文采用意译而非直译。当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子...

FreeZinG 2019-08-30 15:44 评论0 收藏0