CSS 使用技巧

1、CSS代码重用，解决同一类样式下相同冲突点

<style>

    .c {

        共有

    }

    .c1 {

        独有

    }

    .c2 {

        独有

    }

</style>

<div class='c c1'></div>

<div class='c c2'></div>

2、自适应 和 改变大小变形
　　- 左右滚动条的出现
　　- 宽度，百分比

(1)自适应 解决方案：

头部加判断

(2)改变大小变形 解决方案：

设定一个div的宽度，再div宽度下载创建div，里面使用百分比，不用因为浏览器大小变化影响。

<body>

    <dev class="pg-header">

            <div style="width: 980px;">

                百分比数据

            </div>

    </dev>

</body>

3、IE打开图片显示：图片外面会有蓝色边框。
解决： 在head头部，添加 style{ border: 0; }
注：img图片默认会有一个1像素的边框，在ie中可以显示出来。通过border: 0；取消边框。

注： 像素px 可以不加。

CSS 使用技巧的更多相关文章

  1. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  2. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  3. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  4. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  5. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  6. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  7. [css 揭秘]：CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  8. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  9. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

随机推荐

  1. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...

  2. eclipse.ini 修改默认编码为 UTF-8

    eclipse.ini 修改默认编码为 UTF-8 打开您的eclipse安装目录,找到eclipse.ini文件 打开eclipse.ini文件,在最下面加入一行代码:-Dfile.encoding ...

  3. php冒泡排序详解笔记

    冒泡 /* * 冒泡排序(从小到大) * 介绍: * 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来. * 思路: * 比较相邻的元素.如果第一个比第二个大,就交换他 ...

  4. 查询SQLSERVER执行过的SQL记录（测试通过）

    仅支持SQL SERVER2008及以上版本 --创建时间 QS.creation_time, --执行文本 ST.text FROM sys.dm_exec_query_stats QS --关键字 ...

  5. 搭建持续集成接口测试平台（jenkins+ant+jmeter）

    一.环境准备: 1.JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.Jmeter:http://jme ...

  6. POJ 3078 - Shuffle'm Up - [模拟题]

    题目链接:http://poj.org/problem?id=3087 Description A common pastime for poker players at a poker table ...

  7. MongoDB $关键字 关系比较符号 $lt $lte $gt $gte $ne

    关系比较符: 小于:$lt 小于或等于:$lte 大于:$gt 大于或等于:$gte 不等于:$ne 属于:$in 查询中常见的 等于 大于 小于 大于等于 小于等于 等于 : 在MongoDB中什么 ...

  8. 【JVM】-NO.112.JVM.2 -【JDK11 HashMap详解-2-tab[i = (n - 1) & hash])剖析】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  9. return ajax 把ajax链式操作 简易封装

    成功就是done,失败就是fail

  10. ts中的类的定义，继承和修饰符

    自己搞一个ts文件 里面写代码如下,试一下就行了 /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": &q ...