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. 宣布推出针对 Microsoft OneDrive 和 SharePoint 的 Autodesk AutoCAD 新集成

    在 OneDrive 和 SharePoint,我们的愿景是随时随地为你的团队提供简单而安全的文件访问.无论你的职位.专业或行业是什么,我们将始终致力于扩展和连接你最重视的内容.今天,我们发布了与 A ...

  2. 1.4 flask request和session

    2019-1-4 18:13:57 越努力,越幸运! 还有121天,flask讲完,还有4天,总时长130天 还有13天就讲完了 一月争取看完!!! 永远不要高估自己! 今天学了request和ses ...

  3. JavaScript原型、闭包、继承和原型链等等总结

    参考:http://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B%E9%93%BE/

  4. php跨域发送请求原理以及同步异步问题

    <script async type="text/javascript" src="http://lisi.com/data.php?flag=1"> ...

  5. java学习之路--String类的基本方法

    String类常见的功能 获取 1.1 字符串中包含的字符数,也就是获取字符串的长度:int length(); 1.2 根据位置获取某个位置上的字符:char charAt(int index) 1 ...

  6. vue的组件基础

    组件分为全局组件和局部组件. 组件的核心是template:所有的数据都为template服务. 父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性: 然后子组件能够通过props: ...

  7. php（面向对象的基本介绍）

    面向对象思想介绍 OOP:Object Oriented Program面向对象编程. 面向对象三大特性 封装   继承   多态 类与对象 类:是用于描述“某一些具有共同特征”的物体的概念,是某一类 ...

  8. Linux 下挂载新硬盘方法

    Linux的硬盘识别: 一般使用”fdisk -l”命令可以列出系统中当前连接的硬盘 设备和分区信息.新硬盘没有分区信息,则只显示硬盘大小信息.   1.关闭服务器加上新硬盘   2.启动服务器,以r ...

  9. Eclispe最常用的几个快捷键

    熟练使用快捷键可以在很大程度上提高我们的工作效率,Eclipse的快捷键很多,但是常用的也就那么几个,下面说下Eclispe最常用的几个快捷键: Eclipse的快捷键组合可在Eclipse按下ctr ...

  10. 客户续费模型 逻辑回归 分类器 AdaBoost

    客户续费模型  逻辑回归 分类器  AdaBoost