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. 一、K3 WISE 实施顾问教程《进度1-谈谈实施顾问》

    1.为什么要开这门课? 从自身的原因说起,在我从开发顾问转岗做实施顾问.售后服务顾问时,我就定下了我做顾问的目标. 第一个核心目标,帮助成千上万的企业客户促进他们商业的成功!第二个目标,成为最顶级的顾 ...

  2. vb编程中的选择结构语句的写法

    1996年,Bohra和Jacopin提出了结构化算法的3中种基本结构:顺序结构.选择结构和循环结构 目前已经得到证明,无论多么复杂的程序,都是由上面的3种基本结构中的一种或者多种的组合构成 在此笔者 ...

  3. layui---表单验证

    使用layui,使用它的表单验证也是比不可少的,下面就来总结下: <!-- 不用form 用div也可以 --> <form class="layui-form" ...

  4. python 接口自动化测试（四）cookie&session

    掌握了前面几节的的内容,就可以做一些简单的http协议接口的请求发送了,但是这些还不够.HTTP协议是一个无状态的应用层协议,也就是说前后两次请求是没有任何关系的,那如果我们测试的接口之前有相互依赖关 ...

  5. 关于 systemctl --user status 报错的问题

    关于 systemctl --user enable mpd 报错: Failed to connect to bus: No such file or directory 因为arch脚本中,sys ...

  6. js获取谷歌浏览器版本 和 js分辨不同浏览器

    // 获取谷歌版本 function getChromeVersion() { var arr = navigator.userAgent.split(' '); var chromeVersion ...

  7. Unity 为队伍设置不同颜色的shader

    在魔兽争霸等一些游戏中,我们通过模型的颜色就能很轻松的区分队伍,如下:   实现的方法有很多,比如: 1,为不同队伍各出一张不同颜色的贴图(Hmmm,war3有的地图可以容纳12只队伍,美术大大们会很 ...

  8. vue中子传父，父传子的具体用法

    先说明下父组件Login,子组件signCon 子拿到父数据可以通过,在子组件里面设置props:['name']的方法拿到. 首先在父组件中定义数据了: data(){Englishname:'li ...

  9. php(数组方法

    什么是数组? 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 ...

  10. ELK之elasticsearch导致CPU居高不下系统慢解决办法

    参考:http://zoufeng.net/2018/07/16/cpu-of-elasticsearch-high-search-slow/ elasticsearch主机CPU居高不下100%左右 ...