CSS
Novice-XiaoSong
这个作者很懒,什么都没留下…
展开
-
css 实现水平垂直居中
一、通过设置子元素.parent{ position: absolute; /* 非static即可 */ width: 500px; height: 300px;}子元素知道 width, heightposition, top, left, transform.child{ width: 100px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50px, -2原创 2020-12-24 22:49:30 · 296 阅读 · 0 评论 -
css BFC
BFC(Block Formatting Context):块级格式上下文BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此一、布局规则内部块级盒子(block-level box)垂直方向的间距由 margin 决定同属于一个BFC的内部块级盒子垂直方向的 margin 会发生重叠。可以通过将内部块级盒子变为BFC来解决这个问题。每个内部块级盒子外边距左边界,与外部的BFC的左边界(注意是content的左边界,需要偏移掉BFC的内外边距.原创 2020-11-19 18:14:41 · 119 阅读 · 0 评论 -
css css选择器的解析是从右往左的
为什么从右往左的解析方法效率更高呢如图:假如 DOM 的结构如上图,匹配规则是 .mod-nav h3 span。若从左向右的匹配,过程是:从 .mod-nav 开始,遍历子节点 header 和子节点 div,然后各自向子节点遍历。在右侧 div 的分支中,最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,假如有 1000 个 li,则这 1000 次的遍历与回溯会损失很多性能。再看看从右至左的匹配:先找到所有的最右节点 span,对于每一个 spa转载 2020-11-18 10:32:37 · 548 阅读 · 0 评论 -
科普转载 CSS Pre-processors
CSS 预处理器:一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。三种流行的CSS预处理器:Sass、LESS 和 Stylus转载转载 2020-11-06 11:39:51 · 11051 阅读 · 0 评论 -
css grid布局
阮一峰Grid网格布局教程转载 2020-10-31 17:05:36 · 83 阅读 · 0 评论 -
css 粘性布局
一、粘性布局position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局二、坑粘性布局只在其父元素空间内生效,且要实现 “粘性” 效果,对其父元素有以下要求,否则粘性效果会失效(1)必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小(例如子元素设置top/bottom粘垂直轴,父元素的高度需要大于子元素的高度,这样才有可以活动的空间嘛)(2)父元素中不能设置 overflow: hidden 或 overf原创 2020-10-31 16:54:37 · 10578 阅读 · 0 评论 -
css 优先级
一、总结层叠优先级内联样式 > 样式表 > 外部样式表 > @import > 浏览器缺省样式表优先级ID选择器 > (伪)类选择器, 属性选择器 > (伪)元素选择器 > 通配符选择器!important 标识的优先级最高。多个 !Important 按前2点计算相对优先级二、注意同优先级的选择器,后定义的覆盖先定义的虽然伪元素的优先级较低,但伪元素选择器会创建新的元素,所以伪元素选择器设置的css会覆盖该伪元素继承而来的c原创 2020-10-31 16:09:55 · 171 阅读 · 0 评论 -
css flex布局
容器(container)属性属性说明可能取的值(第一个值为默认值)flex-direction规定主轴方向row | row-reverse | column | column-reverseflex-wrap规定item超过一行时如何换行nowrap | wrap | wrap-reverseflex-flowflex-flow: <flex-direction> || <flex-wrap>默认row nowrapjusti.转载 2020-10-31 00:54:35 · 170 阅读 · 0 评论 -
css 定位
一、position值说明是否脱离文本流static默认值,按照文本流定位否absolute从父级向上查找第一个非 position: static 的元素,相对其进行绝对定位是relative元素相对其在文本流的位置进行定位否fixed相对浏览器窗口定位是inherit从父元素继承-二、float值说明是否脱离文本流none元素不浮动,在其文本流位置否left向左浮动是right向右浮动原创 2020-10-30 20:35:01 · 134 阅读 · 0 评论 -
css 设置元素不可见的几种方法
display: none; 设置后元素(及其子元素)不占据空间visibility: hidden; 设置后元素(及其子元素)占据空间opacity: 0; 设置后元素(及其子元素)占据空间其他一些不建议的方法(1)设置text-indent、位置等让元素超出用户屏幕可见区域)(2)font-size: 0;, height: 0; overflow: hidden; 改变元素大小、空间...原创 2020-10-30 20:09:02 · 1754 阅读 · 0 评论 -
css inline, block, inline-block的区别
区别inlineblockinline-block说明内联元素块级元素内联块换行不换行,多个内联元素排列在一行,直至空间不够才换行独占一行与内联元素相同大小只与内容有关,无法通过width/height修改大小可以使用width/height设置与块级元素相同边距设置只可设置水平方向的margin, padding可设置与块级元素相同补充:块级元素即使设置了宽度,也会独占一行内联元素设置垂直方向的padding时,backgrou...原创 2020-10-30 17:40:16 · 96 阅读 · 0 评论 -
css 伪类、伪元素
一、伪类、伪元素的共同点伪类、伪元素存在的原因:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。二、伪元素、伪类的区别**伪类:**伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。伪元素:伪元素用于创建一些不在文档树中的元素,并为其添加样式。...原创 2020-11-18 11:09:03 · 121 阅读 · 0 评论 -
CSS 知识点汇总
一、简介CSS:Cascading Style Sheets二、CSS选择器元素: div { ... }id: #id { ... }class: .className { ... }子孙: div p { ... } div的所有p子孙子: div>p { ... } div的所有p子结点(不包含孙结点)兄弟: div~p { ... } div的所有p兄弟结点相邻兄弟: div+p div的所有p相邻兄弟结点,只匹配下相邻兄弟属性: [ src$='.pdf' ] 中括原创 2020-10-31 17:06:30 · 171 阅读 · 0 评论 -
css 设置文字溢出部分使用省略号代替
/* 溢出的文字直接省略 */{ white-space:nowrap; /* 文本不换行 */ overflow-x: hidden; /* x方向溢出部分隐藏 */ text-overflow:ellipsis; /* 溢出使用省略号表示 */}原创 2020-08-08 01:35:28 · 378 阅读 · 1 评论 -
css position
可能的值描述static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。fixed相对于浏览器窗口进行绝对定位。元素通过 “left”, “top”, “right” 以及 “bottom” 属性设置位置。absolute相对于父元素进行绝对定位。元素通过 “left”, “top”, “right” 以及 “bottom” 属性设置位置。relative生成相对定位的元素,相对于其正...原创 2020-08-07 13:38:07 · 137 阅读 · 0 评论