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. [ICLR'17] DEEPCODER: LEARNING TO WRITE PROGRAMS

    DEEPCODER: LEARNING TO WRITE PROGRAMS Basic Information Authors: Matej Balog, Alexander L. Gaunt, Ma ...

  2. Let's Encrypt泛域名SSL证书申请

    操作系统:CentOS 7 github:https://github.com/Neilpang/acme.sh 有中文说明: https://github.com/Neilpang/acme.sh ...

  3. PHP实现URL长连接转短连接方法总结

    短链接,通俗来说,就是将长的URL 网址,通过程序计算等方式,转换为简短的网址字符串. 这样的话其好处为:1.内容需要:2.用户友好:3.便于管理. 实现短网址(short URL)系统比较流行的算法 ...

  4. react使用mobx

    mobx api 使用装饰器语法 mobx数据转化为js数据 安装 yarn add mobx mobx-react yarn add babel-preset-mobx --dev "pr ...

  5. python API whoami

    import getpass print getpass.getuser() See the documentation of the getpass module. getpass.getuser( ...

  6. Thinkphp路由配置和静态缓存规则【原创】

    ThinkPHP框架对URL有一定的规范,所以如果你希望定制你的URL格式的话,就需要好好了解下内置的路由功能了,它能让你的URL变得更简洁和有文化. 首先我们在Common/config.php设置 ...

  7. LINUX常用命令 --- 权限篇

    linux常用命令 linux用户权限相关 root 用户    相当于群主    超级用户 sudo命令   相当于群管理员 普通用户    群成员 查看用户id信息      使用linux    ...

  8. PAT1111 Online Map【最短路】【dfs】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805358663417856 题意: 给定一个图,每天边上有时间和路 ...

  9. python入门以及接口自动化实践

    一.Python入门必备基础语法# 标识符:python中我们自己命名的都是标识符# 项目名 包名 模块名# 变量名 函数名 类名# 1:字母 下划线 数字组成 命名的时候不能以数字开头# 2:见名知 ...

  10. Markdown编辑工具及命令

    Markdown是一种可以使用普通文本编辑器编辑的标记语言,通过使用简单的编辑,可以使文本具有一定的格式. Typora是一款简介的Markerdown编辑器. 文本编辑语法: 标题: # 一阶标题 ...