我理解的css盒模型以及使用场景

栏目: CSS · 发布时间: 5年前

内容简介:- css盒模型是什么网页设计中css技术所使用的一种思维模型

- css盒模型是什么

网页设计中css技术所使用的一种思维模型

- 盒模型的组成

我理解的css盒模型以及使用场景

- 盒模型的两种标准(在不考虑css3的情况下)

我理解的css盒模型以及使用场景

两种模型唯一的差异就在元素宽高度的定义

w3c标准模型的 元素宽高=内容(content)的宽高

IE模型的 元素宽高=内容(content)+填充(padding)+边框 (border) 的总宽高

在html头部有一个<!Doctype html>声明,浏览器会根据这个声明来判断文件是什么类型的,也会根据这个声明来解析文件

  1. 当我们写了doc声明的时候,无论哪种内核的浏览器都会解析为标准模型,元素宽度=content的宽度,即当我们设置width:100px的时候,这个宽度指的就只是content的宽度
    总宽度=我们设置的width+padding+border
  2. 当头部的doc声明缺失的时候,部分ie内核的浏览器则会触发ie模式 即怪异模式(ie6,7,8)width=content+padding+border
    总宽度=width

- 为什么会出现不同模型

当年微软的IE浏览器占据超过80%市场份额的时候,想自己独立制定一套浏览器标准,其中就包括IE的盒模型,但是有很多公司不同意IE的做法,他们遵循的是W3C的标准来定制浏览器,也就造成了现在浏览器不同的CSS盒模型,但是仍有很多老网站采用的是老IE的标准(怪异模式),因此很多浏览器保留了IE的怪异模式。

- box-sizing

在CSS3中我们可以通过设置 box-sizing的属性来完成标准或者怪异模式之间的切换。

(1)box-sizing : content-box 采用标准模式 也是默认样式

(2)box-sizing: border-box 采用ie怪异模式

- content-box的缺点

目前任何浏览器默认使用的都是content-box,但是这个内容盒子有一个缺点,举个栗子

假设我们想要两个子容器float:left,宽度各50%,然后给一点padding,最后让子容器并排充满父容器,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .father-box{
      width: 500px;
      background: #0ba1b5;
    }
    .left-box{
      width: 50%;
      padding: 10px;
      height: 100px;
      float: left;
      background: #b23e35;
    }
    .right-box{
      width: 50%;
      padding: 10px;
      float: left;
      height: 100px;
      background:#77b55a;
    }

  </style>
</head>
<body>
<div class="father-box">
  <div class="left-box">left-box</div>
  <div class="right-box">right-box</div>
</div>
</body>
</html>

我们在浏览器中运行之后发现,想象的很美好 结果却并不美好,因为两个子元素宽度超过了50%,导致了折行,于是宽度就不能设置为50%了,只能将宽度减去padding的值,在这种时候,border-sizing就派上用场了

我理解的css盒模型以及使用场景

了解border-sizing

border-sizing是css3新增的声明,很多开发者可能都不曾用过,既然标准模型诞生的早,又叫标准模型,为什么还要出现border-sizing呢

border-sizing的优点

border-sizing的诞生就是为了解决content-sizing的缺点,border-sizing意味着子容器的padding和border厚度都算在50%内,这样你就可以随意修改padding和border的值,而不用担心父容易被撑爆

border-sizing的兼容性

ie8也支持该属性,所以不用担心兼容性问题

border-box的使用场合

目前最流行的css框架几乎都采用了border-sizing,框架想要具备栅格系统,肯定要用border-sizing

通常情况下 你只需要在必须使用border-sizing元素的身上使用这个属性,其他元素都保持content-sizing就好了

子元素有padding和border,或者至少有其一,并且需要给子元素设定100%宽度(或者50%宽度等等),这时候显然需要border-box。设为border-box之后,padding和border的厚度可以随意调,并不会溢出父元素。如果是content-box,那么,宽度必然会溢出,而且,为了不溢出,你设定子元素的宽度就只能是一个定值,或者是一个计算值(比如calc(100%- 20px))。

由于之前一直对于css盒模型的理解模棱两可,所以最近趁有时间查了很多相关文章,归纳了以上内容终于搞懂了这个难啃的骨头,参考的资料有以下几篇文章,感兴趣的可以自己查阅,由于自己也是边理解边总结的内容,如果文章中有什么不对的地方还请大家指正。

https://blog.csdn.net/qq_3190...

https://www.cnblogs.com/cheng...

https://www.jianshu.com/p/006...

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微信营销与运营

微信营销与运营

秦阳、秋叶 / 人民邮电出版社 / 2016-12-1 / 39.80

《微信营销与运营》共分七章。第1章重点介绍了微信营销的概念、价值和特征,引导读者全面认识微信营销;第2章介绍了个人微信号的运营技巧和手法;第3章重点介绍了微信公众平台的基础操作入门,申请适合自己的公众平台类型并进行基本设置;第4章介绍了微信运营的规划策略,落实公众号的定位、内容问题;第5章介绍微信运营中包括排版、增加粉丝、提升阅读量等运营实战中的经验和手法,并了解微信运营的整个运营框架体系;第6章......一起来看看 《微信营销与运营》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具