CSS3总结四:盒模型(box)
盒模型:标准盒模型、混杂盒模型
- 什么时候会触发混杂模式?
- 为什么要混杂模式渲染规则盒模型?
- box-sizing:content-box、border-box
- 关于盒模型的一些其他样式和属性值
一、盒模型:标准渲染规则盒模型、混杂模式渲染规则盒模型
标准渲染模式盒模型的渲染规则:DOM.width = border-left-width + padding-left + width(content-width) + padding-right + border-right-width;(dom.width=边框+内边距+width)
混杂渲染模式盒模型的渲染规则:DOM.width = width = border-left-width + padding-left + content-width + padding-right + border-right-width;(dom.width=width=边框+内边距+content)
简单的来说就是在标准盒模型中,元素的实际宽度等于边框宽度、内边距宽度、内容宽度(css的width值)之和。
但是在混杂模式下的盒模型,元素的宽度就是css的width的值,在这种模式下css的with属性的值包含了边框和内边距的宽度。
什么时候会触发混杂渲染模式?
如果来严格的来回答这个问题的话会比较复杂,这里我仅仅以我个人的理解来简单的解释这个问题。混杂渲染模式通俗的说就是HTML文档未按照标准文档模型解析渲染,导致这一原因的可能性有:
1.浏览器内核不支持的标签和css属性,主要出现在老版本的浏览器时代和内核中。
2.文档声明类型无法解析,出现这种情况的主要有两种:DOCTYPE声明书写错误,或者浏览器内核无法解析该版本的DOCTYPE声明(在HTML5标准之前浏览器内核遇到不支持的标记语言的文档声明)。
触发混杂模式的原因简单的来说,就是浏览器遇到不认识的标签或者样式属性,无法正常解析采用的一种默认解析方式,这种解析会导致页面渲染不出预期的页面布局和渲染效果,就像是上图中浏览器混杂模式下解析DOM时宽度的计算方式与标准模式下解析DOM时的宽度计算不相同的情况。
关于浏览器的混杂模式的更多可以参考一下内容:
为什么要了解混杂模式渲染规则盒模型?
在IE6的内核中,采用的盒模型解析规则就是混杂模式,虽然现在的开发中已经几乎不会考虑兼容IE6,但是并不代表混杂模式下盒模型解析方式就不好的,相反,这个模式被CSS3定义到了标准中,可以使用CSS3属性box-sizing:border-box来实现。这个属性的默认值是content-box,也就是标准渲染模式盒模型。
假设有需求是元素的内容宽度不确定,但又要有相对确定的元素宽度,这时候采用标准盒模型就会显得捉襟见肘了,而采用混杂模式渲染规则盒模型就非常方便来解决这个问题。下面通过具体的一些示例来了解混杂模式渲染规则盒模型,也就是CSS3中的box-sizing:border-box的具体示例:
box-sizing:content-box、border-box
IE8就开始支持了,兼容性问题就不大了,下面来看示例:
代码:
<div class="warpper">
<div class="content">abc</div>
<div class="content">abc</div>
</div>
<!--css-->
/* 父级宽度不固定、两个子元素为块级元素横排展示
* 子元素内边距固定为5px、内容宽度不固定
*/
.warpper{
width: 300px;/*假设宽度受其他内容或行为发生动态变化*/
height: 100px;
border: 1px solid #000;
}
.warpper::after{
content: "";
clear: both;
display: block;
}
.content{
width: 50%;
height: 100%;
background-color: red;
float: left;
padding: 5px; box-sizing: border-box;
}
.content:first-of-type{
background-color: #ffa;
}
这样当warpper的大小动态变化时就不需要计算子级元素的宽高了,减少了js操作DOM的样式属性,提高了性能。box-sizing:border-box用来解决输入框的宽度刚好等于容器的宽度,并且设置适当的内边距,就是最佳选择。
关于盒模型的一些其他样式和属性值?
- overflow:scroll/auto;
- resize:none(默认) | both(拖拽拉伸) | horizontal(水平方向拖拽拉伸) | vertical(垂直方向拖拽拉伸)
<div class="scroll">
<div></div>
<div></div>
</div>
<!--css-->
/*
* 内容超出部分采用滚动条呈现
* overflow:scroll;
* overflow:auto;--与scroll几乎无差异
*/
.scroll{
width: 200px;
height: 150px;
overflow: scroll;
/* overflow: auto; */
}
.scroll>div{
width: 300px;
}
overflow可以拆分成overflow-x和overflow-y,只要设置了任意一个值为非visible(默认值),另一个的值就会默认为auto;
关于resize就不展示示例了, 需要注意的是这个属性必须是在overflow的非默认值情况下才会生效。
CSS3总结四:盒模型(box)的更多相关文章
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
- css盒模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...
- 盒模型Box Model(浮动)
一.标准盒模型的大小:border+padding+content(width) 怪异盒模型大小:padding+border 二.display inline 默认,且变为行由内 ...
- CSS-3 新弹性盒模型属性
flex 语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 取值: none:none关键字的计算值为: 0 0 au ...
- IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影
除了为文字添加阴影,我们还可以为盒模型添加阴影.盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表 ...
- css3之弹性盒模型初探(一)
什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求 如何使用弹性盒模型? ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...
- css3中 弹性盒模型布局之box-flex
box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...
随机推荐
- 宝塔安装Nextcloud,挂载在阿里云oss上,打造个人/企业高效私有云盘
如下未完整整理,看懂看不懂随缘.... 准备条件: 1.阿里云oss 2.阿里云ecs 3.环境:centos7.x 步骤: 1.centos中安装宝塔面板 2.下载NextCloud安装包,上传到宝 ...
- ubuntu下如何使用dpkg删除某个软件包?
答:步骤如下: 1. 找出包名 dpkg -l |grep <package name> 2. 卸载 dpkg -r <package name>
- SpringCloud(七)之SpringCloud的链路追踪组件Sleuth实战,以及 zipkin 的部署和使用
一.前言 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案 ,并且兼容了zipkin,提供了REST API接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序 . ...
- LC 934. Shortest Bridge
In a given 2D binary array A, there are two islands. (An island is a 4-directionally connected grou ...
- SQL-W3School-基础:SQL 简介
ylbtech-SQL-W3School-基础:SQL 简介 1.返回顶部 1. SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言 SQL 使我们有能力访 ...
- Log统一管理类
import android.util.Log; /** * Log统一管理类 */ public class L{ private L(){ /* cannot be instantiated */ ...
- tomcat中的server.xml元素详解
附:Tomcat加载顺序 加载类和资源的顺序为: 1./Web-INF/classes 2./Web-INF/lib/*.jar 3.Bootstrap 4.System 5.$CATALINA_HO ...
- docker MySQL官方版本使用记录
docker MySQL官方版本使用记录 使用记录 拉取官方镜像:docker pull mysql 运行镜像:docker run --name mysql -p 3306:3306 -e MYSQ ...
- Django:(03)请求和响应
一.HttpRequest 客户端传参的几种方式 传递方式 示例 后端获取方式 数据类型 url路径(path) /news/1/2 正则匹配 str 查询字符串 /news2?category=1& ...
- python 安装第三方模块的各种方法
whl包的安装:pip install **.whl(要有pip 和 下载好的whl文件) tar.gz包的安装:python setup.py install (先将tar.gz解压到指定文件夹,在 ...