在学html中，有次在做布局时，使用行高时，自己不明白line-height到底是哪段距离，在没查资料时，我还以为是word里的行距呢？因为我经常使用word里的行距做排版。当我上网查资料时，才明...

在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果，text-shadow在CSS2.1的时候曾被删除过的一个属性，但是又在css3.0中恢复了使用。①text-shadow的使用方法：tex...

在盒模型中，如果我们给盒子内部的元素加入了内边距padding和边框 border后，它的总长度或者高度会增加。那么如果元素用于非常精确的布局时，我们就需要重新进行计算增减。这是比...

在CSS3中，我们可以使用box-shadow属性让盒子产生阴影效果。下面介绍几点box-shadow属性的使用：⑴使用方法：box-shadow：length length length color，前三个length分别表示文字阴影...

一个项目的CSS最基本结构通常是由：base.css，common.css，page.css文件组成的。base.css的作用主要是重设浏览器默认样式和提供通用原子类。base.css文件一般不需维护，但要保证其...

在我们制作网页布局时很多情况要使用position属性。它主要有absolute,solution,static和fixed四个属性值，其中static是默认值，在不写position属性时默认情况下就是static，它遵...

在制作js幻灯片时看到了轮播数字raba属性的用法，忽然想到了以前用到的opacity这个属性，我就想它们都可以设置透明度，究竟有什么区别呢？我就看了一些资料，总结了一点。具体内容如...

①利用relative给一级菜单中的li标签确定相对位置；③使用absolute给二级菜单ul标签确定绝对位置并注意图像z-index层叠关系；④通常情况一级菜单里的li标签做float，使其导航横排...

在网页中relative,absolute和float这三个属性用处非常广，不论是滚动的banner，还是能够切换的选项卡都会有relative,absolute和float这三个属性当中的一个。下面就分别来看看它...

记得以前某某某天上午被设计师“调戏”了，记忆犹新啊，就是因为一个项目（PC和移动）中的字体问题，纠结了一上午，设计师非要字体效果跟设计稿上保持一致。那时那刻，我已无语...

倾盆大雨后，终于带来一些凉意，暂别炎热的天气，心情自然舒坦好多，静下心来分享点东西：浅谈项目中Web网页字体优化的一些事。字体是实现良好的设计、品牌推广、可读性和无障碍功能...

大家都知道给一个box添加渐变背景很简单，但是如何用CSS3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。我们从零开始学习，一共分三...

在项目中，交互动画是很重要的一部分，有些细微的效果，或许都能吸引用户去浏览参与，这些交互我们在一些大型门户的活动，经常会看到很多。今天我们实现一个边框特效：滑动渐变。先来看...

1、只显示一行，超出部分用省略号 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;2、只显示两行(或多行)，超出部分用省略号 overflow: hidden;...

一、link 的使用<link href="index.css" rel="stylesheet">二、@import 的使用<style type="text/css">@import url(index.css);</style>三、link 和 @import 的区别1、引入...

清除浮动方法 给父级定义height 缺点:扩展性不好 父级 overflow:hidden 定位 浮动 开启BFC布局 浮动/定位盒子的特点高宽都由内容撑开 缺点:IE6会失效,添加样式zoom:1;触发...

通常情况下,一个特定的字体仅会包含少数的可用字重。若所指定的字重不存在直接匹配,则会通过字体匹配算法规则匹配使用邻近的可用字重。这也就是为什么我们有时候使用特定字...

在CSS里，标签位置居中一直是困扰Web前端的难题。在本文中，我对这类问题进行了探究和给出了几点建议，供读者参考。1 行内标签1.1 水平居中在父级标签中使用 text-align: center...

首先来瞄一下background-clip,这个属性是干嘛的？顾名思义，背景裁剪... 按照我自己的理解就是背景的显示区域此处粘上MDN的示例链接（嫌麻烦的，后面我也贴上截图）https://develop...

说起文本对齐，大家都知道text-align，最常用的有left、right、center，今天我们说一下justify，也就是文本两端 对齐。说起来简单，但是有些小坑大家还是要注意的。现在我们有这样的...

费话不多说，直接上问题：1.开始时，页面只有两个DIV的嵌套（见图）运行结果是：现在看运行的是正常的，但是当我设置让 class="box2" 的DIV浮动时运行结果是这样的：图中可以看出，box1中已经...

float浮动会使父元素高度塌陷，父级元素不能被撑开，所以导致背景颜色不能被撑开解决方法： 对父元素设置高度 对父元素设置 overflow：hidden清除浮动 把父元素也设置为float浮动 ...

如何通过css实现以下行内水平均等排布的样式？<style>.justify{ display:flex; display:-webkit-flex;/*Safari*/ justify-content:space-between;/*水平排布方式*/ a...

overflow:scroll 滚动条的样式大全：/* 定义滚动条样式 */::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1);} /*定义滚动条轨...

text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color...

tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色.pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: li...

一、兄弟元素的外边距合并效果图如下：（二者之间的间距为100px，不是150px）二、嵌套元素的外边距合并对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有...

CSS 实现盒子模型水平居中水平居中效果图如下：HTML：CSS 全局样式：方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候）方法二：text-align + display（子盒子有或没有宽度的时候都...

下拉框等需要显示上下箭头切换的CSS样式.icon-right, .icon-down, .icon-up {display: inline-block;padding-right: 13rpx;position: absolute;/*组件内调整箭头的位置*/ri...

发场景中用到display:inline-block;然后呢，div间就有间隙，但是ajax加载出来的数据没有间隙，解决办法如下：display:inline-block表示行内块元素，后面自带空格字符。当然有空隙，如果...

一、如果是已知宽高的元素做水平/垂直居中效果的话，可以直接用具体的数值指定定位布局或偏移布局，这个就不过多讨论。这里主要介绍在不知宽高或需要弹性布局下的几种实现方式...

网页公共命名：#wrapper - - 页面外围控制整体布局宽度#container或#content - - 容器，用于最外层#layout - - 布局#head，#header - - 页头部分#foot，#footer - - 页脚部分#nav -...

最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的，默认给弹出隐藏掉，通过js事件绑定动态的显/隐弹出菜单元素。<ul> <li>主页</li> <li>新闻</l...

float:left/right/none;1.同级浮动（1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动）<div class="box1">box1</div><div class="box2">box2</div><div class="box3">b...

前端杂谈: CSS 权重 (Specificity)css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高...

附上一张效果图前几天在园子里看到一篇关于CSS3D行星运转的文章，感觉这个效果也太酷炫了，于是自己也就心血来潮的来尝试的做了一下。因为懒得去用什么插件了，于是就原生的JS写，...

css中margin-top是设置容器的外间距了距离了，div嵌套后，margin-top或者margin-bottom失效了，在网上打到下面的方法可以解决。设计页面的时候遇到一个神奇的问题，下面是html的代...

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}.triangle_top{width:0;height: 0;border-width:50px;border-sty...

我们在做网页的时候，会遇到一个图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点)，如下图，"我的联系方式"是文字，后面的email是图片：解决这个问题最好的办法：一个关键...

下面这段代码是用来清除浮动带来的高度塌陷问题.clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;}...

扩展一: css3蒙版 语法:-webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版;-webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y;-webkit-...

语法:background-size: 值; 1. length 该属性值是设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果只设置第一个值，第二个值自动为auto，等比例缩放...

1. 线性渐变 语法:background: linear-gradient(tp top, red 0%, yellow 30%, green 45%); 注: 重复的线性渐变写法如下background: repeating-linear-gr...

1. 背景切割 语法:background-clip: border-box | padding-box | content-box; border-box: 默认值，背景在包含边框以内的区域可见 padding-box:...

文本阴影 语法:text-shadow: 水平偏移量 垂直偏移量 模糊度 颜色值; 水平偏移量: 向左为负，向右为正 垂直偏移量: 向上为负，向下为正 模糊度...

语法:border-radius: 数值+单位;1. 设置一个值border-radius: 20px; 四个方向的圆角均为20px 2. 设置两个值border-radius: 10px 50px; 左上角和右下...

语法:transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移); 注: 当多种变形方式综合在一起时，用空格隔开 1. rotate 旋转( X/Y/Z 必须为大写 )...

呼吸灯实现思路底图是一个暗的灯 jpg，另外一张图则是亮灯的 png 透明图片，利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效，也就是呼吸灯的闪动效果。最后亮灯...

昨天在做侧栏搜索时遇到一个小问题，搜索按钮高度与input表单高度不同。看似很小的问题自己却不懂，height100%不顶用，于是百度一下找到一个解决方法：首先让父容器 position:relat...

这是介于语法高亮和无样式之间的一种样式，效果如图：CSS参考图一pre { margin:15px auto; padding:20px 15px; border:1px solid #ddd; border-left:4px solid #58...