文档章节

css 之 box-sizing

bosscheng
 bosscheng
发布于 2015/12/10 10:31
字数 140
阅读 43
收藏 0
点赞 0
评论 0

适用范围:所有接收width和height的元素

默认值:content-box

取值:content-box | border-box

理解

  1. content-box: padding和border不被包含在定义的width和height里面,对象的实际宽度等于设置的width的只和border,padding之和, element width = width + border+padding

  2. border-box: padding和border包含在定义的width和height里面,对象的实际宽度就是width,即时定义了border和padding也不会改变对象的实际宽度,element width = width 

    ps: border-box属性表现为怪异模式下的盒模型


© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 78
博文 211
码字总数 91232
作品 0
南京
前端工程师
关于padding值不包含在width里面的问题,可能和box-sizing有关

这个是w3school对box-sizing的解释: 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box...

唐佳 ⋅ 2016/08/31 ⋅ 0

CSS3 Box-sizing了解盒子模型

一、HTML页面!DOCTYPE html document.compatMode: BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面 使用方法 html...

思悟修 ⋅ 2016/08/22 ⋅ 0

CSS3 用户界面

CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 Firefox、...

wybo521 ⋅ 2016/01/25 ⋅ 0

CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷 ⋅ 2015/09/16 ⋅ 0

重置box-sizing最佳实践

本文翻译自 css-tricks 我是一个将box-sizing重置为border-box的狂热分子,所以我有a special day of the year这篇文章,但是本文于那篇文章有一点小差别,下面让我们来看看主要差别在什么地...

alixwang ⋅ 2017/04/14 ⋅ 0

为 oschina.net 创建两个 CSS Patches

/ Opera Patches / / patch generated for http://www.oschina.net/css/oschina.css?ver=20101101 / .SearchResults form .TXT { box-sizing: content-box; } / Webkit Patches / / patch ge......

李永波 ⋅ 2010/11/29 ⋅ 8

CSS3教程:box-sizing属性的理解

说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内。这为前端工程师的工作平添了不少麻烦...

华山猛男 ⋅ 2014/03/27 ⋅ 0

bootstrap中表格固定头部:

使用chromatable在bootstrap中的使用,首先引用css样式与js <link rel="stylesheet" href="../../plugins/jquery.chromatable-1.3.0/css/style.css"> <script src="../../plugins/jQuery/jQ......

tianyawhl ⋅ 2016/03/29 ⋅ 0

css3:border-box将边框,padding计算都计算在宽度内

.border-box { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } 这个class可以让元素的宽度始终等于其width的值,不管pad......

爬墙 ⋅ 2016/02/28 ⋅ 0

input搜索框+button按钮 之 content-box 和 border-box

恍然大悟又 --可以用CSS3的box-sizing来设置下文中的"正常盒子"和"不正常盒子/怪异盒子" 正常盒子 box-sizing:content-box 不正常盒子 box-sizing:border-box; 缘由 我们经常要写一个的搜索框...

boogoogle ⋅ 2016/05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部