首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS
yanessa_yu
创建于2021-06-01
订阅专栏
层叠样式表 Cascading Style Sheets
暂无订阅
共15篇文章
创建于2021-06-01
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
突破浏览器最小字号限制：前端超小字号实现技巧
一. 使用SVG文本呈现文字 使用x="50%"和text-anchor="middle"实现文字水平居中 二. 使用 transform: scale()缩小文字 font-size的大小取决于浏览
CSS 实战笔记：记录我的成长与收获
滑动定屏 fullpage组件：https://alvarotrigo.com/fullPage/ scroll-snap-type background-attachment: fixed; CSS
防止样式污染的一些方法
Vue的Scoped 实现原理 每个组件增加一个唯一的自定义属性，再通过属性选择器实现作用域隔离样式的效果 css Modules 实现原理： css-loader 将 CSS 类名转换为局部作用域的
link和@import加载CSS文件的区别
CSS @import @import 用于从其他样式表导入样式规则 @import 必须在CSS文档的头部，但可以在@charset规则后面 @import 不是一个嵌套语句，不能在条件组的规则中使
h5 适配方案
vite+vue3的h5适配方案 安装lib-flexible和postcss-px2rem npm i lib-flexible -D pnpm install postcss-px2rem -D
flex的一个面试点
flex实现如下布局 容易被忽视的 align-self https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
css: gap解决flex-wrap换行，两行之间无间隙
CSS gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式。 https://developer.mozilla.org/zh
display: flex;flex-shrink:0；使得外层div宽度等于内层div宽度
内层div如果不设置宽度的情况下会与外层div宽度一致，因为div是块级元素，默认是父容器的100%。 外层div如果不设置高度的话会与内层div高度保持一致，因为它会根据内容的多少自适应高度。 外层
rem
rem 是相对长度单位，相对的是根元素<html>的字体大小font-size em在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如width
实现textarea自适应
textarea外层添加div，textarea相对外层div绝对定位，此时textarea的高度等于外层div的高度； textarea同级添加div，同级div相对外层div相对定位，设置div的
white-space
定义和用法 white-space属性设置如何处理元素内的空白 可能的值 normal ： 默认。空白会被浏览器忽略。 pre：空白会被浏览器保留，其行为方式类似HTML中的<pre>标签。 nowr
CSS如何去掉重叠部分的边框
问题描述 在前端开发中，边框border属性是经常会用到的一个属性，它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题，边框会重叠在一起（如下图），那么如何去掉重叠部分的元素
iphoneX安全距离 viewport-fit
iPhoneX SafeArea - 安全区域 除了刘海和胡子（底部横条）以外的区域为安全区域，即下图中浅蓝色的部分。 安全区域的大小为除去statusBar（状态栏区域：44），navigation
input和button设置相同height，显示出来的高度不一致
显示高度不一致的原因 button 的 border 计算在height之内 input 的 border 计算在height 之外 解决办法 input 设置 box-sizing：border-b
CSS
为何CSS不支持父选择器？ 浏览器解析HTML文档，是从前往后，有外及里的。所以时常会看到页面先出现头部然后主体内容再出现的加载情况。 但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕
