如何不让border或padding值撑大盒子

只需要设置简单的一个属性就好啦
先看一下效果吧

两个盒子的width、padding、border值都是一样的，但下边的盒子明显小很多，对不对
其实只需修改一下box-sizing属性就好了

<style>div {height: 80px;width: 80px;border: 10px solid pink;padding: 10px;background-color: aqua;/* 默认content-box，盒子宽度=width+border+padding */box-sizing: content-box;}p {height: 80px;width: 80px;border: 10px solid pink;padding: 10px;background-color: aqua;/* css3盒子模型 ,盒子宽度==width*//* 前提：border+padding不能超过200 */box-sizing: border-box;}</style>

<div>小猪猪 </div>
<p>小猪佩奇</p>

如何不让border或padding值撑大盒子相关推荐

内边距、边框撑大盒子问题
我们在开发中经常会遇到设置盒子内间距和边框然后会撑大盒子的问题,然而我们又不想盒子被撑大,因为这会影响我们的布局,那么我们该怎么办呢? 首先我们要知道标准盒子模型宽高的计算方式. 标准盒子模型宽高=自 ...
flex white-space: nowrap,撑大盒子问题
flex布局,两行,一个是标题,一个是属性.想实现的功能,标题超长"......"省略号代替. 出现一个问题就是,内容过长,会撑大盒子宽度.虽然不显示,但是会影响下面一行属性的显示 ...
内边距撑大盒子的问题
当设置遇盒子内间距和边框后,会将盒子撑大盒,然而我们又不想盒子被撑大,因为这会影响我们的布局. 盒子模型的宽高=内容区(自己设置的宽高)+内边距+边框所以当我们设置盒子内间距边框等属性的时候就盒子宽 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS 盒子模型（border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
CSS3 盒子设置border和padding不撑开盒子
普通的盒子模型我们设置border会将盒子撑大 <!DOCTYPE html> <html lang="en"><head><meta c ...
border，padding，margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
android 动态设置padding,Android动态设置控件大小以及设定margin以及padding值
http://www.aichengxu.com/Java/73893.htm Android动态设置控件大小以及设定margin以及padding值,有需要的朋友可以参考下. 一.概述在andro ...
html标签默认属性值之margin;padding值
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

如何不让border或padding值撑大盒子

如何不让border或padding值撑大盒子相关推荐

最新文章

热门文章