【1】禁止换行
.class {word-break:keep-all;white-space:nowrap;}
【2】强制换行
.class{word-break:break-all;}
普通容器中(Div)的用法建议
word-wrap:break-word;
容器中(Div)中的表格的用法建议
table-layout:fixed;word-wrap:break-word;
【3】hank手法
.class {
background:#000;
background:#06f\9;
background:#090\0;
background:#090\0/;
*background:#f60;
_background:#f00;
}

【4】透明图层
.class {
background: rgba(255, 132, 0, 0.8) !important;
background: #ff8400; filter: alpha(opacity=80);
}

【5】渐变色兼容
1 第一种渐变
.class {
background:#7d7d7d;
background:linear-gradient(to bottom, #7d7d7d, #191919);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7d7d7d,endColorstr=#191919,grandientType=1);
background: -ms-linear-gradient(top, #7d7d7d, #191919);
background:-moz-linear-gradient(top,#7d7d7d,#191919);

background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#7d7d7d), to(#191919));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7d7d7d), to(#191919));
background: -webkit-linear-gradient(top, #7d7d7d, #191919);
background: -o-linear-gradient(top, #7d7d7d, #191919);
}

第二种渐变
.class {
background: #d53727;
background: -moz-linear-gradient(top, #d53727 0%, #d53727 50%, #c51f14 51%, #c51f14 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d53727), color-stop(50%,#d53727), color-stop(51%,#c51f14), color-stop(100%,#c51f14));
background: -webkit-linear-gradient(top, #d53727 0%,#d53727 50%,#c51f14 51%,#c51f14 100%);

background: -o-linear-gradient(top, #d53727 0%,#d53727 50%,#c51f14 51%,#c51f14 100%);
background: -ms-linear-gradient(top, #d53727 0%,#d53727 50%,#c51f14 51%,#c51f14 100%);
background: linear-gradient(to bottom, #d53727 0%,#d53727 50%,#c51f14 51%,#c51f14 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d53727', endColorstr='#c51f14',GradientType=0 );
}
【6】如何让谷歌浏览

p{font-size:10px;-webkit-transform:scale(0.8);}

【7】苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

input[type="text"],input[type="password"]{-webkit-appearance: none;border-radius: 0;}
input[type="submit"],input[type="reset"],input[type="button"],button{ -webkit-appearance: none;}

【8】dreamweaver 删除多余空白(√使用正则表达式)
((\r\n)\s*\r\n){1,}
$2

【9】CSS3的calc()使用 calc不明白的打开:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
calc()的运算规则
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没
.elm {

-moz-calc(expression);

-webkit-calc(expression);

calc();
}
【10】 transition 与 transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:rotate(0deg) scale(1.1); 意思:以自己为中心放大1.1倍
transition参考文章http://www.w3cplus.com/content/css3-transition
transition:all 0.3s ease 0s;
【11】a 链接到同一个页面的不同位置
<a href="#C4">查看 Chapter 4。</a>
<h2><a name="C4">Chapter 4</a></h2>

css常见问题一的更多相关文章

  1. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  2. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  3. CSS 常见问题笔记

    CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...

  4. css常见问题

    CSS: 1.垂直居中布局 (1)已知宽高 (2)未知宽高 https://segmentfault.com/q/1010000004073623 2.文字退格 text-indent: 4em; 3 ...

  5. Html / CSS常见问题 解决方案

    解决Safari下input光标过大 input { line-height: normal; } 设置浮层 html, body { /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满 ...

  6. DIV+CSS常见问题:DIV如何设置一个像素高度?

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

  7. 实战中总结出来的CSS常见问题及解决办法

    一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...

  8. DIV+CSS 常见问题及解决办法整理

    http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5% ...

  9. 分针网—IT教育: Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  10. css常见问题汇总

    1. 如果我想显示两行文字第二行超出部分‘...’? 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit proper ...

随机推荐

  1. 如何创建Servlet

    //Servlet的生命周期:从Servlet被创建到Servlet被销毁的过程 //一次创建,到处服务 //一个Servlet只会有一个对象,服务所有的请求 /* * 1.实例化(使用构造方法创建对 ...

  2. ionic框架

    ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 An ...

  3. WilliamChart各种图表效果实现大全《IT蓝豹》

    WilliamChart各种图表效果实现大全,有水平线条表格,有柱状表格等.由LineFragment,BarFragment,StackedFragment,SandboxFragment几个fra ...

  4. Promise 学习

    参考 https://www.jianshu.com/p/43f948051d65 // Promise里面传入一个函数类型的参数,这个函数类型的参数接收两个参数resolve reject var ...

  5. is 和 as 运算符

    is和as运算符:is是判断是否是某个类型,返回true或falseo as Ren: 如果转换成功了,没问题:as 是用来转换如果没转换成功,不会报出错误,而是返回一个null值 例 实例化一个集合 ...

  6. java开始的笔记

    这几天第一写java的代码有些东西不是很明白: java的输入跟c/c++有点不一样,他的输入都是要首先创建每一个变量的内存,并且输入的类型不同. 就像string的那样. Scanner s=new ...

  7. soft selective sweeps 下的群体进化

    1.Hard and soft selective sweeps 长期以来,快速适应主要与选择作用于高度多基因的数量性状有关,例如在育种试验期间.这些性状可以通过对大量已经存在的多态性的群体频率的微小 ...

  8. 安装三代组装canu、smartdenovo、wtdbg及矫正软件Racon、Nanopolish的安装

    1)三代组装软件 ------------------------------------------------------------------canu--------------------- ...

  9. SpringBoot 热启动

    在开发过程中,当写完一个功能我们需要运行应用程序测试,可能这个小功能中存在多个小bug,我们需要改正后重启服务器,这无形之中拖慢了开发的速度增加了开发时间,SpringBoot提供了spring-bo ...

  10. maven命令的简单理解

    mvn clean //在target文件夹中的一切都将被删除 mvn compile //编译源代码 mvn test  //运行应用程序中的单元测试 mvn package  //把jar打到本项 ...