boder sizing：boder-box的使用意义

调CSS有时候感到总和设计图有出入，有的时候甚至是直接把图上的内容拷过来也不像。感觉自己的div莫名大了或者调了居中确不居中。其实有时候问题是你在挑样式的时候，把div元素看做盒子，你在加padding或者boder时，实际上会拉伸这个盒子的长度或者高度。

没有进行设置的CSS的高度和宽度默认数值如下：
width + padding + border = actual width of an element
height + padding + border = actual height of an element

这时候可以用到一个CSS属性叫做box-sizing，它在MDN和w3cschool上有解释说明和例子：
地址如下：
w3cscholl:https://www.w3schools.com/css/css3_box-sizing.asp
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

boder-sizing属性的作用就是，被修饰的元素的外边距为0，所有的boder和padding距离都是在盒子里边进行的。
进行了boder-sizing：boder-box修饰元素的宽度是不变的，这对移动端一些机器限制页面不能扩张，只能在固定大小的区域内显示很有作用。文档上建议所有的WEB开发者将boder-sizing设置为boder-box。有了boder-sizing：boder-box你就不用担心你的页面元素无论是单个的DIV还是这个page会被boder和padding拉长，你可以不用担心尽情试用boder和padding不用担心其造成的显示效果的出入。

boder sizing：boder-box的使用意义相关推荐

音视频解封装：MP4核心Box详解及H264AAC打包方案
问题背景: 上一篇文章<音视频封装:MP4结构概述和分析工具>让大家看了下MP4的主要结构和推荐了一些分析工具,如果你对MP4没有任何了解,还是先看上文,了解MP4的基本结构,其中还有许 ...
自己搜集的一些前端面试题初中级(较多)
Map 和Set的区别? 1. Map 是键值对, Set是值的集合, 当然键和值可以是任何得值, 2. Map可以通过get方法获取值, 二set不能因为它只有值 3. 都能通过迭代进行for o ...
一、CSS实现横列布局的方法总结
一.使用float实现横列布局的方法如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
Android鬼点子 CircleProgressView
分享一个最近在项目中用到的一个视图,具体的效果如下图: 打包赠送一个带光晕的按钮效果. 但是因为时间比较紧,这两个控件封装的不是很好,使用的时候需要修改一些代码中的参数(代码中有详细的comment, ...
微信小程序学习笔记（五）
align-content属性在排列中,如果有多行,那么这个属性是设置多行之间的排列方式.可以通过 align-content 属性来确定排列的方式.可以设置以下值. flex-start :从上往下 ...
Unreal Engine 4 中的 UI 优化技巧
http://mp.weixin.qq.com/s/bybEHM9tF-jBPxxqXfrPOQ## 2017-05-09 虚幻引擎 Unreal Open Day 2017 活动上 Epic Gam ...
CSS学习笔记（二十一）CSS变量var()
CSS 变量 CSS 变量 var() 函数用于插入 CSS 变量的值. CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体 ...
游戏开发中，图片资源的精简
蒙板压缩对比图:(此方法可大幅减小游戏包的大小) 包大小对比: 在游戏开发中,包的大小总是与图片资源的大小密切相关,而图片资源中,大多为带有透明度信息的png图像. 那么,如何精简png图片资源呢? ...
Flutter时间轴-首个
一,真实点,直接上图吧. github地址视频教学地址 1.位置,上图可见,时间轴可以在左边,也可以在中间,当然了可以在任何位置. 2.时间轴样式,当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你 ...
UE4（虚幻4）基础：蓝图初识--按shift加速奔跑
加速盒子蓝图类点击蓝图,选择新建空白蓝图类,选择第一个Actor,然后保存路径,命名,完成后就会生成在的路径下双击此蓝图类点击左上角添加组件,搜索box(盒体触发器),选 ...

boder sizing：boder-box的使用意义

boder sizing：boder-box的使用意义相关推荐

最新文章

热门文章