img标签默认有外边距吗_你知道css的盒模型吗?
CSS盒子模型与怪异盒模型
盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(
padding
),边框(border
),外边距(margin
),和实际内容(content
)这几个部分。
标准盒模型
标准盒模型中盒子的大小是指:content + border + padding + margin
。其中width指的是内容区域content的宽度;height指的是内容区域content的高度。下面用一段代码和图片来让说明一个盒子大小的呈现方式。
.box { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 10px solid red; background-color: #606266; /*标准盒模型*/ box-sizing: content-box;}
在chrome
里面调试工具样式的最下面可以看到一个盒子呈现出的长宽,内边距(padding
),边框(border
)和外边距(margin
)。鼠标移动到dom
上,可以看到盒子实际呈现出的长宽分别为140px
,140px
。这是因为我们的width
为100px,height
为100px,padding
上下左右均为10px
,border
上下左右均为10px
。所以我们看到的我们盒子的长宽为140px。由于是块级元素,实际盒子会独占一行,这里的140px没有算是margin
。标准模式下,最直观的特点是widith
和height
的值决定了盒子的内容区域(content
)的大小。而盒子实际呈现的大小并不一定是你设置的widith
和height
的值。因为还有padding,border,margin
等来影响它。
IE怪异盒模型
怪异盒模型中的width
指的是内容、边框、内边距总的宽度(content + border + padding
);height
指的是内容、边框、内边距总的高度。怪异盒模型下盒子的大小=width(content + border + padding) + margin
。下面用一段代码和图片来让说明一个盒子大小的呈现方式。
.box { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 10px solid red; background-color: #606266; /*IE盒模型*/ box-sizing: border-box; }
图中可以看到,我们设置的widht
和height
为100px,那么盒子实际呈现的大小也为100px(这里是width
和height
的值,没算margin
)。那么内容区域(可以放文字,div
标签的区域)content
的大小为width - padding - border = 60
。
如何切换盒模型
在html
顶部加上DOCTYPE
声明,大多数浏览器就会默认采用标准盒模型。上面的代码也可以看出,通过css
的属性box-sizing
能改变盒模型。
*{
/*IE盒模型,order和padding计算入width之内*/ box-sizing: border-box; /*padding计算入width内,不推荐使用,非常老的浏览器才支持*/ box-sizing: padding-box; /*border和padding不计算入width之内*/ box-sizing: content-box; /*继承父元素*/ box-sizing: inherit;}
兼容性
可以看到现代浏览器都支持了该属性。
总结
可以看到,其实上面几种模型,最终盒子的大小是一样的,区别在于盒子的widht
和height
的计算。个人在网页布局中,更喜欢使用IE盒模型,因为该模型下,IE
盒模型呈现的widht,height
就是我们设置的长宽,这样我们就不必为了布局要减去(border
和padding
)产生的空间。其实我们也可以发现,用边框(border
)绘制三角形,也是利用了盒模型的原理,点击查看。
学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。
公众号前端每日面试:
img标签默认有外边距吗_你知道css的盒模型吗?相关推荐
- img标签默认有外边距吗_解决img标签自带外边距问题
三种方法去除img标签自带外边距. #img img{ height: 100px; } #bottom{ width: 100px; height: 100px; background-color: ...
- img标签默认有外边距吗_下面选项中,( )可以设置网页中某个标签的右外边距为10像素。_学小易找答案...
[单选题]阅读下面HTML代码,如果期望tabs位于box容器的右下角,则需要添加的CSS样式是( ) . [单选题]β一环糊精是由几个葡萄糖分子环合的 [多选题]身份权包括? [单选题]Why do ...
- css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css
@charset "utf-8";/*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /*防止用户自定义背景颜色对网页的影响,添加让用户 ...
- flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)?
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式 这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序 使用 order ...
- flex 会使div撑满_如何讲清楚Flex弹性盒模型?(中)
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式 这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序 使用 order ...
- extjs中滚动条属性_前端学习随笔6 盒模型及相关属性
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 一 心得体会 最大的收获是第一次知道了outline(轮 ...
- 盒子模型(插入图片,外边距,内边距)
盒子模型(Box Model) 所谓盒子模型 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 盒子模型有元素的内容.边框(border).内边距(padding).和外边 ...
- css如何让两个div上下排列_深入了解CSS层叠上下层
1.要想理解层叠上下层,首先要先从文档流和盒模型说起 文档流 在CSS中,文档流是一个很基础也是很重要的一个概念.很多时候她被称为Document Flow,但在CSS的标准被称为Normal Flo ...
- CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
最新文章
- Log4j源代码学习
- Cookie和会话状态 (转)
- 经典的异或题:只出现一次的数字
- 局域网上传文件到服务器很慢,win10局域网内传文件很慢怎么办_win10局域网内文件传输很慢如何处理-win7之家...
- Py-博客学习50问
- 短网址缩短和还原综合源码
- Android搜索手机文件
- 机器学习公开课笔记(8):k-means聚类和PCA降维
- JDK:native2ascii命令详解
- java使用fast报表控件_FastReport报表控件的使用
- BT4中文版(集成spoonwep2/spoonwpa)下载地址
- win7桌面ie图标无法删除怎么办?ie浏览器图标强制删除方法
- 网站建设中百度快照劫持是什么?劫持百度快照是怎么回事?
- 域账户登录本地计算机用户名,如何实现域账户domain/user登陆时自动添加到本地计算机poweruser用户组...
- U盘在电脑上不显示怎么办?
- mysql三m架构为什么_AnalyticDB for MySQL 3.0 技术架构解析
- BZOJ2277: [Poi2011]Strongbox
- yolact-训练自己的数据集
- Istio 解决的问题及注入
- 批量查询苏宁快递物流,并分析派件时效