女王控的博客

CSS

25 篇文章

CSS not伪类用法一览

优先级 如果对所有CSS伪类的优先级(也就是我们常说的选择器权重)进行分类,你会发现总共只有两个级别,0级和10级。 0级指没有优先级,1级是标签选择器,10级是类选择器,属性选择器,100级是ID选择器。 伪类,伪类,既然带有“类”字,自然其优先级好类选择器一致。 但是,其中有个特殊,那就是逻辑伪类的优先级都是0。例如::not(),:is(),:where()等。 逻辑伪类整个选择器语句的优先级是由括号里面内容决定的,不同的逻辑伪类规则不一样,其中:not… »

CSS等高布局的应用

需求背景 在做侧边抽屉时遇到了需要强行撑满剩余高度的情况,左边的外呼结果要强行撑满剩余高度,这考察了等高布局的应用 解决方案 首先明确侧边栏左边 html 的结构,其中 html 采用 react 写法,css 采用 less 写法 table 布局 比较 hack 的方法 margin 与 padding absolute 此方法需要对 html… »

CSS经典样例实现

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设单标签是一个div: 定义如下通用CSS: border 使用伪元素 使用具有相对特性的无依赖的absolute绝对定位 父元素去掉position:relative属性 外 box-shadow box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影的尺寸 阴影的颜色 内部阴影 内box-shadow drop-shadow 渐变 linearGradient /* 从下到上,从蓝色开始渐变、到高度4… »

CSS世界内联元素与流

块级元素负责结构,内联元素接管内容,而 CSS 世界是面向图文混排,也就是内联元素设计的,由此可见,本章内容在整个 CSS 世界体系中占有非常重要的位置。 字母 x —— CSS 世界中隐匿的举足轻重的角色 字母 x 与 CSS 世界的基线 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线 (baseline)。例如,line-height 行高的定义就是两基线的间距,vertical-align… »

CSS世界四大盒尺寸

深入理解content content与替换元素 替换元素 根据外在盒子是内联还是块级,元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素 通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素,例如img、object、video、iframe或者表单元素textarea、input 特性 内容外观不受页面上CSS的影响,需要类似appearance属性或者浏览器暴露的一些样式接口 有自己的尺寸,在没有明确规定尺寸的情况下,video… »

0%