![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 71
Twelve--
记录笔记--记录知识点--内容均为日常学习和工作碰到问题的梳理
展开
-
React中使用less修改界面主题 less.modifyVars
新建两个文件一个是theme.less样式文件,一个是less.js文件,js文件的内容可以在 下载js文件 点击下载。安装 less 和 less-loadernpm i less --savenpm i less-loader --save配置环境,在webpack.config.js文件里面修改,找到css的规则,修改三个地方'css-loader’的test: /.css$/ 改为 /.(css|less)/'css-loader’的 importLoaders:1改为2.原创 2022-02-28 14:33:45 · 2886 阅读 · 0 评论 -
导航菜单3d效果 侧边导航酷炫展开效果 鼠标移入侧边栏 二级菜单3D展开 鼠标hover背景变色
// css初始化html, body, div, ul, li, p { margin: 0; padding: 0; }ul { zoom: 1; list-style: none;}a{text-decoration: none;}a:hover { cursor: pointer; }:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: b原创 2021-06-16 20:07:12 · 920 阅读 · 0 评论 -
20210208 104道常见经典CSS面试题笔记(97-104) 完结
97 relative特殊性?原创 2021-02-08 09:39:05 · 132 阅读 · 0 评论 -
20210207 104道常见经典CSS面试题笔记(86-96)
86 relative特殊性?原创 2021-02-07 09:32:31 · 148 阅读 · 0 评论 -
20210206 104道常见经典CSS面试题笔记(75-85)
74 替换元素的计算规则?原创 2021-02-06 09:42:59 · 91 阅读 · 0 评论 -
20210205 104道常见经典CSS面试题笔记64-74)
64 使用rem布局的优缺点?原创 2021-02-05 09:56:09 · 126 阅读 · 0 评论 -
20210204 104道常见经典CSS面试题笔记53-63)
41 absolute的containingblock计算方式和正常流有什么不同?内联元素也可以作为 包含块 所在的元素。原创 2021-02-04 10:51:54 · 87 阅读 · 0 评论 -
20210203 104道常见经典CSS面试题笔记(41-52)
41 absolute的containingblock计算方式和正常流有什么不同?原创 2021-02-03 10:26:17 · 163 阅读 · 0 评论 -
20210202 104道常见经典CSS面试题笔记(31-40)
31 zoom:1清除浮动原理?清除浮动,触发hasLayout。zoom属性是ie浏览器的专有属性,它可以设置或检索对象的缩放比例,解决ie下比较奇葩的bug。譬如外边距的重叠,浮动清除,触发ie的hasLayout属性等。当设置来zoom的值之后,所设置的元素就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值其实也会发生重新渲染,运用这个原理,也解决了ie下子元素浮动时候父元素不随着自动扩大的问题。zoom属性是ie浏览器专有属性,火狐和老版本的webkit核心的浏览器不支持这个属原创 2021-02-02 09:31:44 · 108 阅读 · 0 评论 -
20210201 104道常见经典CSS面试题笔记(21-30)
21 CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后有什么区别?对于一般的元素,它的表现跟visibility:hidden是一样的。元素是不可见的,但此时仍占用页面空间。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,表现却跟display:none一样,也即是它们占用的空间也会释放。在不同浏览器的区别:在谷歌浏览器里,使用collapse值和使用hidden原创 2021-02-01 16:29:34 · 352 阅读 · 0 评论 -
20210129 104道常见经典CSS面试题笔记(11-20)
11 position的值relative和absolute定位原点?absolute== 生成绝对定位的元素,相对于值不为static的第一个元素的padding box进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。fixed 生成绝对定位的元素,相对于浏览器窗口进行定位relative 生成相对定位的元素 相对于其元素本身所在正常位置进行定位static 默认值 没有定位,元素出现在正常原创 2021-01-29 11:28:42 · 109 阅读 · 0 评论 -
20210128 104道常见经典CSS面试题笔记(1-10)
1 标准的CSS盒子模型和低版本的IE盒子模型有什么不同?盒模型是由四个部分组成,分别是margin,border,padding和content。标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的范围只包含了content,而IE盒模型的width和height属性的范围包含了border,padding和content。一般来说,可以通过修改元素的box-sizing属性来改变元素的盒模型2 CSS选择符有哪些?id选择原创 2021-01-28 16:16:21 · 189 阅读 · 0 评论 -
CSS单行文本或多行文本溢出省略效果 考虑兼容性
单行.box{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}多行.box2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden;}兼容.box3{ position: relative; line-height:原创 2020-11-18 09:27:19 · 265 阅读 · 0 评论 -
CSS隐藏页面上元素的三种方法 opacity display visibility 优劣使用场景
display:none结构 : 会让元素完全从渲染树中消失 渲染的时候不占据任何空间 不能点击继承 : 是非继承属性 子孙节点消失由于元素从渲染树消失造成 改子孙节点属性无法显示性能 : 修改元素会造成文档回流 读屏器不会读取display:none元素内容 性能消耗较大场景 : 显示出原来这里不存在的结构transition : 不支持display举例 : 从这个世界消失来 不存在了visibility:hidden结构 : 不会让元素从渲染树消失 渲染元素继续占据空间 只是内.原创 2020-11-16 10:35:09 · 534 阅读 · 0 评论 -
如何让一个div水平垂直居中
在工作中 经常会碰到让一个div框针对某个模块水平垂直居中 针对这种情况 有多种方法 现在一一实现一下一. div绝对定位水平垂直居中 margin 负间距代码:.box { width: 200px; height: 200px; background: yellow; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;原创 2020-11-13 10:25:43 · 2235 阅读 · 0 评论 -
CSS BFC原理及其应用 理解 IFC GFC FFC
BFC – Block Formatting Context 直译是–块级格式化上下文 它是一个独立渲染区域 只有Block-level box参与 它规定了内部如何布局 并且与这个区域外部毫不相干解释 BFC 之前 先理解 Box Formatting Context的概念Box–css布局的基本单位直观来说 就是一个页面由很多个box组成的 元素的类型和display属性 决定了这个box的类型 不同类型的box 会参与不同的formatting context(一个决定如何渲染文档的容器) 因此原创 2020-11-12 09:09:07 · 224 阅读 · 0 评论 -
css实现 10种鼠标移入按钮动效
html代码<!DOCTYPE <!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>按钮背景动画</title> <meta name="viewport" content="width=device原创 2020-07-28 21:12:33 · 2837 阅读 · 0 评论 -
常见CSS操作 BFC 垂直居中 水平居中
常见创建 BFC 的方式1. position:absolute fixed2. float 不是none3. overflow 不是 visible4. display inline-block或者flex5. 根元素 <html>等等...垂直居中1. padding // 父元素不能设置固定高度2. line-height // 不适用多行文本3. display:flex; flex-direction:column; justify-conent:ce原创 2020-05-29 09:08:41 · 183 阅读 · 0 评论 -
CSS多行文本省略 私有属性和伪元素
私有属性:优点:简洁明了缺点:私有属性 有比较大的局限性.box{ width: 300px; height: 90px; border:1px solid #ccc; font-size: 16px; overflow:hidden; // 多余隐藏 display:-webkit-box; // 自适应布局 和flexbox有点像 可以设置盒子内部元素的排列方向 -webkit-box-orient:vertical; // 文本从上至下 垂直方向 -webkit-line-cla原创 2020-05-27 23:31:19 · 169 阅读 · 0 评论 -
常见问题/知识点记录(五)
一 BFC是什么BFC 全称为 块格式化上下文 (Block Formatting Context)它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用BFC 特性(功能)使 BFC 内部浮动元素不会到处乱跑和浮动元素产生边界二 css选择器的优先级四个级别:行内样式,ID选择器,Class选择器,标签!important的优先级是最高的优先级相同时,则采用就近原则,选择最后出现的样式继承得来的属性,其优先级最低!impo.原创 2020-05-12 21:09:52 · 97 阅读 · 0 评论 -
Less的基本使用
常用的预处理语言 Sass Less Stylus使用Less两种方式引入less <link rel="stylesheet/less" href="xxx.less">然后引入 less.js 文件使用 npm 安装 npm install -g less在项目中使用Webpack 需要配合less-loader处理一 变量二 嵌套三 混合方法四 继承五 导...转载 2020-03-10 17:57:16 · 731 阅读 · 0 评论 -
rem适配方案
remrem是一个相对单位 类似于emem是相对父元素的字体大小来说的rem的基准是相对于html元素的字体大小rem的优点:就是可以通过修改html里面的字体大小来改变页面中元素的大小 整体控制media媒体查询 针对不同的屏幕尺寸设置不同的样式@media mediatype and|not|only (media feature){}// mediatype: all /...原创 2020-03-10 14:02:01 · 320 阅读 · 0 评论 -
Flex 弹性布局及处理兼容
flex 盒子布局的原理通过给父盒子添加flex属性 来控制子盒子的位置和排列方式弹性布局 任何一个容器都可以指定flex布局当父盒子设为flex布局以后 子元素的float clear和vertical-align属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局一. 兼容性各个浏览器的支持情况处理兼容….box{ display:...原创 2020-03-10 10:48:13 · 909 阅读 · 0 评论 -
CSS性能优化【学习总结于记录】
提高性能的方法有哪些?1. 合并css文件,如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢。2. 减少css嵌套,最好不要嵌套三层以上。3. 不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能。4. 建立公共样式类,把相同样式提取出来作为公共类使用。5. 减少通配符*或者类似[hidden="true"]这类选择器的使...转载 2019-12-12 14:40:08 · 10910 阅读 · 1 评论