css常见问题一
【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常见问题一的更多相关文章
- CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...
- XHTML CSS 常见问题和解决方案
原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...
- CSS 常见问题笔记
CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...
- css常见问题
CSS: 1.垂直居中布局 (1)已知宽高 (2)未知宽高 https://segmentfault.com/q/1010000004073623 2.文字退格 text-indent: 4em; 3 ...
- Html / CSS常见问题 解决方案
解决Safari下input光标过大 input { line-height: normal; } 设置浮层 html, body { /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满 ...
- DIV+CSS常见问题:DIV如何设置一个像素高度?
CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...
- 实战中总结出来的CSS常见问题及解决办法
一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...
- 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% ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- css常见问题汇总
1. 如果我想显示两行文字第二行超出部分‘...’? 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit proper ...
随机推荐
- SecureCRT使用本地公钥 SSH 免密码登录Linux
其原理与Linux系统之间的SSH通道原理是一样的 下文中如果创建公钥的格式是:标准公钥和VanDyke私钥格式,需要用ssh-keygen -i -f 转换.如果是OpenSSH密钥格式可直接修改文 ...
- JAVAWEB 一一 Hibernate(框架)
实体类关联数据库字段,操作实体类,HQL语句对数据结构CRUD) 引入jar包 配置文件 hibernate.cfg.xml User.hbm.xml <?xml version="1 ...
- Structs复习 OGNL
Dominmodel只有传 User.age 类似的这种Structs才能帮创建对象 Dominmodel User里必须有空的构造方法 OGNL:OBJECT GRAPHIC NAVAGATION ...
- C++ VC实现对话框窗口任意分割
最近写MFC的程序,想在对话框里实现窗口的任意分割.现在网络资料一大抄,找个东西实在麻烦.总算这个很简单,很快就搞定了,写下来做个笔记. 个人认为简单问题最好就是直接贴源代码,一看就明白,说来说 ...
- zabbix 邮件报警 监控mysql主从
1)设置邮件模板及邮件服务器 邮箱密码记得写授权密码 2)配置接受报警的邮箱 3)添加报警触发器 配置邮箱服务器 yum -y install mailx yum -y install sendmai ...
- scala 下载
http://downloads.lightbend.com/scala/2.12.3/scala-2.12.3.tgz http://confluence.jetbrains.com/display ...
- Java的学习04
今天依旧记录一下,学习的东西. import java.io.File; import java.io.IOException; import java.util.Date; /** * 测试File ...
- numpy 矩阵变换transpose和swapaxes
1.transpose 交换 arr = np.random.arange().reshape((,,)) # ** = 则 arr_shape = arr.shape # ,, 则 arr 索引 # ...
- 12.13java过关测试
库存物资管理系统: 1.首先建两个数据表,一个pass用于商品的增删改查,一个passd记录商品的出库与入库信息: 2.建两个实体类,用来传递商品与单据的信息 3.在添加与删除时,填写入库或者出库单据 ...
- Spring AOP @Aspect
spring提供了两个核心功能,一个是IoC(控制反转),另外一个便是Aop(面向切面编程),IoC有助于应用对象之间的解耦,AOP则可以实现横切关注点(如日志.安全.缓存和事务管理)与他们所影响的对 ...