![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技术-css
aliveAmy
从一件小事开始,坚持到永恒。
github主页:
https://github.com/AmyShieh
展开
-
css module设置localIdent,样式失效,hash错误,webpack。getLocalIdent mismatch
今天做使用css modules的React项目的时候发现项目启动后样式错乱&丢失表现行为是:审查元素发现样式丢失,搜索相关样式发现,css存在,但是hash不一样。定位原因是:项目使用了babel-plugin-react-css-modules.babelrc中{ "plugins": [ ["react-css-modules", { "option": "value", exclude: 'node_modules', au原创 2022-04-26 18:21:03 · 945 阅读 · 1 评论 -
可能是最优雅的分割线实现方式CSS实现
前段时间在做项目迭代的时候遇到一个需求,其中包含一条分割线,大致大概长这样:然后我就看到项目之前实现分割线的方法,基本都是这样实现的:<div>物料下载(仅内网可下载)</div>div{ height: 40px; line-height: 40px; text-align: center; font-size: 12px; color: #ccc; position: relative; margin-bottom: 15px;原创 2021-02-19 22:18:49 · 2041 阅读 · 1 评论 -
box-shadow详解
box-shadow详解:我们可以看到box-shadow的属性如下/* offset-x | offset-y | blur-radius | spread-radius | color */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);第一个值代表x轴的offset第二值代表y轴的offset第三个值是模糊半径: 这个值不能为负数...原创 2019-02-21 00:22:49 · 10252 阅读 · 3 评论 -
object-fit与background-size
今天看到一个背景图上有个属性:object-fit: cover当时看到效果与background-size设置这些属性是一致的, 好奇两者有什么区别。object-fit: fill || cover || conatin || none || sacle-downcontain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽...原创 2019-02-15 16:00:27 · 2365 阅读 · 0 评论 -
css基础强化
css权重问题行内样式优先级最高#id +100.class +10e +1其他 +0;浏览器渲染DOM为从右往左的顺序(解析css,快速确定元素)权重值计算的时候,不进位选择器分类元素,伪元素(元素实际存在),类选择器,属性选择器,伪类选择器(元素的状态),id选择器,组合选择器,否定选择器,通用选择器(*)css盒模型基本概念:padding,ma...原创 2018-02-28 23:07:22 · 285 阅读 · 0 评论 -
html基础强化
Doctype的意义?以标准模式来渲染Dom,让浏览器知道元素的合法性。html,xhtml,html5之间的关系xhtml是html进行xml规范化的严格模式html5是独立的,html发展出的新一代规范html5的新特性都有什么?语义化元素表单增强(input的type之类的)新增API(离线,音视频,本地存储,实时通信)语义化的意义?对开发...原创 2018-02-28 23:06:09 · 176 阅读 · 0 评论 -
页面布局与css盒子模型
六大方向: 页面布局 css盒模型 DOM事件 HTTP协议 面向对象 原型链难度提升:通信,安全(web安全,xss),算法页面布局:浮动,定位,flexBox , table-cell, 网格布局(grid)【兼容性不好】 关于浮动和定位很简单,就不写了。 html结构:section class="layout flex"> div cl原创 2018-01-23 21:06:11 · 1177 阅读 · 0 评论 -
css3 @media媒体查询
meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scalable=no">语法格式: @media screen and (min-width: 1200px){ body{ css code }原创 2018-02-07 15:37:45 · 985 阅读 · 0 评论 -
设置float:left以后父容器的高度为0
设置float:left以后父容器的高度为0的解决方案: 1:去掉float:left样式,改为 display:inline-block;或者2: 给父容器添加样式, overflow:hidden原创 2018-01-13 14:31:40 · 2143 阅读 · 0 评论 -
table设置overflow:scroll
table的td如何设置overflow:scroll在做项目的时候发现一个需求: 左边保持不变,右边多出来的table的td要设置为overflow:scroll,但是有个问题,就是,无论td的宽度设置为多少,它都会按照表格的百分之百来自适应,根本不会出现滚动条,查阅了一些资料以后,找到了解决方案。 1.table要给它设定一个父级div,并且设置父级div的属性 -overflow:aut原创 2017-03-14 21:20:34 · 29810 阅读 · 0 评论 -
文字超出的部分用...展示
white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;原创 2017-12-20 11:39:37 · 655 阅读 · 0 评论 -
表单文字个数不同左右对齐方式
先看一个效果图吧:这里有几个字段,每一行字的个数都不一样,要左右对齐。 之前是通过加空格或者 来实现,但是兼容以及效果都不怎么样。x = 所有行中要放字数的最大值;//这个例子中我的x是4 y = 当前行要放的字数值; //本例中,第一行和倒数第二行是2,最后一行是3,其他行是4。给字数相同的行给定相同样式类 并添加样式,因为我有三种情况,所以要设置三种样式。.four{ le原创 2017-09-21 09:50:47 · 3305 阅读 · 0 评论 -
浏览器滚动条默认样式修改
/*滚动条 start*/ ::-webkit-scrollbar { width: 10px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track {原创 2017-06-30 14:11:42 · 725 阅读 · 0 评论 -
如何使文字垂直居中
.navBeer li{ border-bottom: 2px solid #1c2931; border-top: 2px solid #2a4455; display: table;}.navBeer li a{ display: block; color: #fff; cursor: pointer; text-align: cent原创 2017-04-11 18:17:26 · 676 阅读 · 0 评论 -
背景色渐变处理-linear-gradient
处理各个浏览器间的兼容,背景色渐变background: -moz-linear-gradient(top, #0192ed 0%, #0baeb3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0192ed), color-stop(100%,#0baeb3));原创 2017-04-11 13:49:56 · 1162 阅读 · 0 评论 -
移动端html的overflow:hidden属性失效问题
移动端html的overflow:hidden属性失效问题这第一次做手机端网页,在交付测试的时候发现一个问题, 就是body的宽度,我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的,但是在手机端测试的时候发现,overflow:hidden是失效的。就是说,页面是也可以左右摇晃的,延展出去的部分会被扯来扯去= = 后来查阅了一些资料,了解到这是由于移动端的web内核不同意原创 2017-03-14 21:35:25 · 7079 阅读 · 0 评论