css
Mr.Z_z
莫听穿林打叶声,何妨吟啸且徐行。
竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。
料峭春风吹酒醒,微冷,山头斜照却相迎。
回首向来萧瑟处,归去,也无风雨也无晴。
展开
-
div layout
mark http://jsfiddle.net/jikeytang/b75z9/2/ div layout Document *{ margin:0; padding:0; } .w{ width:100%; clear:both; overflow:hidden;} .l{ wid原创 2016-06-03 12:42:52 · 1062 阅读 · 0 评论 -
圣杯模型和双飞翼模型浅析(高度)
圣杯和双飞翼都旨在实现三列的布局,中间内容宽度自适应,两边内容宽度固定。 特别注意的是查找了许多资料发现竟然几乎没有资料提到过这两个模型的高度问题,即使是网上给的代码也几乎没有实现高度自适应的问题,也许大家都觉得太简单甚至不值一提,但是我却为此纠结了很久,所以下面我也会提到如何实现高度自适应。 两者的区别我总结为三点: 1、DOM结构不同,相对于圣杯,双飞翼为中间内容单独加了一个容器以便ma...转载 2019-02-28 17:38:13 · 320 阅读 · 0 评论 -
css-布局-圣杯模型布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css-布局-圣杯模型布局</title> <style> * {转载 2019-02-28 15:51:53 · 441 阅读 · 0 评论 -
css-布局-双飞翼模型布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css-布局-双飞翼模型布局</title> <style> * {转载 2019-02-28 15:50:50 · 300 阅读 · 0 评论 -
block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到 该行排满。 大体来说HTML元素各有其自身的布局级别(block元素还是inli...转载 2019-02-28 13:53:10 · 90 阅读 · 0 评论 -
深入理解选择器权重
“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符” 那 么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很多中文版本的css图书中采 用了10进制的简单相加计算方式(包括第一版《CSS权威指南》,第二版中已经纠正)。因此...转载 2019-02-28 13:42:08 · 648 阅读 · 0 评论 -
css中的hack
1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏 览器会先给元素使用width:300px;的样式,紧接着后面还有个_w...转载 2019-02-28 11:40:09 · 292 阅读 · 0 评论 -
CSShack
简 单地讲,css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同,所以会造成一些误差就像JS 一样,一个JS网页特效,在微软IE6、IE7、IE8浏览器有效果,但可能在火狐(Mozilla Firefox)谷歌浏览器无效,这样就叫做JS hack ,所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器......转载 2022-08-26 16:46:00 · 102 阅读 · 0 评论 -
CSS隐藏元素 display visibility opacity的区别
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空间,无法点击 */ } { position...转载 2019-02-28 10:16:39 · 184 阅读 · 0 评论 -
CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1、display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位...转载 2019-02-28 10:08:40 · 528 阅读 · 0 评论 -
::before和::after伪元素的用法
<!DOCTYPE html> <meta charset="utf-8" /> <style type="text/css"> .phoneNumber::before { content:'\260E'; font-size: 15px; } </style> <p class="phoneNumber">1...转载 2019-06-12 18:33:45 · 132 阅读 · 0 评论