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

CSS3

/img/tb.gif) no-repeat left center; ---- 元素显示模式 1、 块级元素block 独占一行（一行只能显示一个） 宽度默认是父元素的宽度，高度默认由内容撑开...但是若不换行，全部标签放一行，大大降低了代码的可读性和难度。所以就引入了浮动。 ---- 结构伪类选择器 根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素.... 效果： 现在运用到前端中，就需要让两个div一个在左端，一个在右端 特点：类似于图层的概念，脱离了标准流，像两张卡片，叠放在一起，不会影响原标签，一行可以有多个，可以设置宽高...例如：h系列，p，div…… > 行内元素/行内块元素一行显示多个 ==> 水平布局。...例如：a，input，span…… 2.浮动 可以让原本垂直布局的 块级元素变成水平布局,子元素嵌入进父元素上方，父元素内容环绕浮动子元素，上方有介绍，类似于图层的概念或微软word中图片环绕文字四周概念

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

    在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

    在前端开发中，实现水平垂直居中一直是个热门话题。...它的工作原理是：在 Flexbox 布局中，margin: auto; 会根据父容器的剩余空间自动调整元素的外边距，直到子元素居中。...2.2 实现更多实际开发中的布局 示例 1：实现子元素部分集中 在实际开发中，我们常遇到这样一种需求：将元素水平分布在容器内，其中某些元素需要靠近在一起，与其他元素保持一定的自适应距离。...示例 2：实现等宽子项的平均分布 在很多情况下，我们需要将商品卡片或其他内容等宽地分布在每一行中，使每个子项都具有相同的宽度并且平均分布，每一行都是从左到右。...使用 space-around 时如果最后一行的元素数量不满，元素会在行中均匀分布，导致它们集中在中间，而不是靠左或对齐其他行。 大家在遇到这些情况时是不是就在考虑换用 grid 布局了呢？

    17210

    实战！半小时写一个脑力小游戏

    这个游戏有 12 张卡片。 每张卡片中都包含一个名为 .memory-card的容器 div，它包含两个img元素。 一个代表卡片的正面 front-face，另一个个代表背面 back-face。...这组卡片将被包装在一个 section容器元素中。 最终代码如下： ? CSS 我们将使用一个简单但非常有用的配置，把它应用于所有项目： ?...接下来对 .memory-card元素添加 transform-style:preserve-3d属性，这样就把卡片置于在父节点中创建的3D空间中，而不是将其平铺在 z = 0的平面上（transform-style...现在我们得到了带有 3D 翻转效果的卡片， 不过为什么卡片的另一面没有出现？ 由于绝对定位的原因，现在 .front-face和 .back-face都堆叠在了一起。...通过使用以下语法： data-*,这里的*可以是任何单词，它将被插入到元素的 dataset 属性中。 所以接下来为每张卡片添加一个 data-framework： ?

    1.7K20

    译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

    根据W3C，以下是针对该问题的一些解决方案： 在父元素上添加 border 将子元素显示更改为 inline-block 一个更直接的解决方案是将 padding-top 添加到父元素。 ?...例如，一个绝对定位的元素需要从其父元素的左边缘和上边缘定位 16px。 考虑以下示例，带有图标的卡片，其图标应与其父对象的左上边缘隔开。...处理底部margin 假设以下组件堆叠在一起，每个组件都有底边距。 ? 注意最后一个元素有一个空白，这是不正确的，因为边距只能在元素之间。...这是我想到的一些问题： 间隔组件如何在父级内部取其宽度或高度？在水平布局和垂直布局中，它将如何工作？...让我们回想一下Grid用例，以了解如何在其中使用动态间距。

    12.1K10

    CSS&HTML面经专题——（三）CSS定位盒模型经典布局浮动布局与BFC

    relative 相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。...b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。...它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。...缺点 最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷。...div class="inner">3div> div> 复制代码 这时可以看到，边距不会叠在一起了，是正常的20px。

    2K31

    深入学习下 CSS 间距相关的知识

    根据 W3C，以下是针对该问题的一些解决方案： 给父元素添加边框 将子元素显示更改为 inline-block 更直接的解决方案是将 padding-top 添加到父元素。.... --> div> div> 通常，我更喜欢将组件封装起来，避免给它们添加边距，出于这个原因，我有元素 grid__item，我的卡片组件将位于其中。...注意不要超过边距值，因为它会重叠其兄弟元素。 卡片组件 哦，如果我想详细了解卡片组件间距，我可能会写一本书。 我将突出显示一个通用模式，看看应该如何应用间距。...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。...最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。 让我们回顾一下网格用例，看看如何在其中使用动态间距。

    13.5K40

    创意卡片式项目管理界面UI设计源码

    这是一款非常有创意的卡片式项目管理界面UI设计效果。该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。...每一个项目都包含一个表示项目标题的div.cd-title元素和一个表示项目信息的div.cd-project-info元素。项目的图片被设置为.cd-title::before伪元素的背景图片。...每一个单独的项目都使用绝对定位，并设置100%的高度和放置在它们父容器.cd-project-info的左上角位置。开始它们是堆叠在一起的。...这样就是3个项目分别在同一个屏幕中显示1/3的部分。.../ transform: translateY(100%); } 对于.cd-project-info（项目信息），它有100%的高度，一个overflow: auto属性（使其可以滚动），它被放置在父元素

    1.6K20

    BootStrap基础知识

    使用行来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间的间隙。...d-flex 类创建一个弹性盒子容器 d-inline-flex 创建显示在同一行上的弹性盒子容器可以使用 flex-row 可以设置弹性子元素水平显示(预设) flex-row-reverse 类用于设置右对齐显示...align-items-*-end 根据不同荧幕设备，让元素在尾部显示在同一行。 align-items-*-center 根据不同荧幕设备，让元素在中间位置显示在同一行。...导航(Navbar) 在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单中的元素都是左对齐的 在荧幕宽度 小于 576px 时为垂直堆叠，如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上

    33510

    CSS 3D的魅力

    先写一个面.cube1，宽高100%等同于父元素的宽高，背景色为red，代码和效果如下 .cube1{ width: 100%; height: 100%; background...为了之后方便我们看到立体效果，现在我们旋转一下父元素，加入如下代码，效果如下 .cube-box{ transform: rotateX(-30deg) rotateY(45deg); } ?...5. .cube1作为第一个元素，我们不需要它旋转，它作为默认面，现在拼接第二个面.cube2，按照.cube1的写法，但是我们设置为绿色，效果如下，.cube2重叠在.cube1上，因此我们还需要旋转...现在长方体已经写好，我们来点动效吧，添加一个div.cube-wapper把刚才的cube-box再包裹一层，让cube-box绝对定位到父元素底部，这样高度变化的时候是向上延伸和收缩，js定时器每隔5...实际也非常简单，还是利用上面demo1的原理旋转卡片，再通过定位把卡片排列，定义一个无限循环的摇摆动画，给每个卡片使用不同的时间，最后绑定点击事件，给元素使用css过渡动画transition。

    75240

    寒假提升 ｜ Day6 CSS 第四部分

    写出案例，证明CSS属性的继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...可以和其他行内级元素在同一行,不可以设置宽度和高度,宽度和高度由内容决定 inline-block：让元素同时具备行内级、块级元素的特征 ;可以和其他行内级元素在同一行,可以设置宽度和高度,默认宽度和高度由内容决定...只设置其中一个元素的margin 上下margin折叠的情况 块级元素的居中 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block...元素) 水平居中:在父元素中设置 text-align: center 块级元素 水平居中:margin: 0 auto 1.2. outline outline 表示元素的外轮廓 不占用空间 默认...水平居中 元素的水平居中方案 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block元素) 水平居中:在父元素中设置

    1.3K20

    bootstrap快速入门笔记（二）-栅格系统，响应式类

    一，栅格系统大致有以下： 1，行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，一行有12列 2....“列（column）”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4 　　通过列设置padding属性，通过为.row 元素设置负值 margin 从而抵消掉为 .container...超小屏幕 手机 (水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列...col-xs-6div> div class="col-xs-6">.col-xs-6div> div> 效果： 小屏 中屏 某些列可能会出现比别的列高的情况。...为了克服这一问题，建议联合使用 .clearfix和响应式工具类 *如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

    1.1K30

    Bootstrap基础学习笔记

    【网格系统】 .row 定义一行 .col 均分列数，最多一行12列。....text-lowercase 设定文本小写 .text-uppercase 设定文本大写 .text-capitalize 设定单词首字母大写 .initialism 显示在 元素中的文本以小号字体展示...将所有列表项放置同一行 .pre-scrollable 使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 【文字颜色样式】 .text-muted 柔和的文本...默认是左对齐 .dropdown-header 下拉菜单标题 .dropdown-item 下拉菜单列表项目 .dropdown-divider 在下拉菜单中创建一个水平的分割线 .active 启用指定下拉菜单列表项目...collapse" 折叠触发对象必需属性 data-target="#id" | href="#id" 折叠触发对象必需属性 .collapse 折叠目标对象样式 data-parent="#id" 属性来实现父元素下

    4.9K31

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

    width: auto 块级元素(如div>或)的初始宽度是auto，这使得它们占据了包含它们的块的整个水平空间。...auto时，它包含margin、padding和border，不会变得比它的父元素大。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...好吧，原因是绝对定位的元素相对于其最接近的父元素具有position：relative。 该父项具有padding: 16px，因此子项位于顶部和左侧的16px处。 有趣，不是吗？...我们在右侧包含一行标题，描述和一个操作按钮的行。 我们希望操作按钮贴在右侧。

    5.5K30

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    下边线 的长度 , 如 : bottom: 10px ; 左侧偏移量 : 盒子模型 距离 父容器 左边线 的长度 , 如 : left: 10px ; 右侧偏移量 : 盒子模型 距离 父容器 右边线 的长度...设置的 ; 如 : 盒子模型 在标准流 中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是 相对于原来的位置 (0, 0) 进行 边偏移 后的位置 ; 下面的示例中 , 盒子模型的初始位置是...相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素...在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ; 设置了定位样式的盒子会压住标准流盒子 , 如果有多个设置定位的盒子 , 后面的盒子会压住前面的盒子 ; 下面的代码中...class="one">div> div class="two">div> div class="three">div> 显示效果 : 12、z-index

    36610

    【Web前端】深入CSS 布局

    CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。...设置 ​​display: flex;​​ 将父元素设置为​​display: flex;​​​后，子元素将自动按照水平（默认）或垂直方向排列，并且能够灵活调整大小以适应容器。...: lightgreen;">Item 2div> div style="background-color: lightcoral;">Item 3div> div> 三个子元素在同一行水平排列...五、浮动（Float） 浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。... div> 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。 需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。

    10510

    重学前端之BFC、IFC、FFC、GFC

    清除浮动影响：当父元素内部有浮动的子元素时，父元素的高度可能会塌陷（无法正确包裹住浮动的子元素）。利用 BFC 可以解决这个问题 div class="float-box">div> div>父元素 .parent 通过触发 BFC，其高度能自适应浮动子元素的高度...在 IFC 中，内联元素按照水平方向依次排列，当一行排不下时会进行换行处理，并且在垂直方向上，它们的对齐方式遵循一定的规则，比如基线对齐、顶部对齐、中部对齐等。...-文本排版：在处理一段包含多个内联元素（比如不同样式的文字、链接等混合在一起）的文本内容时，IFC 规则决定了它们如何在一行内排列以及垂直方向上的对齐情况。...内联块元素的排列处理：当内联块元素（display 属性值为 inline-block 的元素）参与到内联布局中时，也遵循 IFC 的规则，比如多个内联块元素组成的导航栏，它们在水平方向排列以及垂直对齐方面都受

    19410
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券
      首页
      学习
      活动
      专区
      圈层
      工具
      TVP最新优惠活动
      返回腾讯云官网