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 ...
随机推荐
- jsp 获取服务器ip 以及端口号
<a href=<%="http://"+request.getLocalAddr()+":"+request.getLocalPort()+&qu ...
- Oracle数据库备份/导入工具
expdp和impdp常用于ORACLE数据库的导入导出. expdp导出数据库 1.root用户创建用于impdp/expdp导入导出的目录: # mkdir -p /home/dmpdata # ...
- Statemnet和PerparedStstemnent有哪些区别
Statement 和 PreparedStatement之间的关系和区别. 关系:PreparedStatement继承自Statement,都是接口 区别:PreparedStat ...
- ArcGIS自定义工具箱-自增字段(可以设置初始值和步长)
ArcGIS自定义工具箱-自增字段(可以设置初始值和步长) 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:字段值初始值为设定值(默认为0),每次增加一个步长( ...
- 吴裕雄 python神经网络 水果图片识别(3)
import osimport kerasimport timeimport numpy as npimport tensorflow as tffrom random import shufflef ...
- macbook pro。已经连接上wifi,但是,不能上网的问题
有天,macbook pro关机后,再打开就上不了网了,后面网上看了,说是安装了 lantern出问题,我一想,有次关机lantern是被我强制关掉的.所以再次打开lantern就可以 上网了,然后正 ...
- console.log() 字体颜色
console.log("%c%s", "color: #fff; background: #20B2AA; font-size: 24px;", " ...
- ssh架构之hibernate(二)进阶学习
1.JPA入门 JPA的认识:JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中Java持久层AP ...
- javascript学习笔记(九):DOM操作HTML的各种方法使用
<!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8" ...
- JMeter学习(四)参数化(转载)
转载自 http://www.cnblogs.com/yangxia-test JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现. 参数化:录制脚本中有登录操作,需要输入 ...