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 ...
随机推荐
- 如何创建Servlet
//Servlet的生命周期:从Servlet被创建到Servlet被销毁的过程 //一次创建,到处服务 //一个Servlet只会有一个对象,服务所有的请求 /* * 1.实例化(使用构造方法创建对 ...
- ionic框架
ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 An ...
- WilliamChart各种图表效果实现大全《IT蓝豹》
WilliamChart各种图表效果实现大全,有水平线条表格,有柱状表格等.由LineFragment,BarFragment,StackedFragment,SandboxFragment几个fra ...
- Promise 学习
参考 https://www.jianshu.com/p/43f948051d65 // Promise里面传入一个函数类型的参数,这个函数类型的参数接收两个参数resolve reject var ...
- is 和 as 运算符
is和as运算符:is是判断是否是某个类型,返回true或falseo as Ren: 如果转换成功了,没问题:as 是用来转换如果没转换成功,不会报出错误,而是返回一个null值 例 实例化一个集合 ...
- java开始的笔记
这几天第一写java的代码有些东西不是很明白: java的输入跟c/c++有点不一样,他的输入都是要首先创建每一个变量的内存,并且输入的类型不同. 就像string的那样. Scanner s=new ...
- soft selective sweeps 下的群体进化
1.Hard and soft selective sweeps 长期以来,快速适应主要与选择作用于高度多基因的数量性状有关,例如在育种试验期间.这些性状可以通过对大量已经存在的多态性的群体频率的微小 ...
- 安装三代组装canu、smartdenovo、wtdbg及矫正软件Racon、Nanopolish的安装
1)三代组装软件 ------------------------------------------------------------------canu--------------------- ...
- SpringBoot 热启动
在开发过程中,当写完一个功能我们需要运行应用程序测试,可能这个小功能中存在多个小bug,我们需要改正后重启服务器,这无形之中拖慢了开发的速度增加了开发时间,SpringBoot提供了spring-bo ...
- maven命令的简单理解
mvn clean //在target文件夹中的一切都将被删除 mvn compile //编译源代码 mvn test //运行应用程序中的单元测试 mvn package //把jar打到本项 ...