borderbox(border-box;有兼容性吗)

2025-03-23 23:50:02 0

borderbox(border-box;有兼容性吗)

本文目录

border-box;有兼容性吗

box-sizing默认值content-box该属性没继承性使用类似*式设置box-sizing用box-sizing默认值content-box覆盖要注意要足够高优先级覆盖原属性原设置div{box-sizing: border-box;}使用div.content-box{box-sizing:content-box;}进行覆盖

border-box在html里是什么意思

border-box这是一个属性值,属性是box-sizing.css3 box-sizing属性box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8+浏览器支持content-box和border-box;ff则支持全部三个值。

如何在VSCode解决办法可以设置div的box-sizing:border-box(盒模型)~

盒子模型概述:

所有HTML元素都可以看作盒子,在CSS中,“box model“这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):

盒子模型组成以及对应区域

盒子模型的组成:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。

  • Content(内容) - 盒子的内容,显示文本和图像

  • 以上是html中盒子模型的结构,每个元素都可以用这个盒子模型来解析。在开发中,一个元素的样式表现形式,也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——

    width, height, padding, border, margin。由于在不同的浏览器中,这几个属性所表示的盒子模型中的部分有所差异,所以又分为了标准盒子模型和怪异盒子模型。

    一,标准盒子模型

    解释:在标准盒子模型下

    (1)css中的width, height属性,分别表示的是盒子模型中content的宽度和高度。

    (2)css中的padding,表示的是盒子模型的的padding部分。

    (3)css中的border,表示的是盒子模型中的border部分。

    (4)css中的margin,表示的是盒子模型中的margin。

    二,怪异盒子模型(ie盒子模型)

    解释:在怪异盒子模型下

    (1)css中的width, height属性,分别表示的是盒子模型中content的宽度和高度加上盒子模型中padding和border的宽度。

    (2)css中的padding,表示的是盒子模型的的padding部分。

    (3)css中的border,表示的是盒子模型中的border部分。

    (4)css中的margin,表示的是盒子模型中的margin。

    **段落性总结 —— 标准盒子模型和怪异盒子模型的区别**

    从上述的内容可以看出,标准盒子模型和怪异盒子模型的区别,完全体现在css中width和height这两个属性对盒子模型的表现上。

    标准盒子模型:css中width/height=content的width/height

    怪异盒子模型:css中width/height=content的width/height+padding+border

    导致的结果:

    由于标准盒子模型和怪异盒子模型的存在,这就导致当同一段css代码作用在同一个元素上时,在不同盒子模型下的浏览器中,元素所占的宽度和高度却不同。

    三,css3中box-sizing下的盒子模型

    语法:(属性)box-sizing: (属性值)content-box/border-box/inherit;

    box-sizing对盒子模型的影响:

    (1)当“box-sizing“的值为”content-box“时,css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。

    (2)当“box-sizing“的值为”border-box“时,css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。

    总结:box-sizing属性,让开发人员可以控制浏览器的是以标准盒子模型表现,还是以怪异盒子模型表现。

    box-sizing的兼容性:

    到此盒子模型的所有内容全部阐述完毕。

    最佳方案:由于box-sizing的兼容性在ie8及以上,那在不要求兼容ie8一下的项目中,可以使用box-sizing给所有元素统一设置盒子模型的表现形式。个人推荐:

  • *{box-sizing:’border-box’}
  • 这样只要设置的width的宽度,就是这个元素在页面中真实的宽度了。不用再去计算padding和border对width的影响。

    对于需要兼容ie8的项目,就需要针对不同的浏览器,添加特定的代码。或者避免指定宽度的元素border和padding的设置。

    相关内容:

    1.行内元素之间的水平margin,即两个元素margin之和。

    2.块级元素之间的竖直margin, 即取最大的。

    3.嵌套盒子之间的margin,即父元素的padding+子元素的margin

    4.margin可以设置为负值

    不同浏览器的css前缀:Element {

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    -o-box-sizing: content-box;

    -ms-box-sizing: content-box;

    box-sizing: content-box;

    }

    参考:

    w3c标准:https://www.runoob.com/cssref/css3-pr-box-sizing.html

borderbox(border-box;有兼容性吗)

本文编辑:admin
: borderbox,

更多文章:


水仙花的花语(知道水仙花的花语是什么吗)

水仙花的花语(知道水仙花的花语是什么吗)

本文目录知道水仙花的花语是什么吗水仙花花语是什么水仙花语知道水仙花的花语是什么啊水仙花的花语是什么水仙的花语是什么知道水仙花的花语是什么吗水仙花的花语一:敬意。因为水仙花在历史上,曾受到多位英国著名的诗人和画家的喜爱,所以后人将水仙花的花语

2025年2月24日 01:40

网络监控程序(网络监控的常用软件)

网络监控程序(网络监控的常用软件)

本文目录网络监控的常用软件如何对公司网络进行监控网络监控的常用软件WorkWin网络监控软件能够让管理者通过一台管理机管理所有员工机,能够监控到局域网中员工机的屏幕画面,上网记录,程序运行记录,邮件记录,聊天记录。能禁止游戏,禁止BT下载,

2025年2月22日 20:00

数据库怎么安装教程(用友T6数据库怎么安装)

数据库怎么安装教程(用友T6数据库怎么安装)

本文目录用友T6数据库怎么安装win7怎么安装mysql数据库用友T6数据库怎么安装1、运行安装盘里的 setup.exe 程序2. 在出现如下安装欢迎界面时,选择下一步。2、如果同意许可协议,选择“我接受许可协议中的条款”,点击“下一步”

2025年2月14日 15:50

健身照片怎么拍好看?在健身房里,什么样的人最受其他人的尊重

健身照片怎么拍好看?在健身房里,什么样的人最受其他人的尊重

本文目录健身照片怎么拍好看在健身房里,什么样的人最受其他人的尊重健身照片怎么拍好看如果你好好锻炼了,身体有汗水努力雕刻的痕迹,拍健身照,一方面可以对比自己身材的变化,一方面可以展示给别人欣赏。如何展示自己的身材其实也是个技术活儿!不少人练得

2025年3月31日 01:30

exit setup是什么意思(电脑上出现:discard.changes.and.exit.setup.是什么意思)

exit setup是什么意思(电脑上出现:discard.changes.and.exit.setup.是什么意思)

本文目录电脑上出现:discard.changes.and.exit.setup.是什么意思Discardchangesandexitsetup电脑上突然出现discard.changes.and.exit.setup.这是什么意思电脑开机

2025年2月20日 13:00

二进制算法表(2进制算法怎么算)

二进制算法表(2进制算法怎么算)

本文目录2进制算法怎么算二进制计算方法是什么二进制的算法 多举个例子2进制算法怎么算1、一般IPV4地址是 255.255.255.255 4组,每组8位,共计32位,那么我们可以利用其中一组来进行二进制的换算,这个也许是现在最简单的办法。

2025年2月18日 23:30

occasion怎么读(occasions是什么意思)

occasion怎么读(occasions是什么意思)

本文目录occasions是什么意思occasion;occasional;occasionally 这英语怎么读这个单词咋念呢 occasional 实在听不清阿occasion怎么读人,神,真谢谢场合的英文读音occasionally;

2025年3月8日 18:00

手机ftp软件(手机ftp怎么用)

手机ftp软件(手机ftp怎么用)

本文目录手机ftp怎么用有什么手机文件管理软件支持ftp求一个比较好的手机在线FTP工具手机ftp怎么用1,下载一个ES文件管理器。2,首先打开ES文件管理器,点击左上角的三条横线的菜单。3,在网络里面,选择并打开FTP这个选项,进入FTP

2025年3月4日 09:40

hookup俚语什么意思(hook-up 是什么意思)

hookup俚语什么意思(hook-up 是什么意思)

本文目录hook-up 是什么意思hookup是什么意思hook up在社交中是什么意思hookup是什么意思及用法hook-up 是什么意思  hookup 的意思是:连接,接线图,转播。  hookup  英  n. 连接,接线图,转

2025年3月19日 23:00

freebsd为何败给linux(难道linux的开发者们不想linux普及吗)

freebsd为何败给linux(难道linux的开发者们不想linux普及吗)

本文目录难道linux的开发者们不想linux普及吗FreeBSD、OpenBSD,Linux等操作系统,哪个是算是最正统的UNIX呢一个Linux程序员是否适合MacBook为什么科技界的总有人是说Linux是最好的操作系统难道linux

2025年2月12日 12:50

config(手机里的config是什么意)

config(手机里的config是什么意)

本文目录手机里的config是什么意linux命令,chkconfig --list,这个为什么要用两个-,用一个-不行吗我的linux系统没有chkconfig命令怎么办config ,configure ,configuration三者

2025年2月10日 22:00

cheer up造句(cheer up造句)

cheer up造句(cheer up造句)

本文目录cheer up造句用cheer_up造句cheer up造句cheer up (使)高兴起来;(使)振作起来 When you cheer up or when something cheers you up, you stop

2025年3月3日 02:10

企业网页设计图片(企业网站首页设计要求怎么写)

企业网页设计图片(企业网站首页设计要求怎么写)

本文目录企业网站首页设计要求怎么写企业网站网页设计的内容有哪些企业网页设计需要遵循什么原则有哪些要求企业网站首页设计要求怎么写一,实景照片营造场景氛围在实景照片这个形式上,企业级产品的表现力远不及消费级产品,因为企业的商务属性决定了他们不能

2025年3月16日 06:20

transparency是什么意思(色彩里面的hue,saturation,value,shininess,transparency是什么意思)

transparency是什么意思(色彩里面的hue,saturation,value,shininess,transparency是什么意思)

本文目录色彩里面的hue,saturation,value,shininess,transparency是什么意思transparency什么意思transparency 是什么意思transparency是什么意思preserve tra

2025年3月27日 10:20

continue语句的作用是使程序的执行流程跳出包含它的所有循环(C语言中 continue的作用)

continue语句的作用是使程序的执行流程跳出包含它的所有循环(C语言中 continue的作用)

本文目录C语言中 continue的作用continue 是跳出本次循环还是所有循环循环结构中CONTINUE语句是使整个循环终止执行吗continue语句是什么C语言中 continue的作用 continue的作用和功能是:计算机术语,

2025年3月10日 03:10

拍摄夜景时,该如何设置相机?vscode需要怎么设置,才可以在编辑器内部调试java

拍摄夜景时,该如何设置相机?vscode需要怎么设置,才可以在编辑器内部调试java

本文目录拍摄夜景时,该如何设置相机vscode需要怎么设置,才可以在编辑器内部调试java新手机,怎么修改设置运行更流畅打开开发者模式word 文本框填充 透明度如何设置小米手机开发者选项怎么设置最流畅华为手机如何设置起来更流畅华为p40p

2025年3月4日 21:50

显示文件扩展名(怎么打开文件后缀名怎么显示)

显示文件扩展名(怎么打开文件后缀名怎么显示)

本文目录怎么打开文件后缀名怎么显示如何设置使文件显示文件后缀名怎么打开文件后缀名怎么显示这里用文本文件来测试,其他文件格式都一样效果。 在一个文件夹里,有一个没有后缀的文件。在窗口左上方点击(组织),弹出下拉菜单中选择(文件夹和搜索选项);

2025年3月23日 05:20

笛卡尔积结合律(什么是笛卡尔积笛卡尔积是什么意思)

笛卡尔积结合律(什么是笛卡尔积笛卡尔积是什么意思)

本文目录什么是笛卡尔积笛卡尔积是什么意思数据库问题 笛卡尔积怎么计算什么叫直积什么叫笛卡尔乘积笛卡尔积要如何进行运算笛卡尔积是什么进行运算什么是笛卡尔积笛卡尔积是什么意思笛卡尔乘积是指在数学中,两个集合X和Y的笛卡尓积(Cartesian

2025年2月14日 00:50

adverse selection(Adverse selection为什么不翻译成有害选择或不利选择,而是译成)

adverse selection(Adverse selection为什么不翻译成有害选择或不利选择,而是译成)

本文目录Adverse selection为什么不翻译成有害选择或不利选择,而是译成请翻译:How were adverse selection and moral hazard contributing factors in this c

2025年3月20日 04:10

str()函数功能(VB中的str函数是什么意思)

str()函数功能(VB中的str函数是什么意思)

本文目录VB中的str函数是什么意思VB中函数 str() 和cstr 有什么不同函数String(n,“str“)的功能是vb的内部函数space(),str()有什么作用的str什么意思VFP的STR函数是怎么回事哪位大神讲解下str函

2025年3月13日 07:00

近期文章

million billion(million,billion和thousand之间应该怎么转化 要举例的那种 谢谢)
2025-04-05 17:30:01
本站热文

harbor,port,pier的区别?谁能解释“harbour“(港口)与“pier“(码头)的区别
2025-02-22 17:40:03 浏览:18
ibatis foreach(ibatis 批量update操作)
2025-02-10 23:40:06 浏览:7
endless rain(endless rain表达什么情感)
2025-02-14 06:00:02 浏览:6
标签列表

热门搜索