在一个网页布局中,如果不在同一元素上使用宽度和填充/边距,可能会导致布局错乱或者不美观。宽度和填充/边距都是用来控制元素在网页上的显示效果的,它们的作用和区别如下:
因此,在同一元素上使用宽度和填充/边距可以更好地控制元素在网页上的显示效果,避免布局错乱或者不美观。例如,可以使用宽度来控制元素的尺寸,使用填充/边距来控制元素与其他元素之间的间距。
Block 元素和 Inline 元素 屏幕上呈现的每个 HTML 元素都是一个框,它们有两种形式: Block boxes 和 Inline boxes。...填充总是如此,因为它在边框内部,边框内的所有内容都有背景。 速记格式 两值速记 四值速记 注意: 是否想要使用速记表格主要取决于个人偏好和团队惯例。...您选择其中一个的最常见原因是: 填充具有背景,而边距始终是透明的 填充包含在元素的单击区域中,而边距则不包括在内 边距会发生垂直折叠,而填充则不会 块级元素和内联元素之间最明显的对比之一是它们对边距的处理...Inline box 完全忽略元素的顶部和底部边距。 水平边距显示会像我们期望的那样,而元素周围的垂直空间没有变化。...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠
由于可以在四个不同的方向(上、右、下、左)添加边距,因此在深入示例和用例之前阐明一些基本概念非常重要。...边距折叠 简而言之,当两个垂直元素有一个边距,并且其中一个的边距大于另一个时,就会发生边距折叠。 在这种情况下,将使用较大的边距,而忽略另一个边距。...负边距 它可以与四个方向的边距一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...因此,导航项的宽度取决于它们的内容。 以下是解决方案: 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种,即添加一个margin-left。...由于应用于父元素 .card__content 的填充,边框不会粘在边缘上。 是的,你猜对了! 负边距是解决办法。
所有的HTML元素可以看做盒子,它包括:外边距、边框、内填充和实际内容。 但是这样说实在是太官方了,对新手很不友好,我个人也不喜欢这样描述。...那此时盒子的实际宽度又是多少呢? 盒子的实际宽度=盒子左右两边边框的宽度(3px*2)+左右两边的内边距(50px*2)+盒子内容的宽度(200px)=306px。...最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框...margin-top:设置元素的上外边距。 margin-bottom:设置元素的下外边距。 margin-left:设置元素的左外边距 margin-right:设置元素的右外边距。...然而,它也可以和border-width 、 border-color一起使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。...: 0; } 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框...也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。... 这是一个指定填充边距的段落。...使用CSS来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。
左右边距简写 */ margin: 10px 10px; /* 上右下左四个边距 */ margin: 10px 10px 10px 10px; /* 上右下左分别单独配置...在宽度和高度之外绘制元素的内边距、边框、外边距,称为标准盒子模型。 border-box:为元素设定的width和height属性决定了元素的边框盒。...就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度,称为IE盒子模型。...根据W3C的规范,元素内容占据的空间是由width属性设置的,而内容周围的padding和border值是另外计算的。不幸的是,IE5.X和IE6在怪异模式中使用自己的非标准模型。...也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。 IE8及更早IE版本不支持设置填充的宽度和边框的宽度属性。
每个盒子都有4个区域,用于定义元素的边距(margin)、边框(border)、填充(padding)和内容区域。 默认情况下,你给一个元素设置的宽度,只是设置了内容区域的宽度。...在这种情况下,它似乎可以感觉到在内容上田间的填充和边距,但实际上,是重新计算宽度以确保一切都适合。 通过比较,设置宽度为“100%”时,不管边距、填充和边框的大小是多少,内容区域都将填充可用空间。...边距重叠 当边距意外重叠当时候,真的令人很困惑,因为你不知道发生了什么。当两个或多个相邻的垂直边距接触时,边距有时会发生重叠,并且不会用填充或边框分隔。...如果子元素的边缘扩展到父元素的边缘,并且不会被填充分隔开,那么就会出现边距重叠的现象。...您需要知道的主要事情是当元素没有填充或边框时,垂直边距可能会重叠。 如果你想了解的更详细, CSS Tricks 有一篇很好的 边距重叠释义的文章推荐你看一下。
在上面的模型中,一个元素有 margin-bottom,另一个元素有 margin-top,边距较大的元素获胜。 为避免此类问题,建议按照本文使用单向边距。...由于对父元素 .card__content 进行了填充,因此边框没有粘在边缘上。 ? 是的,你猜对了!负边距是解决办法。...使用抽象组件 解决上述问题的一种方法是使用抽象的组件,其目标是托管其他组件,就像Max Stoiber所说的那样,这是将管理边距的责任移到了父元素上,让我们以这种思维方式重新思考以前的用例。 ?...间距可能在X页上,但不在Y页上。 我在检查Facebook的新设计CSS时首先注意到了这一点。 ? 那是一个 ,内联样式宽度:16px,它唯一的作用是在左边缘和包装器之间增加一个空白空间。...CSS数学函数:Min(),Max(),Clamp() 有可能有动态的边距吗?例如,根据视口宽度设置具有最小值和最大值的空白。答案是肯定的!我们可以。
由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行)和行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。...CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、盒子中的内容(content)....要知道,完全大小的元素,你还必须添加填充(padding),边框(border)和边距。....aotu 会根据浏览器的宽度自动的设置两边的外边距。...可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。
元素的总高度和元素的宽度计算如下: 总高度:高度 + 上下内边距 + 上下边框 + 上下边距。 总宽度:宽度+左右内边距+左右边框+左右外边距。...简单来说,这意味着边距、边框和填充将添加到使用 width 和 height 属性指定的总高度和宽度中。 此外,添加边距、内边距和边框不会减小内容区域的总大小。...或者换句话说,当向元素添加边距、内边距和边框时,元素的总高度和总宽度不会增加。 CSS盒子模型的组成部分: 1、内容: 这是 CSS 盒子模型的主要元素。...使用属性在 HTML 元素上设置填充。...4、边距: 边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。
image.png 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框...+下边框+上边距+下边距 2、浏览器兼容性 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。...不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。 ...IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。 解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。 3、内联元素与块元素 div、h1 或 p 元素常常被称为块级元素。...如果让行内元素变成块元素,通过将 display 属性设置为 block。还可以通过把 display 设置为 none,隐藏元素,不在文档流中占据空间。
a{ display:block; } 块级元素特点: 每个块级元素都从新的一行开始,并且其后的元素也另起一行(真霸道,一个块级元素独占一行) 元素的高度、宽度、行高以及顶和底边距都可以设置 元素宽度在不设置的情况下...div{ display:inline; } 内联元素特点: 和其他元素都在一行上; 元素的高度、宽度及顶部和底部边距不可设置; 元素的宽度就是它包含的文字或图片的宽度,不可改变 解决行内元素间隙bug...inline-block元素特点: 和其他元素都在一行上; 元素的高度、宽度、行高以及顶和底边距都可以设置; 3.盒子模型 3.1什么是盒子模型 css中,盒子模型是关于元素的宽高的。如下图: ?...因此一个元素实际宽度为: 盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 ?...: div{padding:10px;} 如果上下填充为10px,左右填充为20px: div{padding:10px 20px;} 3.5盒模型边界 元素与其他元素之间的距离可以使用边界margin
【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来描边,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...使用CSS滤镜实现背景虚化 ? 33【fill-available】?设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ?
**box-sizing **属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。...宽度和高度都不包含内容的边框(border)和内边距(padding)。...属性包括内容,填充和边框,但不包括边距。...注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。...内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
基本概念:标准模式和怪异模式,标准模型和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1.盒模型是什么 2018搜狐前端笔试题...盒模型本质上是用以封装HTML元素的概念盒子,它包含了边距,边框,填充以及实际内容。...Windows平台的IE5和Netscape4则只提供了怪异模式。 选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。.../ ClientWidth / ScrollWidth 6.边距重叠 什么是边距重叠 如下图,父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了边距...决定,属于同一个bfc的两个相邻box的margin会发生重叠 bfc的区域不会与浮动区域的box重叠 bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
(真霸道,一个块级元素独占一行) ②、元素的高度、宽度、行高以及顶和底边距都可设置。 ...; ②、元素的高度、宽度及顶部和底部边距不可设置; ③、元素的宽度就是它包含的文字或图片的宽度,不可改变。...就是同时具备内联元素、块状元素的特点 特点: ①、和其他元素都在一行上; ②、元素的高度、宽度、行高以及顶和底边距都可设置。 ...当border:的时候是给边框四条线都设置样式 如果给规定的一边的边框设置: div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边(上、右、左...11、盒模型代码缩写 盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。
前两种方式和其他布局的用法相同,最后一种是通过填充约束来重新设置控件的尺寸(如图 7,(a)是wrap_content,(b)是0dp)。代码案例如下: ?...上述代码对宽度和高度都进行了约束,通过H,指定高度受约束,所以高度的尺寸会根据宽度大小按照比例得到,其效果如图所示: ?...至于为何高度填充屏幕而宽度不填充,其玄机在于下面这句话,能理解它,就理解了比例使用的精髓: ?...属性layout_constraintHorizontal_height和layout_constraintVertical_weight控制使用MATCH_CONSTRAINT的元素如何均分空间。...例如,一个Chain中包含两个使用MATCH_CONSTRAINT的元素,第一个元素使用的权重为2,第二个元素使用的权重为1,那么被第一个元素占用的空间是第二个元素的2倍。
标准盒模型(w3c标准) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。...CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 在标准盒模型中,width 和 height 指的是内容区域的宽度和高度。...增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。...不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。...这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 box-sizing类似于ie盒模型,它会把内边距和边框包含在width内。
领取专属 10元无门槛券
手把手带您无忧上云