出现问题的代码： .divcss5{ width:500px; border:1px solid #000; padding:10px } .divcss5-lf{...Paste_Image.png 解决方法： 使用clear .clear{ clear:both } <div class="divcss5
——《微卡智享》 本文长度为3942字，预计阅读9分钟 前言 前阵子做的新产品用使用BaseQuickAdapter中的basemultiitemquickadapter来实现二级列表，网的这个相关的资料也挺多...，使用的版本是2.9.4，在使用中发现当二级列表展开时对子列表数据进行操作后，列表中展开和闭合显示的数据会异常。...因为当时项目比较急，3.0版本的用法和原来完全不一样了，加上这个问题不大，所以就没再处理，现在抽出空来就想试试3.0版本的实现方式，毕竟作者说3.0使用kotlin重写了不少，并解决了一些2.0版本中的...get() = null } Head父级列表继承自BaseExpandNode，其中要定义其明细列表MutableList class Head : BaseExpandNode...get() = Bodys } 03 adapter适配器 DataAdatper适配器继承自BaseNodeAdapter，使用NodeProvider将一级列表Head和二级列表Body分开写，代码看起来也方便些
初识伪元素 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。...:first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。...:first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。...自定义计数器 HTML为我们提供ul或ol和li来实现列表，但如果我们希望实现更为可性化的列表，那么该如何处理呢？content属性的counter类型值就能帮到我们。 <!...通过counter-reset来定义和重置计数器，通过counter-increment来增加计数器的值，然后通过counter来决定使用哪个计数器，并指定使用哪种样式。
盒子模型-margin的折叠 13-盒子模型-margin的折叠 父子之间 14-块级水平居中问题 15-外轮廓 16-盒子阴影 17-文字阴影 18-行内非替换元素的特殊性 19-前景色和背景设置的哪些...，那么这个块级元素的margin-top值会传递给父元素 margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素 折叠:...列表元素 列表的实现方式 事实上现在很多的列表功能采用了不同的方案来实现: 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表) 方案二: 使用列表元素, 使用元素语义化的方式实现;...事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局: 原因是列表元素默认的CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多的限制, ul/ol中只能存放...(1) :last-of-type，等同于:nth-last-of-type(1) :only-child，是父元素中唯一的子元素 :only-of-type，是父元素中唯一的这种类型的子元素 下面的伪类偶尔会使用
粘性定位sticky 粘性定位sticky是fixed和relative的结合，例如top:0，不为0是为relative，当距离父元素的顶部为0是转换为fixed，存在兼容性问题； div.sticky...@media screen @media screen 和@media print and (max-width:720px)，定义不同媒体类型、大小下的不同样式； 11....CSS 计数器 CSS 计数器根据规则来递增变量，CSS 计数器使用到以下几个属性： counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content...解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题 解决子级元素外边距会使父级元素塌陷的问题 42. ul list-style失效 默认情况下ul下的li都会自带一个列表样式，如果个ul...inherit：将使用 pointer-events 元素的父级的值。
行高 = 上间距 + 文本高度 + 下间距 应用 单行文本垂直居中 可以设置为line-height: 文字父元素高度 注意点 如果同时设置了行高和font连写，注意覆盖问题 font: style...从父元素处继承；子元素有的，不继承 可以理解为 父元素的样式先赋给子元素 子元素自己的样式又赋给自己 后者覆盖前者 故显示子元素的样式 层叠性 给同一个标签设置不同的样式 → 此时样式会层叠叠加 →...会共同作用在标签上 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果 优先级 最复杂 css三大特性...优先级的介绍 不同的选择器具有不同的优先级，优先级高的选择器样式会夫噶优先级低的样式 优先级公式 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !...合并现象 相邻的两个盒子，margin-bottom 和 margin-top 会合并 取最大值 而不是相加 塌陷现象 发生在互相嵌套的块标签 给子元素添加margin值，会使父标签子标签都下移，
本文，会首先讲解CSS的列表，然后把目光转移到CSS列表规范中的一些有趣特性——标记和计数器。 在CSS中，列表具有特定的属性，为我们提供了标准的列表样式。...这会生成一个带标记盒子的块级盒子，而标记盒子中放有列表项符号。 列表很早就在CSS规范中定义了，而我们目前所使用的列表特性绝大部分来自CSS2规范。...主块级盒子是元素的主要盒子，其包含了列表项的所有子节点，包括子节点中的标记符。然后，标记盒子相对于主块级盒子排列。...CSS列表Level 3规范：::marker和计数器 在CSS2.1规范中的display部分扩展并阐明了列表的基本行为，然而，还有一个规范详细定义了列表的样式—— CSS Lists Specification...接着子项设置为(1.1, 1.2)以及子项的子级设置为(1.1.1，1.1.2)等等。现在可以使用更多计数器功能来实现此目的。
即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题 块元素的居中问题...span(无语义) 超链接标签 a src可以为空,但一定要写 其它常见问题 子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size 内联元素居中...:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案 3.内联块元素(支持全部样式的内联元素) 转换为内联块 设置样式 display:...子元素已经脱离了文档流 定位的四种方式同相对定位 如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面 3.固定定位(相对于浏览器定位) 元素css设置 position: fix...相邻浮动的块元素可以并在一行,超出父级元素会自动换行 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素
一、CSS特性 1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。 ...（注：button、input、select、textarea在IE下是不继承body属性的，需要单独写）。 2.层叠：子元素如果定义了与父元素一样的样式，就会覆盖父元素的样式。...优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化，优化了css代码！...而且还不同，所以我们需要首先将所有的浏览器的内外边距的默认值都设置为零，css属性虽然有继承的特点，但是并不是所有的属性都能继承。 ...并且一般把ul和ol的边框list-style的属性设置为none; 五、列表的使用语法 list-style:list-style-image(列表图片) list-style-position
什么是CSS计数器 计数器是css3提供的一个强大的工具，是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。...：属性用于定义和初始化一个或多个CSS计数器。...counter() 函数 counter()函数必须和content属性一起使用，用来显示CSS计数器。...嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果你要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。...第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。 string参数用作不同嵌套级别的数字之间的分隔符。
如果一个块级元素没有设置height，那么其高度由子元素撑开，如果子元素使用了浮动，脱离了标准的文档流，那么父元素的高度将不能被其撑开。表现出高度塌陷的现象。...清除浮动的方式： 父级元素定义height。 但这样定死的高度，往往不是我们想要的。 父级结尾处添加一个空div,设置css样式clear:both。...原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。 父级定义伪元素:after和zoom(推荐使用)。...ie6,ie7浮动问题 父级div添加css属性：overflow:hidden (7) position 、float 和 display 的取值和各自的意思和用法 position 属性取值...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。 (15) 说说你对边距折叠的理解?
（4）改变样式 link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法，不支持控制DOM和修改样式。 3、浮动元素引起的问题和解决方法是什么？...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。...list-item是指像块类型元素一样显示，并添加样式列表标记。...解决方法是给父级添加 position：relative （5）PNG图片半透明问题。...使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。 56、CSS中，自适应的单位都有哪些？
@规则 CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。...针对不同源的样式，将按照如下的顺序进行层叠，越往下优先级越高： 用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。 用户样式表中的常规声明(由用户设置的自定义样式。...important 又可以把优先级提至最高，就是因为它的优先级最高，所以需要谨慎使用它，以下有些使用注意事项： 一定要优先考虑使用样式规则的优先级来解决问题而不是 !...以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）： 层叠上下文的 border 和 background z-index < 0 的子节点 标准流内块级非定位的子节点...参考：CSS中的浮动和清除浮动，梳理一下[16] 消除浏览器默认样式 针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认样式清除，
使用transform居中子元素 使用 position:absoluteandtransform:translate() 进行居中，不需要知道父级和子元素的宽高，因此它非常适合响应式应用程序。...可在 CodePen 上查看真实效果和编辑代码 浏览器支持程度 97.7% caniuse 15. 列表计数器 计数器本质上是由CSS维护的变量，其值可以通过CSS规则递增以跟踪它们被使用的次数。...可在 CodePen 上查看真实效果和编辑代码 说明你现在可以使用任何类型的html 标签创建有序列表。 counter-reset 初始化计数器，该值是计数器的名称。默认情况下，计数器从0开始。...此函数可以接收两个参数，第一个作为计数器的名称，第二个参数表示占位内容，例如 3.1的小数点。 CSS计数器对于制作轮廓列表特别有用，因为计数器的新实例是在子元素中自动创建的。...可在 CodePen 上查看真实效果和编辑代码 说明 伪类：：focus-within 将对应的样式应用于父元素（任何子元素被聚焦）。例如，表单元素内的输入元素。
CSS面试题 1. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？...CSS 优先级算法如何计算？ 相关知识点： CSS的优先级是根据样式声明的特殊性值来判断的。...相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的） 部分浏览器由于字节溢出问题出现的进位表现不做考虑 7. 关于伪类 LVHA 的解释?...elem:last-of-type 选中父元素下最后一个elem类型元素。 elem:only-of-type 如果父元素下的子元素只有一个elem类型元素，则选中该元素。...list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承display属性的值。
MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...这往往会导致相同的样式。比如： :where(article, section, aside) p { color: #444; } 不同点在于优先级[9]。...然而，:where()的零优先级对CSS重置来说是很实用的，它在没有特定样式的情况下应用标准样式的基线。通常情况下，重置会应用一个默认的字体、颜色、内边距和外边距。...简而言之： 浏览器在页面上绘制元素时将CSS样式应用于该元素。因此，在进一步添加子元素时，整个父元素必须重新绘制。...你对嵌套和CSS预处理器的需求会减少。 :has()更具革命性和令人激动。父级选择将迅速流行起来，我们将忘记黑暗时代。
，但是会影响页面响应速度，不建议使用 样式的两个特性 层叠性：多个选择器设置的样式可以叠加在同一标签上 当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则 继承性：子标签继承父标签的某些样式...伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素 块元素 快元素会独占一行，例如：、、 等。...元素浮动后，会被转换为类似行内块的元素 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐 float:inherit;该属性为继承父元素的浮动属性 列表浮动...清除浮动 额外标签法 添加一个新标签，设置该标签清除浮动 clear : left | right | both 父级添加overflow法 产生问题的父标签添加 overflow 属性 overflow...如果都没有则会以浏览器为准定位 { position:absolute; } 子绝父相 ==子绝父相（口诀)∶子元素使用绝对定位，父元素使用相对定位== 父元素使用相对定位不脱标，更加方便页面布局
在元素处于自身所在浏览器窗口时，与relative特性一致，当超出自身所在浏览器窗口，则于position特性一致 inherit 默认继承父级的定位属性 说一下css3的选择器有那些，以及优先级 答案解析...css的优先级： !...，是一种当页面需要去适应不同类型和屏幕大小时确保元素能够具有恰当行为的布局。...，使用link和@import有什么区别？...这一方面解决了大文件不便维护的问题，另一方面也解决了一堆文件在加载时的性能问题 例如在css使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让我们的css更加简洁、适应性更强，代码直观
的标签 id属性不仅给css用，也给js用 标签元素使用多类样式声明：属性中的各个选择器用空格分开 四 结构选择器： h1 p：指定标签位置范围，h1标签里的后代p标签，空格代表每一层所有后代（...，所有元素里的第一个/最后一个，是每一层级的；:first-of-type，:last-of-type，某类型元素的第一个/最后一个 唯一子元素伪类：:only-child，only-of-type...3权重，写CSS样式更流畅 层叠样式，是不同的选择器效果附加到元素上。...important 四 元素继承权重 子元素继承父级元素的样式规则 继承没有权重，是NULL 不是所有规则都可以继承，比如边框 五 通配符与继承博弈 通配符权重是0 0 > NULL 六...操作数据内容样式，CSS没那么简单哟 数据使用表格或者列表展现 section，ul，li可以用display指定为table-header-group，table-row-group，table-row
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
