文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。...width:auto; padding:0px 10px;//设置左右内边距为10px margin:0px 10px;//设置左右外边距为10px height...在设置width:100%后，子元素“溢出”了父元素 【注意】宽度默认为width:auto，但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...: 于是又恢复正常了 1.4子元素浮动对width:100%无影响（这里不做展示） 2.浮动／定位对width:auto的影响 2.1默认情况下，width:auto占满一行 不做展示 2.2子元素相对定位..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。

2.1K110

margin-right右边距失效

试着移动下子元素： 可以看到子元素的外边距位置是随着子元素移动的，所以才会出现了移到右边后右边的外边距没有显示的结果。...找了下margin合并，或叫外边距塌陷(margin collapsing)相关的内容，基本上都只是提到上下边距的问题，于是试着给父元素也设置了margin，然后就看到，右边距基本也是无效的，一个auto...的状态： 总结下： 默认状态下的块级元素右边距是无效的 设置float（除了none以外的值）、display (inline-block，inline-flex，inline-grid，inline-table...，inline-box，table)、position（absolute，fixed）之后会生效 当父元素的宽度小于子元素的宽度时，子元素的右边距无效。...，然后为它设置一个跟子元素实际宽度相等的宽即可： 图片 图片 图片 图片 或者，加一个兄弟元素，让它隐藏起来，宽度为实际宽度，应该更实用些： 图片 图片 图片 图片 只是，为什么会无效

1.2K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    盒子模型（CSS重点）

    的圆弧(圆) */             /* border-radius: 100px; */             /* 半径为高度和宽度的一半 */             border-radius...值的个数 表达意思 1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px;...盒子必须指定了宽度（width） 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。...内边距，在ie6等低版本浏览器也会有问题。 我们尽量不要给行内元素指定上下的内外边距就好了。 content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。...width + padding + border （Width为内容宽度） 注意： 1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

    1.6K10

    CSS第三天

    = 左边框 + 内容宽度 + 右边框 盒子高度 = 上边框 + 内容高度 + 下边框 如果盒子被撑大后，可以自己计算，减去多余大小 ---- 3️⃣内边距（padding）- 取值： 边框与内容之间的距离...盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框 如果盒子被撑大后...横着的盒子外边距相加 2.竖着的盒子外边距取最大的数值作为外边距的数值 ⭕外边距折叠现象 – ② 塌陷现象： 给父元素设置overflow: hidden，解决塌陷问题 两个嵌套的块级元素，子元素设置margin-top...会把父元素一起带下来，那么就是塌陷问题 行内元素的margin和padding无效情况： 水平方向的margin和padding布局中有效！...垂直方向的margin和padding布局中无效！ 也就是说：块级元素和行内块元素，四周margin和padding都可以设置 但行内元素只能设置水平，不能设置垂直，垂直是无效的！

    34320

    还在用Android正经布局来写页面吗？

    margin是无效的，大家可以试试，在一个ConstraintLayout布局中放一个按钮，除了边距之外什么都不设置，这样是没有效果的，因为你没有在布局中给它设置相对位置。...平常我们写标题栏的时候应该都遇到过右边放两个按钮的情况，而且是可以控制显示隐藏的，当最右边的按钮隐藏之后，左边的按钮也要距离右边有一个边距，这种情况下我们就可以使用上面这些属性来配置布局。...match_parent" 6 android:layout_weight="1" /> 7 8 <Button 9 android:layout_width="100dp...8、Chains（链） 链条在同一方向上（水平或者垂直）为一组互相关联的控件作统一管理，并且链由链头（链的第一个元素）设置的属性控制，链头是水平链的最左侧的元素，是垂直链的最顶部的元素。...，水平和垂直： 当设置线的方向为horizontal时，辅助线的高度为0，宽度是容器的宽度。

    1.3K30

    盒子模型超详解——大佬不用看，新手看过来

    但是这样说实在是太官方了，对新手很不友好，我个人也不喜欢这样描述。 举个例子 在日常生活中，我们经常能看到一些精美的包装盒 ?...最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框...属性，也可以用一到四个值表示上下左右的内边距： padding:25px 50px 75px 100px; 上填充为25px 右填充为50px 下填充为75px 左填充为100px padding...Margin属性，也可以用一到四个值表示上下左右的内边距： margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin...:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px margin:25px 50px; 上下边距为25px 左右边距为50px margin:25px;

    1.6K31

    CSS 中你需要知道 auto 的一切！

    是，如果我们将元素item的宽度更改为100％而不是auto会发生什么？ 该元素将占用其父项的100％，加上左侧和右侧的边距。...在这种情况下，你可能倾向于使用width: 100%，对吗?下面是一个更好的解决方案。... 要使.item获得其容器的全部高度，我们可以使用以下方法之一: 给.wrapper一个固定的高度，然后为.item元素添加height: 100% 对.wrapper使用...例如，如果一个flex项目的左边是margin-left: auto，那么它将被推到最右边。 考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。 考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。

    5.5K30

    CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

    margin 纵向重叠（合并）问题 元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。...margin 穿透问题 当一个元素包含在另一个元素中时,如果父元素没有设置内边距或边框把外边距分隔开，它们的上或下外边距也会发生合并。...+50px=155px margin负值问题 margin-left 设置负值，元素向左移动 margin-right 设置负值，自身不受影响，右边元素向左移动 margin-top设置负值，元素向上移动...; 元素自身向左移动，右边的元素也会受影响*/ margin-right:-100px;/*元素自身不受影响，右边元素向左移动*/ } .container .box2{...:-100px;时，如：图 3 3、经典布局：圣杯布局 这种布局的优点： 中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。

    1.1K11

    全栈之前端 | 4.CSS3基础知识之盒子模型学习

    以下是一些与 CSS 元素定位相关的学习资源和主题, 我们将一一的进行学习实际： 盒子模型：了解 CSS 中的盒子模型（前面简单的提及了），包括内容区域、边框、内边距和外边距，以及如何使用这些属性来控制元素的大小和间距...其中 CSS 框模型 (Box Model) 规定了元素框处理元素内容大小、内边距、边框 和 外边距 等方式，其相关属性如下图所示: Content box: 这个区域是用来显示内容，大小可以通过设置...许多元素将由用户代理样式表设置外边距和内边距, 我们可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式, 通常是使用通用选择器对所有元素进行设置，例如： * { margin...块级元素（block-level elements）：块级元素以块的形式显示在页面上，它们会独占一行，宽度默认是 100%。...outline-color /* 其他相关属性 */ outline-offset ：用于设置 outline 与一个元素边缘或边框之间的间隙，即元素和轮廓间的宽度。

    31220

    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作（除支付外）】

    接着由于我们的内容需要与上下左右边缘有一定距离，那么此时直接设置内容行的内边距即可统一的为其元素自带边距效果，此时设置这个内容行的边距如下： 接着再内容行中创建一个行，命名为热映内容，这个热映内容也就是包裹单独一个影片信息的行...： 由于每个影片内部也有一定的内边距，那么此时我们再设置这个行的内边距情况，此时还需要设置这个热映内容的高度为 130px，因为内部等下需要设置一个行高度为撑开，如果父容器没有高度给定，那么子元素的高度撑开则会无效...，防止超过整行宽度，左宽度设置为25% 右设置为 75%，使其占满整行： 接着在左行中添加一个图片为当前影片图片，由于直接添加会导致图片按照原本的大小进行显示，在这里设置图片宽高为 100%...，在此需要主要的是，右侧的购票信息按钮为垂直居中，那么此时就需要给予这个购票信息的高度为撑开，再设置垂直对其为居中（如果你父容器没有设置高度，那么撑开无效）： 接着在左侧添加文本，文本的宽度都为...100%，这样就会占据整个行，使其他元素可以自动换行进行显示，在此需要注意的是电影评分这一节，我们发现会有颜色的分数，此时可以直接给予一个行，分文本进行显示： 若觉得这个行挨的太近，那么此时只需要给予这些行的内边距一定大小即可

    8.6K20

    行内元素和块级元素

    特点 元素排在一行 封闭后不会自动换行 不能指定高度与宽度 可以使用line-height来指定高度 外边距对于水平方向有效，垂直方向无效 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响...对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */ margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */ } </style...特点 独占一行 封闭后自动换行 默认宽度为100% 可以指定宽度和高度 内外边距对于四个方向有效 示例 块级元素1 <!...特点 可以指定宽度和高度 内外边距对于四个方向有效 元素排在一行，但是会有空白缝隙 示例 对其他元素无任何影响 */ margin: 100px 20px; /* margin水平方向有效，垂直方向无效

    1.2K20

    Web前端最全面试宝典- CSS篇

    行内块元素的兼容性使用（IE8 以下） Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效...在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。...通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 4.页面导入样式时，使用link和@import有什么区别？...这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。 3）可以轻松实现多重继承。 4）完全兼容 CSS 代码，可以方便地应用到老项目中。...inline元素设置width,height属性无效。

    1.1K10

    HarmonyOS-UIAbitity-类型定义——【坚果派-红目香薰】

    right Length 否 组件内元素距组件右边界的尺寸。 bottom Length 否 组件内元素距组件底部的尺寸。 left Length 否 组件内元素距组件左边界的尺寸。...Margin 外边距类型，用于描述组件不同方向的外边距。 名称 类型 必填 说明 top Length 否 组件外元素距组件顶部的尺寸。 right Length 否 组件外元素距组件右边界的尺寸。...名称 类型 必填 说明 minWidth Length 否 元素最小宽度。 maxWidth Length 否 元素最大宽度。 minHeight Length 否 元素最小高度。...maxHeight Length 否 元素最大高度。 SizeOptions 设置宽高尺寸。 名称 类型 必填 说明 width Length 否 元素宽度。...height Length 否 元素高度。 BorderOptions 边框属性集合，用于描述边框相关信息。 名称 类型 必填 说明 width Length 否 边框宽度。

    14810

    【面试题】104道 CSS 面试题，助你查漏补缺（下）

    相关资料： /*两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。...左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。...相关资料： /*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。...这里以左边宽度固定为100px，右边宽度固定为200px为例。 （1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。...: #68什么是首选最小宽度 [18] 69.为什么 height:100\x 会无效？

    2.5K40

    【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )

    可以 在一行中 同时放置多个 , 常见的行内元素有 : 链接标签 : 行内标签 : 文字相关标签 : , , , , 2、行内元素特点...行内元素特点 : 单行多个 : 在 一行 中 , 可以 设置显示多个 行内元素 ; 宽高无效 : 行内元素 的 宽高 设置是 无效的 , 以 子内容 的大小来确定 ; 默认宽度 : 行内元素 的 宽度...: 100px; /* 左边距 2 像素 */ margin-left:2px; /* 背景黑色 */ background-color: black; /* 文字绿色 *...> 显示效果 : 为 span 标签设置的 宽高 都是无效的 , 设置的 200 x 200 像素的宽高 , 显然没有成功 , 行内元素的宽高只取决于 元素 本身的宽高 ; 二、行内块元素 ----...; 宽高设置 : 行内块元素 的 默认宽高 是 元素本身的宽高 , 但是也可以设置宽高 ; 样式设置 : 行内块元素 可以 设置 宽度 , 高度 , 内边距 , 外边距 , 行高 等属性 ; 3、代码示例

    1.6K10

    CSS入门？一篇就够了！

    块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...块级元素和行内元素区别 块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...width + padding + border （Width为内容宽度） 注意： 1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外

    5.2K20

    104道 CSS 面试题，助你查漏补缺（下）

    相关资料： /*两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。...左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。...相关资料： /*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。...这里以左边宽度固定为100px，右边宽度固定为200px为例。 （1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。...: #68什么是首选最小宽度 [18] 69.为什么 height:100\x 会无效？

    2.4K30

    HTML块级元素和行内元素

    块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...（3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。 行内元素的特点： （1）和相邻行内元素在一行上。...（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。 （4）行内元素只能容纳文本或则其他行内元素。...行内块元素的特点： （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。

    3.4K60
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券