【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. SecureCRT使用本地公钥 SSH 免密码登录Linux

    其原理与Linux系统之间的SSH通道原理是一样的 下文中如果创建公钥的格式是:标准公钥和VanDyke私钥格式,需要用ssh-keygen -i -f 转换.如果是OpenSSH密钥格式可直接修改文 ...

  2. JAVAWEB 一一 Hibernate(框架)

    实体类关联数据库字段,操作实体类,HQL语句对数据结构CRUD) 引入jar包 配置文件 hibernate.cfg.xml User.hbm.xml <?xml version="1 ...

  3. Structs复习 OGNL

    Dominmodel只有传 User.age 类似的这种Structs才能帮创建对象 Dominmodel User里必须有空的构造方法 OGNL:OBJECT GRAPHIC NAVAGATION ...

  4. C++ VC实现对话框窗口任意分割

    最近写MFC的程序,想在对话框里实现窗口的任意分割.现在网络资料一大抄,找个东西实在麻烦.总算这个很简单,很快就搞定了,写下来做个笔记.    个人认为简单问题最好就是直接贴源代码,一看就明白,说来说 ...

  5. zabbix 邮件报警 监控mysql主从

    1)设置邮件模板及邮件服务器 邮箱密码记得写授权密码 2)配置接受报警的邮箱 3)添加报警触发器 配置邮箱服务器 yum -y install mailx yum -y install sendmai ...

  6. scala 下载

    http://downloads.lightbend.com/scala/2.12.3/scala-2.12.3.tgz http://confluence.jetbrains.com/display ...

  7. Java的学习04

    今天依旧记录一下,学习的东西. import java.io.File; import java.io.IOException; import java.util.Date; /** * 测试File ...

  8. numpy 矩阵变换transpose和swapaxes

    1.transpose 交换 arr = np.random.arange().reshape((,,)) # ** = 则 arr_shape = arr.shape # ,, 则 arr 索引 # ...

  9. 12.13java过关测试

    库存物资管理系统: 1.首先建两个数据表,一个pass用于商品的增删改查,一个passd记录商品的出库与入库信息: 2.建两个实体类,用来传递商品与单据的信息 3.在添加与删除时,填写入库或者出库单据 ...

  10. Spring AOP @Aspect

    spring提供了两个核心功能,一个是IoC(控制反转),另外一个便是Aop(面向切面编程),IoC有助于应用对象之间的解耦,AOP则可以实现横切关注点(如日志.安全.缓存和事务管理)与他们所影响的对 ...