文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---...*/ padding: 0; /* 清除标签默认的外边距 */ margin: 0; } 上述代码是所有的 CSS 标签的第一行代码 ; 2、代码示例 代码示例 :...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...background-position 修改图片显示位置 */ background-position: 50px 50px; } span { /* 行内元素设置 四个方向的边距
相应的，span、strong这些是行内元素，所以它们会以行内盒子(简称行盒子，inline box)显示在行内。 CSS 中有几种不同的定位模型，包括浮动、绝对定位和相对定位。...这时，元素盒子的位置，由在 HTML 中的位置决定。 块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由他们的上、下外边距决定。 行内盒子是沿文本流水平排列的，也会随文本换行而换行。...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...浮动折行 浮动元素在浮动时不仅会受到同级浮动元素的影响，还会受非同级元素的影响。如下图所示，第二组浮动盒子会受到第一组盒子的影响。 ?...浮动受非同级元素影响 如上，这种情况下，第二组合子挂在了第一组盒子的左边。如果我们不想让第二组的盒子 1 挂在第一组的盒子 3 左边应该如何处理呢？
文章目录 一、内边距不影响盒子模型尺寸的情况 二、内边距影响盒子模型尺寸的情况 一、内边距不影响盒子模型尺寸的情况 ---- 如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子...DOCTYPE html> 内边距不影响盒子模型尺寸的情况</title...padding-left: 50px; } 内边距不影响盒子模型尺寸的情况 ... 展示效果 : 测量模型宽度 : 测量模型高度 : 二、内边距影响盒子模型尺寸的情况 ---- 如果给 p 标签设置了 具体的尺寸 , 为其设置 Padding 内边距 ,...DOCTYPE html> 内边距不影响盒子模型尺寸的情况</title
width:auto; padding:0px 10px;//设置左右内边距为10px margin:0px 10px;//设置左右外边距为10px height...证明毫无影响 1.3子元素绝对定位，则分两种情况讨论 默认情况下以body元素宽度为参考基准 我们把inner-100percent对应的style改成： .inner-100percent{...（这里不做展示） 2.浮动／定位对width:auto的影响 2.1默认情况下，width:auto占满一行 不做展示 2.2子元素相对定位，无影响，仍占满一行 不做展示 3.3子元素绝对定位，固定定位...2.浮动流的起始位置由最先设置浮动的元素未浮动时的位置决定 我们再回到上述的例子，div2,div3,div4向左浮动的时候 ? 浮动流的起始位置被最先设置浮动的元素原本的位置决定了。...刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。浮动元素会影响文本的位置！
有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。...绝对定位的使用： 绝对定位的时候，该元素的父元素一定要记得设为相对定位，这样在不同分辨率下定位才不会错乱，但是前提是这个父元素在一个安全的宽度里面，如果这个父元素本身是一个会因为分辨率降低而改变的元素...而是在放大图背景的div里继续放一个安全宽度div，再把它作为父元素做相对定位，给里面的子元素做绝对定位，这样就不会出现不同分辨率下绝对定位错乱的问题了。...1 $(function(){ var w=window.screen.width; var zoom=w/1920; 2 $("#container").css...scale，则该缩小相当于当前页面下缩小的效果了，两边自然会留白。
*内补白（内补丁） padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px; padding-top...： 检索或设置对象顶边的内部边距 padding-right： 检索或设置对象右边的内部边距 padding-bottom：检索或设置对象下边的内部边距... padding-left： 检索或设置对象左边的内部边距 7....*外补白（外补丁） margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto; margin-top...： 检索或设置对象顶边的外延边距 margin-right： 检索或设置对象右边的外延边距 margin-bottom： 检索或设置对象下边的外延边距
当设置为border-box时，width和height就是最终宽高，不再受padding影响 外边距塌陷 同—列上下两个元素相邻，并且上有margin-bottom，下有margin-top时，会发生塌陷...scroll : 清除浮动，左侧和下方加滚动条 定位 将盒子定在页面的某一个位置（漂浮) 定位由两部分组成： 定位模式：相对定位、绝对定位、固定定位、静态定位 边偏移：top、left、fight、bottom...静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置。...相对定位 相对定位(relative)是元素相对于自己在标准流中原来的位置 不会放弃它在标准流中占据的位置 *{ position: relative; } 绝对定位 绝对定位(absolute...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置 如果父元素没有定位，则找父级的父级，..…. 。
多类名选择器 我们可以给标签指定多个类名，从而达到更多的选择目的。 注意： 1. 样式显示效果跟HTML元素中的类名先后顺序没有关系, 受CSS样式书写的上下顺序有关。 3....四边样式 四边颜色; 表格的细线边框 以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。...浮动脱离标准流，不占位置，会影响标准流。...对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。 注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
= 浏览器可视窗口 + 边偏移 | 代码示例 ) 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS...| 代码示例 ) 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display...; 2、CSS 定位简介 定位是将 盒子模型 定位到某个位置 , 并且自由地漂浮在其它盒子上方 ; 定位由 定位模式 + 边偏移 构成 ; 3、边偏移 边偏移 : 顶部偏移量 : 盒子模型 距离 父容器...中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是 相对于原来的位置 (0, 0) 进行 边偏移 后的位置 ; 下面的示例中 , 盒子模型的初始位置是 在浏览器的 左上角 ( 0 ,...相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素
边距塌陷(Collapsing margins) 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距，称为边距塌陷。...不会发生边距坍塌的情况 根节点元素 水平边距(Horizontal margins)不会崩溃 「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...盒子的上边距和第一个流入子元素的上边距 盒子的下边距和同级后一个流入元素的上边距 如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距 某个元素没有建立新的 BFC，并且 min-height...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。
最后一个同级兄弟元素 :only-of-type CSS3唯一的一个同级兄弟元素 :nth-of-type() CSS3第n个同级兄弟元素 :nth-last-of-type() CSS3倒数第n个同级兄弟元素...4. inline-block 使用 inline-block 布局之后元素之间去除边距等因素后，无法完全紧靠的原因：为了方便理解，可以将 inline-block 容器内的元素看成是两个文字，文字与文字之间不可能是连在一起的...，absolute生成绝对定位的元素，是相对于 static 定位以外的第一个父元素进行定位；relative则是生成相对定位的元素，相对于其正常位置进行定位。...要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈， 此空格其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。...BFC是一个独立的容器，内部元素不会影响容器外部的元素。 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。 计算BFC高度时，浮动元素也要参与计算。
盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容，可以简单表述为 盒模型由 content，padding，margin，border 几部分组成。...属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 的区域不会与 float box 重叠。 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...阻止外边距 margin 折叠塌陷 1、阻止外边距折叠 margin 塌陷问题：在标准文档流中，块级标签之间竖直方向的 margin 会以大的为准，这就是 margin 的塌陷现象。...BFC，左盒子设置右外边距，右盒子设置左外边距(不设置也可)，右盒子不需要设置 width; 三栏布局，已知左右侧宽度，中间自适应 1.使用定位 三个盒子外侧设置大盒子，大盒子使用相对定位，下面一层三个盒子均采用绝对定位...fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。...important 声明 > 其它 2.3 CSS 盒子模型 CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。...BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.
此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...必须提出的是，垂直方向的padding对于那些具有 display:inline 的元素不适用，比如 或 。如果添加了内边距，它不会影响元素，内边距将覆盖其他内联元素。...Flexbox 间隙 gap 是一个提议的属性，将用于CSS Grid和flexbox，撰写本文时，它仅在Firefox中受支持。...关于解决方案2，它没有CSS特异性问题。但是，它只能处理一个列栈。 更好的解决方案是通过向父元素添加负边距来取消不需要的间距。....wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。注意不要超过边距值，因为它会与同级元素重叠。
要知道，完全大小的元素，你还必须添加填充（padding），边框（border）和边距。....aotu 会根据浏览器的宽度自动的设置两边的外边距。...也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。...相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 absolute（绝对定位）和fixed（固定定位）都属于绝对定位形式 ?
和height指的是内容区域的宽度和高度；增加内边距、边框和外边距不会影响内容区域的尺寸控件，但是会增加元素框的总尺寸； ?...display属性： 定位机制： CSS基本定位机制：普通流，浮动和绝对定位 除非专门单独定义，否则所有框都是默认在普通流中定位 块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来的...行内框在一行内的水平布置，使用水平内边距、边框、外边距来调整之间的间距，但是，垂直内边距、边框和外边距不影响行内框的高度，由一行形成的水平框：行框（Line Box），行框的高度总是容纳包含的所有行内框...属性 描述 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。...绝对定位：absolute 绝对定位：通过设置垂直或水平位置，让元素绝对定位（以视窗左上角做起点） #box { position: absolute; left: 30px;
很多人喜欢这个属性，如果你正在建立一个网格系统，或任何其他需要水平对齐类型的布局项目，这可以是更直观的工作方式。 边距重叠 当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。...当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。...如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。 如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。...您需要知道的主要事情是当元素没有填充或边框时，垂直边距可能会重叠。 如果你想了解的更详细， CSS Tricks 有一篇很好的 边距重叠释义的文章推荐你看一下。...这种技术仍然很重要，但它也正逐渐被新的布局技术所取代，比如Flexbox和Grid。 绝对定位布局 绝对定位的元素完全从文档流中去除，不同于浮动元素，它们对周围的内容没有影响。
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。...7.2、边偏移 简单说， 我们定位的盒子，是通过边偏移来移动位置的。 在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。...7.3.4、固定定位(fixed) 固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形 完全脱标 —— 完全不占位置； 只认浏览器的可视窗口 ——...浏览器可视窗口 + 边偏移属性 来设置元素的位置； 跟父元素没有任何关系；单独使用的 不随滚动条滚动。
15、为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异； CSS样式初始化之后会对SEO有一定的影响。...18、浮动元素引起的问题 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构...浏览器默认的 margin 和 padding 不同 IE6双边距bug 在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的 min-height...重叠的结果是什么？ 外边距重叠就是margin-collapse； 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距； 折叠结果计算规则： 两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值； 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...二、BFC 概念 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。...首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。...} p { width: 100px; height: 100px; background: lightblue; margin: 100px; } 这时候，两个盒子边距就变成了...width: 100px;height: 100px;background: #eee;float: left;"> 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
