晨露

今天做使用css modules的React项目的时候发现项目启动后样式错乱&丢失表现行为是：审查元素发现样式丢失，搜索相关样式发现，css存在，但是hash不一样。定位原因是：项目使用了babel-plugin-react-css-modules.babelrc中{ "plugins": [ ["react-css-modules", { "option": "value", exclude: 'node_modules', au

前段时间在做项目迭代的时候遇到一个需求，其中包含一条分割线，大致大概长这样：然后我就看到项目之前实现分割线的方法，基本都是这样实现的：<div>物料下载(仅内网可下载)</div>div{ height: 40px; line-height: 40px; text-align: center; font-size: 12px; color: #ccc; position: relative; margin-bottom: 15px;

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第三个值是模糊半径: 这个值不能为负数...

今天看到一个背景图上有个属性：object-fit: cover当时看到效果与background-size设置这些属性是一致的， 好奇两者有什么区别。object-fit: fill || cover || conatin || none || sacle-downcontain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽...

css权重问题行内样式优先级最高#id +100.class +10e +1其他 +0;浏览器渲染DOM为从右往左的顺序（解析css,快速确定元素）权重值计算的时候，不进位选择器分类元素，伪元素（元素实际存在），类选择器，属性选择器，伪类选择器（元素的状态），id选择器，组合选择器，否定选择器，通用选择器（*）css盒模型基本概念：padding,ma...

Doctype的意义?以标准模式来渲染Dom,让浏览器知道元素的合法性。html,xhtml,html5之间的关系xhtml是html进行xml规范化的严格模式html5是独立的，html发展出的新一代规范html5的新特性都有什么?语义化元素表单增强（input的type之类的）新增API（离线，音视频，本地存储，实时通信）语义化的意义?对开发...

六大方向： 页面布局 css盒模型 DOM事件 HTTP协议 面向对象 原型链难度提升：通信，安全（web安全，xss），算法页面布局：浮动，定位，flexBox , table-cell, 网格布局（grid）【兼容性不好】 关于浮动和定位很简单，就不写了。 html结构:section class="layout flex"> div cl

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 }

设置float:left以后父容器的高度为0的解决方案： 1：去掉float:left样式，改为 display:inline-block;或者2: 给父容器添加样式， overflow:hidden

table的td如何设置overflow:scroll在做项目的时候发现一个需求： 左边保持不变，右边多出来的table的td要设置为overflow:scroll,但是有个问题，就是，无论td的宽度设置为多少，它都会按照表格的百分之百来自适应，根本不会出现滚动条，查阅了一些资料以后，找到了解决方案。 1.table要给它设定一个父级div,并且设置父级div的属性 -overflow:aut

white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;

先看一个效果图吧：这里有几个字段，每一行字的个数都不一样，要左右对齐。 之前是通过加空格或者&nbsp来实现，但是兼容以及效果都不怎么样。x = 所有行中要放字数的最大值；//这个例子中我的x是4 y = 当前行要放的字数值； //本例中，第一行和倒数第二行是2，最后一行是3，其他行是4。给字数相同的行给定相同样式类 并添加样式，因为我有三种情况，所以要设置三种样式。.four{ le

/*滚动条 start*/ ::-webkit-scrollbar { width: 10px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track {

.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

处理各个浏览器间的兼容，背景色渐变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));

移动端html的overflow:hidden属性失效问题这第一次做手机端网页，在交付测试的时候发现一个问题， 就是body的宽度，我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的，但是在手机端测试的时候发现，overflow:hidden是失效的。就是说，页面是也可以左右摇晃的，延展出去的部分会被扯来扯去= = 后来查阅了一些资料，了解到这是由于移动端的web内核不同意