yihanzhi的博客

问题描述：因行边缘出现符号或其它情况导致 行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？解决办法：用css实现两端对齐，解决行边缘出现的空白问题。text-align: justify;...

问题描述：样式设置图片宽高后，图片缩小变的模糊了。如何解决图片模糊问题？解决办法：样式表中加入以下样式即可解决img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode:nearest-neighbor;}...

1、父元素高度确定的情况下通过transform实现垂直居中<!-- css --><style> .box-wrap { background-color: red; width: 300px; height: 300px; padding: 20px; } img { width: 100%; position: relative; top: 50%; transform: translateY(-5

利用css滤镜，可使网站快速变灰，实现代码如下：html {　　filter: grayscale(100%);　　-webkit-filter: grayscale(100%);　　-moz-filter: grayscale(100%);　　-ms-filter: grayscale(100%);　　-o-filter: grayscale(100%);　　filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.

css修改默认滚动条代码：/*滚动条宽度*/.box-wrap::-webkit-scrollbar { width: 4px;}/*滚动条里面小方块*/.box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*滚动条里面轨道*/.box-wrap::-w

需求描述：wap页面展现一张banner图片，要求其宽度为页面的宽度（屏幕宽度），高度为宽度的3/5。css实现： js实现方式很简单，就不做介绍了；这里我们说下css的实现方式。因padding是根据viewport的width来计算的，于是想到通过设置padding-bottom跟width达成某种比例关系。经尝试有效，代码如下：// banner-box为图片容器，设置其height为0，padding-bottom为60%；便可到达宽/高比为5/3。.banner-box{ width

在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。一、什么是BFCBFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、BFC的特性内部的box会在垂直方向，一个接一个的放置；box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的ma...

原创内容，转载请标明出处浏览器有两种模式标准(严格)模式 怪异(混杂)模式如何判断浏览器当前的模式document.compatMode可判断模式类型：值为”BackCompat” : 怪异模式；值为”CSS1Compat” : 标准模式不同模式下，js可支持的方法不同，如下：怪异模式：浏览器可视宽度是document.body.clien...

方法1： “margin:auto”结合”position:absolute”//css代码：.box1{ width:200px; height:200px; border:solid 1px red; position: relative;}.box1 img{ margin:auto; position:absolute; l...

因移动设备屏幕尺寸不一致，为兼容不同的设备，我们一般用响应式布局。那么问题来了，有这样个需求：一个容器（div），宽度为可视区域的80%，要求其高度等于宽度。通常我的做法，是用js实现：先获取容器的宽度值，然后把该值赋值给容器的高度。 这并没有多大难度，有难度的是知道怎样用css实现该功能。接下来是重点了，不要离开哈，继续往下看。答案很简单：容器的padding 比例值是相对于容器的...

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外链接调用，其中外引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> <style type="t

解决方法一： 为标签添加属性：hideFocus=’true’ hideFocus相当于 onFocus=”this.blur()”。 例：链接内容解决方法二：借助css表达式解决 a{star:expression(this.onFocus=this.blur());outline:none;}

下划线”_” 和星号” * “: IE6识别的hacker；” * ” : IE7遨游识别的hacker；“\9” : “\9”所有IE和FireFox的hacker；“\0” : IE8及IE8+识别的hacker。内置hacker使用示例：.box {color:red\9; } //ie6及IE6+识别此规则.box {color:red\0; } //ie8及I

消除边框我们习惯用border:none，但这对IE6/7来说无效，边框依然存在。那么如何解决IE6下input边框问题呢？用border:0试了下，似乎是有效的。那么border:0与none的区别是什么呢，查阅资料得到如下答案： 性能差异“border:0”：是指border-width:0，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width进行了渲染，即