css高级应用及问题记录(持续更新)
css 参考手册:
1、混合选择器样式定义:
.button.icon:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 12px;
height: 12px;
margin: 0 0.75em 0 -0.25em;
background: url(gh-icons.png) 0 -288px no-repeat;
}
这个样式定义的意思:
含有“.button”和“.icon”class属性的元素前加入一个伪类 (.button.icon:before 可以这样理解:第一个class选出了含有“.button”的元素,第二个class又选出了且含有“.icon”的元素)
如:<button class="button icon"> 提交 </button>
效果:
以上纯是自己理解,没有找到相关参考资料,如有不妥处,请指正!
jquery的选择器附属说明:
id选择器,如果id包含“.”(如: id="button.displayarea")直接使用id选择器(如:$("#button.displayarea") )是无法选中的,
因为该选择器已经被解释为:选择id为“button”且class为“displayarea”的元素;
正确写法:$("#button\.displayarea"),即“.”需要转移。
2、css文件定义,样式覆盖问题:
在css文件中这样定义时,无法起到很好的覆盖作用:
/* 所有button通用样式*/
.app_operations button{
border: 0px solid #dcdcdc;
padding: 0px;
background: url(img/button.gif) no-repeat;
}
/* button的个性化样式 */
.app_btn_more {
width: 38px;
height: 16px;
margin-right: -15px;
background: url(img/more.gif) no-repeat;
}
以下方式定义才能起到很好的覆盖作用:
.app_operations button{
... ...
}
/* button的个性化样式 */
.app_operations .app_btn_more {
... ...
}
3、span a 等这些行级元素宽高设置:
这些行级元素(相反的是块级元素:div...),有时设置宽高无效;
处理方法:display:inline-block;(不设置为block,还是想保留行级元素效果),因为块级元素才有宽高设置(鄙人是这么理解的)
4、块级元素变内联元素问题
(主要场景:文字前加操作图标)
遇到div设置display:inline-block,ie8以下版本显示异常,仍换行显示;设置display:inline,ie8以上又不能显示,头大;
后来无奈改用内联元素设置display:inline-block。
5、css样式写在jsp(或php等)
如“import-csshead.jsp”中:
//**设置字体颜色
body{
color:<%=request.getAttribute("color")%>;
}
如此可以从后台中来设置样式,亦可以扩展成配合界面来动态配置样式(或主题)
6、css中引用变量
/*声明变量*/@nice-blue: #5B83AD;
说明:
1、以@开头
2、:前面@后面是变量名,只能以字母开头,可以中间包含数字,或以数字结尾,中间可以有_下划线,不能用下划线结尾
3、:冒号后面;分号前面是变量值
/*加变量*/
@light-blue: @nice-blue + #111;
说明:
可以加法运算,需要谨遵格式“变量=变量+值”
/*乘变量*/
@light-blue: @nice-blue * #111;
说明:
可以乘法运算,需要谨遵格式“变量=变量*值”
7、css文件引入css文件
引入方式:在一个CSS文件利用@import url('其他的CSS文件'),想引入几个CSS文件就用几个@import url
eg:首页需要两个CSS文件index.css和common.css,就在index.css的首行写入(两个CSS文件在同一个目录下)
@import url('common.css');
这样只需要在首页链接一个index.css文件就可以了。
8、css定义的样式和style样式
我们都知道style样式是最高级别的,有时候一些顽疾可以通过style强行控制,但是在项目中突然遇到一个奇葩问题:页面嵌套,style样式有时候会失效(比如使用load方式--我用的是加载html片段方式,我的理解是:load和主页面有时间差,主页面已经加载完成了,load未必已经加载完成,导致load的部分未能渲染);
但如果我们该用class方式时,样式有能回归正常(我猜想,莫非class是动态渲染?原理希望有大神能告知我)
实例:
// ****************************************************************************
<table>
<tr>
<td style="width: 150px;">标题</td>
<td> <input value="12345678"/> </td>
</tr>
</table>
这个代码片段被加载后样式不生效;
// ****************************************************************************
<table>
<tr>
<td class="td_left">标题</td>
<td> <input value="12345678"/> </td>
</tr>
</table>
<style>
.td_left{
width: 170px;
min-width: 150px;
text-align: right;
}
</style>
这种方法的代码片段被加载后生效。
// ****************************************************************************
9、css之style中调皮的‘px’
(a):<div style="width:200px;height:;">123</div>
这段代码在ie浏览器中,你将无法看到该元素,chrome和firefox等正常;
(b):<div style="width:200px;height:423px;">123</div>
加上‘px’后,在ie浏览器中能正常显示;
总结: TNND,ie能不能愉快玩耍了。
10、table样式精简整理
1、粗简版
<style>
.app_style {
color: #666666;
font-size: 12px;
text-align: center;
font-family: Microsoft YaHei,Verdana, Arial, Helvetica, sans-serif;
border-collapse:collapse;
}
.app_style td {
min-height: 30px;
padding-left: 5px;
vertical-align: middle;
border: 0px dotted silver;
border-bottom-width: 1px;
}
.app_style .table-td-left{
width: 150px;
max-width: 150px;
padding-right: 10px;
font-weight: 700;
text-align: right;
}
.app_style .table-td-right{
padding-left: 5px;
text-align: left;
}
</style>
<table class="app_style" style="width: 400px;">
<tr>
<td class="table-td-left">小标题:</td>
<td class="table-td-right">二月春光初乍现</td>
</tr>
<tr>
<td class="table-td-left">基本描述:</td>
<td class="table-td-right">龙女八戒共缠绵</td>
</tr>
<tr>
<td class="table-td-left">忧伤的感慨:</td>
<td class="table-td-right">天理何在</td>
</tr>
</table>
2、js精炼版
<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-style: solid;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: dotted;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: dotted;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr>
<tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr>
<tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr>
<tr> <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> </tr>
<tr> <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> </tr>
<tr> <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> </tr>
</table>
<!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
11、文字两端对齐
.textAlign{
text-align:justify;
text-justify:distribute-all-lines;
text-align-last:justify;
}
12、多个表格,列数相同时对齐
最理想的处理方式,宽度都设置成百分比,算法实现:
$("table>tbody>tr").each(function(){
var tds = $(this).find("td");
var total = 0;
tds.each(function(){/*统计一行td数,合并的td拆开计算*/
var td = $(this);
if(td.attr("colspan") && (td.attr("colspan")-0>0) ){
total += td.attr("colspan")-0;
}else{
total++;
}
});
var avg = Math.round(total/2);
var avgWidth = Math.round((100-10*avg)/avg);
tds.each(function(){
var td = $(this);
if(td.find("div,input,select,textarea,button") && td.find("div,input,select,textarea,button").size()>0){if(td.attr("colspan") && (td.attr("colspan")-0>0) ){
td.css({width:avgWidth*(td.attr("colspan")-0)+"%"});/*偶数跨列跨度*/
}else{
td.css({width:avgWidth+"%"});/*偶数宽度*/
}
}else{
td.css({width:"10%"});/*奇数宽度*/
}
});
});
css高级应用及问题记录(持续更新)的更多相关文章
- C#技巧记录——持续更新
作为一名非主修C#的程序员,在此记录下学习与工作中C#的有用内容,持续更新 对类型进行约束,class指定了类型必须是引用类型,new()指定了类型必须具有一个无参的构造函数 where T : cl ...
- C# 知识点记录(持续更新中)
从看C#入门经典开始系统的学习C#,本文主要记录学习过程中的一些知识点,也是我博客生涯的开始,比较重要成体系的部分会单重新写文章整理归纳. 1.一字不变的字符串 @字符 使转义序列不被处理,按照原样输 ...
- DP刷题记录(持续更新)
DP刷题记录 (本文例题目前大多数都选自算法竞赛进阶指南) TYVJ1071 求两个序列的最长公共上升子序列 设\(f_{i,j}\)表示a中的\(1-i\)与b中色\(1-j\)匹配时所能构成的以\ ...
- ubuntu使用问题与解决记录[持续更新]
1. 添加到计划任务 为脚本增加可执行权限 sudo chmod +x yeelink.sh 将脚本加入cronjob(计划任务) sudo crontab -e 在cornjob文件中添加下面一行, ...
- CSS知识总结之浏览器(持续更新)
web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...
- mysql数据库操作记录持续更新...
1.查看删除数据库表的唯一约束 SHOW INDEX FROM tbl_name (唯一约束也是索引) ALTER TABLE tbl_name DROP INDEX index_name 2.u ...
- html5 经验记录 持续更新
1 关于page cache 由于移动端浏览器webkit基本都实现了page cache(火狐叫做back-forwoad cache);所以回退操作基本不会触发onload操作了,不过上一页的状态 ...
- oracle 常用操作记录--持续更新...
一.oracle grant 授权语句(转自:https://www.cnblogs.com/yt954437595/p/6488819.html) --select * from dba_users ...
- 满血复活前的记录(持续更新ing)
时隔一年重新开启算法竞赛征程. 该记录大多为老课件.已经做过的习题重做和已经看过的书本重看 7.21 下午到山大 娄晨耀basic_algorithm课件中的内容: 复习线性筛原理 复习差分 做完Co ...
随机推荐
- 页面可见生Page Visibility
Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...
- 删除注释云平台JS,加快DISCUZ访问
对于港台或者美国服务器的用户可能感觉访问慢,页面卡:实际上是由于 http://www.discuzlab.com/discuz.gtimg.cn/cloud/scripts/discuz_tip ...
- c++中resize函数怎么用
resize(),设置大小(size);reserve(),设置容量(capacity);size()是分配容器的内存大小,而capacity()只是设置容器容量大小,但并没有真正分配内存.打个比方: ...
- SQL Server 索引(index) 和 视图(view) 的简单介绍和操作
--索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...
- python模块学习心得
初始模块 1.什么是模块 模块是用来实现某项功能的一大堆代码,为什么会有模块呢?过程式编程的时候为了减少程序员编程代码的重复性,就利用函数的调用减少了代码的重复性,但是某些时候程序会过于的庞大,我们会 ...
- 传输层(2)-TCP连接的建立和终止、TIME_WAIT状态
1.TCP连接的建立和终止 1)三路握手 客户端发送一个SYN(同步)分解,告诉服务器客户将在连接中发送的数据的初始序列号. 服务器发送确认客户的SYN(ACK),同时自己也得发送一个SYN分节,它含 ...
- 经典的Hello World VFP前端调后端C# Webservice
1.按我设想的三层架构中,VFP是完全可以做为前端UI的,我们可以划分如下三层结构: 图片:三层架构图.jpg[设为封面] [删除] 其实大家看图,都明白大致意思,但是要明白各层数据是怎么流动的,却要 ...
- LoadRunner --HTML/URL录制方式的选择规则
- Python第一模块
一.Python简介 二.Python种类 三.Python环境 windows: 1.需要配置环境变量 2.更新:卸载重装 linux:1.常用命令: 查看默认Python版本 Python -V ...
- perl中常见的语法规则和函数
数值比较操作符 字符串 相等 == eq 不等 != ...