显示:行内块最后一个子项宽度100%与其兄弟项不对齐 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css3 Flex布局学习

简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。...假设容器高度设置为 100px，而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。 flex-end：交叉轴的终点对齐 ?...，且子项宽度和不及父容器宽度时，flex-grow 会起作用，子项会根据 flex-grow 设定的值放大（为0的项不放大）当 flex-wrap 为 wrap | wrap-reverse，且子项宽度和超过父容器宽度时...则剩余空间保留，若当前行存在一个子项的 flex-grow 不为0，则剩余空间会被 flex-grow 不为0的子项占据当 flex-wrap 为 nowrap，且子项宽度和不及父容器宽度时，flex-grow...会起作用，子项会根据 flex-grow 设定的值放大（为0的项不放大）当 flex-wrap 为 nowrap，且子项宽度和超过父容器宽度时，flex-shrink 会起作用，子项会根据 flex-shrink

1.5K4 0

CSS 布局_2 Flex弹性盒

:1;指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n felx-basis:auto;指定了 flex...，其中 a 占 1 份，b 占 1 份，c 占 3 份，即 1:1:3，我们可以看到父项宽度定义为 400 px，子项被定义为 200 px，相加之后为 600 px，超出父项宽度 200 px，那么这么超出的...，值为 (20%,25%] 时，最多 4 个子项一行，上面的例子中 flex-basis 的值为 20%，即每一个子项占据该行宽度的 20%，一行可排列 5 个子项，但我们一共有 10 个子项，将 10...flex-start从行首开始排列，每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐flex-end从行尾开始排列，每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐center伸缩元素向每行中点排列...，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同space-between在每行上均匀分配弹性元素，相邻元素间距离相同，即空白在子项之间每行第一个元素与行首对齐，每行最后一个元素与行尾对齐

1.5K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

css3 flex弹性布局详解

flex:是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配。...当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度。...如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。...------------------------------- \*/ /\* align-self属性可覆盖align-items属性，默认值为auto，允许单个项目有与其他项目不一样的对齐方式...Flex 布局 \*/ /\* 使用了display: flex 属性后，父元素不设置宽度，宽度就是100%；不会被子元素宽度撑开；使用了display:

251 0

HTML、CSS温故而知新

HTML 用于创建网页的标准标记语言 1.1 HTML 语法标签和属性不区分大小写，但是推荐小写部分空标签可以不闭合，如 input、meta 属性值推荐使用双引号包裹属性值为 true 时，可以省略属性值...Context 只包含行级盒子的容器会创建一个 IFC IFC 内的排版规则盒子在一行内平行摆放一行放不下时，换行显示 text-align 决定一行内盒子的水平对齐 vertical-align...决定一个盒子在行内的垂直对齐避开浮动(float)元素 2.7.2 块级排版上下文(BFC) BlockFormatting Context 某些容器会创建一个 BFC 根元素浮动、绝对定位、inline-block...Flex 子项和 Grid 子项 overflow 值不为 visible 的块盒 display: flow-root; 2.8 Flex 布局 Flex 布局 | 赤蓝紫 (13535944743...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器使用 grid-template 相关属性将容器划分为网格设置每一个子项占哪些行/列暂时只是初略了解，之后还是得正式学

8901 0

二、CSS

块元素块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度100%...，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素内整体浮动的元素无法撑开父元素...，需要清除浮动 7、浮动元素之间没有垂直margin的合并清除浮动父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）...static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值定位元素特性绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素...，有的设置项不写也是可以的，它会使用默认值。

1.8K7 0

CSS专题，熟练布局技巧，需知文档流

高矮不齐，底边对齐网页上的两个不同的内容出现高低不同时，底边对齐。如图： 3. 自动换行块级元素和行内元素在HTML中，我们已经将标签分为了：文本级、容器级。...CSS标准文档流也将标签分为两种等级： 1)块级元素霸占一行，不能与其他任何元素并列；能接受宽、高；如果不设置宽度，那么宽度将默认变为父亲的100%。...2）行内元素与其他行内元素并排；不能设置宽、高。默认的宽度，就是文字的宽度。...块级元素可以设置为行内元素语法为：display:inline; display是“显示模式”的意思，用来改变元素的行内、块级性质。...让标签变为块级元素。此时这个标签，和一个div无异，此时这个span：能够设置宽度、高度；必须霸占一行了，别人无法和他并排；如果不设置宽度，将撑满父亲。

7623 0

CSS3盒子模型

默认值是nowrap，还有一个值是wrap-reverse flex-direction：规定主轴的方向（水平与垂直） row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。...该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。 flex-end：弹性盒子元素将向行结束位置对齐。...该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。 center：弹性盒子元素将向行中间位置对齐。...该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。...在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

1.1K2 0

前端主流布局方法

块级盒子：div、p、h1；内联盒子：span、a、strong。块状盒子特性独占一行；支持所有css样式；不写宽度的时候，跟父元素的宽度相同；所占区域是矩形。...内联盒子特性盒子默认不会换行（一行显示）；有些样式不支持，例如：width、height等；不写宽度的时候，宽度由内容决定；所占区域不一定是矩形；内联标签与标签之间是有缝隙的。...float属性清除浮动的方案 clear属性：left、right、both三个属性值，用于清除兄弟节点的浮动，如果是父元素嵌套了子元素，子元素有浮动，那么可以通过给子元素添加一个空的同级兄弟空元素，...order 改变某一个flex子项的排序位置，默认值为0，如果元素设置为1，则排至最后，如果设置为负数，则排至第一位。...align-self ——控制单独某一个flex子项的垂直对齐方式，默认值是auto，其他属性值参考Flex容器设置项中的align-items属性。

2.2K3 0

前端基础知识整理

HTML 分组标签标签描述用来组合文档中的行内元素，内联元素(inline) 定义了文档的区域，块级 (block-level) 定义了文档的头部区域...nth-child(2) 伪元素选择每个p元素是其父级的第二个子元素 3 :nth-last-child(n) p:nth-last-child(2) 伪元素选择每个p元素的是其父级的第二个子元素，从最后一个子项计数...nth-of-type(2) 伪元素选择每个p元素是其父级的第二个p元素 3 :nth-last-of-type(n) p:nth-last-of-type(2) 伪元素选择每个p元素的是其父级的第二个p元素，从最后一个子项计数...1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移 2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移...设置为 justify 时，最后一行的对齐方式。

3.2K2 0

前端面试之CSS重点概念精讲

「兄弟元素」 ~链接相邻兄弟选择器仅仅选择当前元素相邻的那个合乎规则的兄弟元素 +链接常见的使用场景是，改变紧跟着一个标题的段的某些表现方面权重 ❝ !...元素默认的display值是table 基本特征:一个水平流上只能「单独显示」一个元素，多个块级元素则换行显示由于块级元素具有换行特性,配合clear属性用来清除浮动 .clear::...textarea{ width:100%; box-sizing:border-box; } ❝设计初衷：解决「替换元素」宽度自适应问题 ❞ ---- 元素超出宽度...处理单行 (AKA: TWO...-水平居中行内元素-水平居中 // 行内元素-水平居中 .center-inline { text-align: center; } 块级元素-水平居中固定宽度的块级元素-水平居中 // 固定宽度的块级元素...如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

2.4K3 0

【CSS】253- 从原型图到成品：步步深入 CSS 布局

这要归因于元素的默认样式，这其中就有我们要探讨的第一个 CSS 知识点：行内元素和块级元素。行内元素们肩并肩挤在一行里（就像句子中的词一样，必要时会折行）。...根据再浏览器中的默认样式划分，span、button 以及 img 都是行内元素。而块级元素，总是踽踽独行。以控制台输出的方式去理解，你可以认为块级元素前后各有一个换行符。...你可能会根据刚刚探讨的行内和块级知识来推断，认为只要把右侧的元素都包裹到一个如 span 标签般的行内元素中，就完事大吉了。但这是行不通的。行内元素并不能阻止其内部的块级元素另起一行。...容器本身是块级元素（得以独占一行），其内部元素会成为 “Flex 子项” —— 即它们不再是行内或块级元素了；它们都受 Flex 容器控制。...因为 Flex 容器会默认：把子项排成一行；让子项与其内容等宽，并 —— 把所有子项的高度拉平为最高子项的高度。我们可以用 align-items 属性来控制垂直方向的对齐方式。

4.4K5 1

浮动布局的深入理解与应用

不会像行内块一样被当做文本处理（没有行内块的空白问题）。...对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素对兄弟的影响： <div class="float-child...方案四：在所有浮动元素的<em>最后</em>面，添加<em>一个</em><em>块</em>级元素，并给该<em>块</em>级元素设置 clear:both （清除前面元素的浮動，<em>不</em>會清除屬性，而是在效果上進行清除，使得父元素可以正常包裹子元素，<em>不</em>會造成塌陷）。...通过设置margin-right和width属性，可以控制每列的<em>宽度</em>和间距。<em>最后</em>，通过添加<em>一个</em>clear: both;的<em>块</em>级元素来清除浮动，确保布局整齐。...通过媒体查询，你可以在小屏幕上调整这些元素的<em>宽度</em>和布局，使其在小屏幕上<em>显示</em>为单列。

671 0

CSS 实用手册

当两个垂直外边距相遇时，将合并成一个 B. 大部分行内元素垂直外边距无效，img 允许设置 C. 行内块元素设置垂直外边距，该行的所有元素都跟着变 D....当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住) ②. 元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下) ③....) (2). block 将指定的元素显示为块级 (3). inline 将指定的元素显示为行内 (4). inline-block、将指定的元素显示为行内块，行内块特点： ①....在 td 中，设置文本的垂直对齐方式 ②. 设置行内块元素两边文本的垂直对齐方式 ③....父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63.

2.7K1 0

CSS 最核心的几个概念

（即无法与其他元素显示在同一行内，除非你显示修改元素的 display 属性），而内联元素则都会在一行内显示。...块级元素可以设置 width、height 属性，而内联元素设置无效。块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。...若既想让元素在行内显示，又能设置宽高，可以设置： display: inline-block; inline-block 在我看来就是让元素对外呈内联元素，可以和其他元素共处与一行内；对内则让元素呈块级元素...如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。...如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似「文字围绕图片」的效果。下一个兄弟元素如果也设置了同一方向的 float，则会紧随该元素之后显示。

3311 0

最全总结，CSS实现居中的方式全部方式

行内元素和其他元素都在同一行高，行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素：a,img,input,lable,select,span,textarea...,font 块级元素总是在新行上开始，占据一整行高度，行高以及外边距和内边距都可控制宽度始终与浏览器的宽度一样，与内容无关可以容纳行内元素和其他块级元素常用的块级元素：div,p,table,...通过把固定宽度的块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。...利用inline-block 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。...；而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。

2.6K1 0

css基础教程之flex布局

：row | row-reverse | column | column-reverse row：主轴与行内轴方向作为默认的书写模式。...即横向从左到右排列（左对齐）。 row-reverse：对齐方式与row相反。 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。...400-200-100-300=-200; 需要分配a,b,c为 1+1+3=5；实际宽度 a=200-200*1/5=160 b=100-200*1/5=60 c=300-200*3/5=180...不允许负值 auto：无特定宽度值，取决于其它属性值 content 基于内容自动计算宽度四、align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。...该情况下flex子项可能会溢出容器 wrap flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse 反转 wrap 排列。

5651 0

CSS笔记

行内元素和块级元素 4....行内元素和块级元素行内元素 display:inline 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。...行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效块级元素 display:block 块级元素各占据一行（默认宽度是它本身父容器的...100%（和父元素的宽度一致），与内容无关），垂直方向排列。...（6）align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

2.2K1 0

CSS布局(二) 盒子模型属性

如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto...; } 兄弟一兄弟二 2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递 .box{ background-color...这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局 2.auto 只有width/height和margin可以设置auto。...【为什么margin:auto无法实现垂直居中】水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间垂直方向不可以居中是因为块级元素的高度默认是内容高度...而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。

1.9K7 0

前端-CSS 最核心的几个概念

（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内显示。...（2）块级元素可以设置 width、height 属性，而内联元素设置无效。（3）块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。...若既想让元素在行内显示，又能设置宽高，可以设置： display: inline-block; inline-block 在我看来就是让元素对外呈内联元素，可以和其他元素共处与一行内；对内则让元素呈块级元素...（3）如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。...（5）如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似「文字围绕图片」的效果。（6）下一个兄弟元素如果也设置了同一方向的 float，则会紧随该元素之后显示。

8304 0

理解CSS - 笔记

计算时不允许进位，比如 100 个十位还是小于 1 个百位当优先级相同时，位置靠后的规则生效 # 属性继承某些属性会自动继承其父元素的计算值 (Computed Value)，除非显示指定一个值。...IFC IFC 内的排版规则：盒子在一行内水平摆放一行放不下时，换行显示 text-align 决定一行内盒子的水平对齐 vertical-align 决定一行内盒子在行内的垂直对齐...：根元素浮动、绝对定位、inline-block Flex 子项和 Grid 子项 overflow 值不是 visible 的块盒 display: flow-root; BFC 内的排版规则：...，中间夹一个块级上下文。...# Flex Box 排版上下文一种新的排版上下文它可以控制子级盒子的：摆放的流向 () 摆放顺序盒子宽度和高度水平和垂直方向的对齐是否允许折行 # flex-direction 属性控制

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭