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. 八、Sql Server 基础培训《进度8-查询多种写法》（实际操作）

    知识点: 假设学生表.班级表.年级表 学生表(student) 内码 学生姓名 班级内码 001 张三 1002 002 李四 1002 003 王五 1003 004 钱六 1001 班级表(cla ...

  2. LeetCode - 498. Diagonal Traverse

    Given a matrix of M x N elements (M rows, N columns), return all elements of the matrix in diagonal ...

  3. 【原创】我的KM算法详解

    0.二分图 二分图的概念 二分图又称作二部图,是图论中的一种特殊模型. 设G=(V, E)是一个无向图.如果顶点集V可分割为两个互不相交的子集X和Y,并且图中每条边连接的两个顶点一个在X中,另一个在Y ...

  4. TestNG 框架的运用

    TestNG这个测试框架可以很好的和基于Selenium的web自动化测试结合在一起,实现把我们写好的自动化测试用例以自定义顺序执行.下面分为十二步来对TestNG测试框架进行总结,包括环境的部署,从 ...

  5. 利用mimikatz破解远程终端凭据，获取服务器密码

    测试环境:windows 10 道友们应该碰到过管理在本地保存远程终端的凭据,凭据里躺着诱人的胴体(服务器密码),早已让我们的XX饥渴难耐了.但是,胴体却裹了一身道袍(加密),待老衲操起法器将其宽衣解 ...

  6. 下载JDK开发工具包

    实例说明 开发java程序必须有Java开发环境,即jdk开发工具包,这个工具包包含了编译.运行.调试等关键的命令.运行Eclipse.NetBeans等开发工具也需要有jdk或jre的支持. 关键技 ...

  7. 剑指offer——python【第49题】把字符串转换成整数

    题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一 ...

  8. 自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )

    简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm ini ...

  9. 补充：javascript

    写法分类:1.行内(内联)写在标签里面,以属性的形式表现,属性名是事件属性名例如:<button onClick="js代码"></button>2.内嵌写 ...

  10. C#Web从0到1—创建一个web并从VS集成的SQLlocalDB数据库中查询数据

    软件说明: VS2017,腾讯云服务器10元1个月,系统Win2012 R2标准版 第一步:建立第一个网页 建立工程 建好后,可以打开View选项打开项目资源浏览器和工具箱,后文会多次用到这两个版面 ...