文档章节

css 之 box-sizing

bosscheng
 bosscheng
发布于 2015/12/10 10:31
字数 140
阅读 43
收藏 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属性表现为怪异模式下的盒模型


© 著作权归作者所有

共有 人打赏支持
上一篇: css杂类收集2
下一篇: angular之ngCloak
bosscheng
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
关于padding值不包含在width里面的问题,可能和box-sizing有关

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

唐佳
2016/08/31
60
0
CSS3 Box-sizing了解盒子模型

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

思悟修
2016/08/22
342
0
CSS3 Box-sizing的理解

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

柠檬酷
2015/09/16
51
0
CSS3 用户界面

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

wybo521
2016/01/25
7
0
重置box-sizing最佳实践

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

alixwang
2017/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
44分钟前
5
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
56分钟前
3
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
今天
10
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
今天
2
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
398
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部