CSS
关注
分享
扫一扫
爆炒炒米粉
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS中可以和不可以继承的属性总结
一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、borde原创 2020-09-17 10:49:58 · 626 阅读 · 0 评论 -
CSS中什么是BFC
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。 BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。 什么时候会触发BFC呢？常见的如下： float的值不为none。 overflow的值为auto,scroll或hidden。 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为rel原创 2020-09-17 10:46:21 · 303 阅读 · 1 评论 -
position跟display、overflow、 float这些特性相互叠加后会怎么样?
position跟display、overflow、 float这些特性相互叠加后会怎么样? 一、‘display’、‘position’ 和 ‘float’ 的相互关系 首先我们先来看下这3个属性。 display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示，none 缺省值。象行内元素类型一样显示， inline-block 象行内元素一样显示，但其内容象块类型元素一样显示，list-item 象块类型元素一样显示，并添加样式列表标记（display 还有很多其他值设置，读者自行原创 2020-09-14 14:32:16 · 1290 阅读 · 0 评论 -
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? 给div设置一个宽度，然后设置元素的左右外边距为 auto，比如，margin:0px auto。则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示，可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素， ...原创 2020-09-14 14:31:48 · 819 阅读 · 0 评论 -
Position有哪些常用的值？有什么作用？
position有哪些常用的值？有什么作用？ static：默认值； 不脱离文档流，top，right，bottom，left等属性不生效。 绝对定位：absolute 绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件： 1.参照物和绝对定位元素必须是包含与被包含关系； 2.该参照物必须具有定位属性； 如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。 注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为au原创 2020-09-14 14:31:15 · 787 阅读 · 0 评论 -
绝对定位和相对定位有什么区别？
绝对定位和相对定位的区别 一、主bai体不同 1、相对定位：是设置为相对定位的元素框会偏移某个距离。 2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。 二、特点不同 1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 三、表现原创 2020-09-14 14:29:55 · 18697 阅读 · 0 评论 -
CSS一些基本问题总结
一、box-sizing属性介绍 含义: box-sizing 是用来设置盒模型的尺寸 属性: box-sizing: border-box; 总宽高不包含padding和border box-sizing: content; 总宽高包含padding和border 二、标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height) CSS盒子模型与低版本IE的盒子模型的原创 2020-09-09 08:45:29 · 342 阅读 · 0 评论 -
如何用css画一个三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2020-09-09 08:22:08 · 501 阅读 · 0 评论 -
box-sizing属性介绍
1.盒子模型尺寸基准有两种，分别是content-box和border-box （默认是content-box） 2.理论上说，content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。原创 2020-09-09 08:11:29 · 317 阅读 · 0 评论 -
你对line-height是如何理解的?
line－height是用来bai设置字体的行高，可以理解为设置文字高度du的占位大小，单位可以是数字zhi，或者像素dao 数字：更具文字的大小来决定 1.5相当于文字大小的1.5倍 像素：就是通常的px大小了原创 2020-09-08 09:58:22 · 573 阅读 · 0 评论 -
::before中双冒号和:after单冒号有什么区别？
1、双冒号是在bai当前规范中引入的，用于du区分伪类和伪元素。但是伪类兼zhi容现存样式，浏览dao器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。 2、对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。 3、如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全原创 2020-09-08 09:40:37 · 934 阅读 · 0 评论 -
浏览器是怎么解析CSS选择器的？
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进原创 2020-09-08 09:35:19 · 813 阅读 · 0 评论