谈谈CSS中一些比较"偏门"的小知识
前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!
1.常见的浏览器内核:
以IE为代表:IE,MaxThon,TT,the World,360,搜狗浏览器等-----Trident内核[又称MSHTML]
Firefox,Netscape 6及以上版本,seaMonkey等-----Gecko内核
Opera7及以上----- Opera内核原为:Presto,现为:Blink;
Webkit内核:Safari,Chrome等。----- Chrome的:Blink(WebKit的分支)
2.对浏览器内核的理解:
分为两部分:渲染引擎(layout engineer或rendering engineer)+JS引擎.
渲染引擎:取得网页的内容(html,xml,图片等),整理信息(如加入css),以及网页的显示方式,并输出到显示器或打印机;
JS引擎:解析和执行JS代码实现网页动态效果。
ps:最开始时渲染引擎和JS引擎没有特别的区分开来,发展到现在,JS引擎越来越独立。故一般说内核指的就是渲染引擎。
3.页面导入样式,@import和link的区别:
当然,我们现在一般引入css文件用的是link。(推荐)
- link属于XHTML标签,除了能引入CSS,还能定义RSS,定义rel连接属性;而@import是css提供的,只能用于引入CSS文件;
- @import是css 2.1提出的,故而存在兼容性问题;而link是XHTML标签,不存在兼容性问题;
- @import引用的CSS会在页面加载完成后才执行;而link是与页面加载同时进行。
link用法:
<link rel="stylesheet" type="text/css" href="2.css">
@import用法:
<style type="text/css">@import url('2.css');</style>
4.CSS链接:
a{color:gold;}
a:link {color:blue;} /* 未访问链接*/
a:visited {color:red;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
顺序规则:
- a:hover必须在a:link和a:visited后面;
- a:active必须在a;hover后面
可记为love,hate(link,visited,hover,active)
善用a{color:gold;}
5.CSS优先级:
- 就近原则,同权重情况下,样式定义最近者为准;(三种方法引入css:内联<style="color:red">,内部<style>......</style>,外部引用<link>)
- 载入样式以最后定义的为准(会产生覆盖)。
优先级为:
!important>id>class>tag;important比内联优先级高。
<form style="color: red !important;color:blue">
<label for="name">点击这里,鼠标光标焦点转至输入框中</label>
<input type="text" name="name" id="name">
</form>
如果color:red后面没加!important的话,color:blue就会覆盖前面的color:red。最终效果是红色字体显示“点击这里,鼠标光标焦点转至输入框中”。
6.盒子模型:
W3C盒子模型;低版本IE盒子模型
盒模型:内容(content),内边距/填充(padding),边框(border),外边距(margin)
区别:IE的盒模型content将padding和border算进去了。
7.display属性
/*该元素不被显示*/
display: none;
/*块元素显示*/
display: block;
/*内联元素显示*/
display: inline;
/*块元素显示,但内容像内联元素显示*/
display: inline-block;
/*块级表格显示,有换行*/
display: table;
/*内联表格显示,无换行*/
display: inline-table;
/*继承父元素的display属性*/
display: inherit;
/*作为列表显示*/
display: list-item;
/*根据上下文显示为块元素或内联元素*/
display: run-in;
原先真是轻视了display属性,经常用到的也就其中四五个,谁知道它的属性竟有20个左右。更多点击此处
- display:none;隐藏元素,但没有占据空间,也就是说不会影响布局;
- visibility: hidden;也是隐藏元素,但是原先的空间还是被占据着,会影响布局。
关于display:inline-block;可点击此处查看
8.CSS选择器:
- id选择器(#test)
- 类选择器(.test)
- 标签选择器(h1,p,div)
- 相邻兄弟选择器(div+p)
- 子选择器(ul > li)
- 后代选择器(ul li)
- 通配选择器(*)
- 属性选择器(a[href="www.a.com"])
- 伪类选择器(a:hover,ul:nth-child,ul:first-child)
可继承的样式:font-size,font-family,color,ul,li等
不可继承的样式:border,margin,padding,width,height
9.CSS权重
标签或者伪元素权重:1;class/伪类权重:10;id选择器:100;行内样式:1000
/*权重为:100+10+10=120*/
#test .test a:hover{}
/*权重为:10+1+1=12*/
.test p a{}
ps:如果权重相同,那么会后面定义的样式会覆盖前面的,尽量避免这种情况。
10.初始化CSS样式
原因:浏览器兼容问题,有些标签的默认值在不同浏览器下是不同的
缺点:对SEO有一定影响
*{padding: 0;margin:0;}:这是很常见的一种写法,强烈不建议(主流大网站基本都不会采用这种写法,甚至在它们内部代码规范中禁止这种写法)
下面是淘宝样式初始化代码:
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,
ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin:;
padding:;
} body,button,input,select,textarea {
font: 12px/1.5tahoma, arial, \5b8b\4f53;
} h1,h2,h3,h4,h5,h6 {
font-size: 100%;
} address,cite,dfn,em,var {
font-style: normal;
} code,kbd,pre,samp {
font-family: couriernew, courier, monospace;
} small {
font-size: 12px;
} ul,ol {
list-style: none;
} a {
text-decoration: none;
} a:hover {
text-decoration: underline;
} sup {
vertical-align: text-top;
} sub {
vertical-align: text-bottom;
} legend {
color: #000;
} fieldset,img {
border:;
} button,input,select,textarea {
font-size: 100%;
} table {
border-collapse: collapse;
border-spacing:;
}
谈谈CSS中一些比较"偏门"的小知识的更多相关文章
- 谈谈html中一些比较"偏门"的知识(map&area;iframe;label)
说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...
- 谈谈css中的before和after
css中的伪元素before和after,其实有很多小的妙用. 一.基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容. <p> ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- CSS中zoom:1的作用 ,小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- CSS中cursor属性给标签加上小手形状
HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...
- javascript中的一些偏门知识
undefined能够被重写 undefined = "now it's defined"; alert( undefined ); 浏览器测试结果: 浏览器 测试结果 结论 ie ...
- Verilog中关于wire使用的一些小知识
1.Verilog中如果wire连接到常量,而常量没有说明他的位宽,那么将会默认为32位 如: input [:] x ; wire [:] a; assign a = + x; 上述代码在综合的时候 ...
- css样式图片、渐变、相关小知识
一,background-position:(图片定位) 三种写法: 1):按%比,左上角最小(0%,0%),右下角最大(100%,%100): 2):(x,y)左上角最小(0,0),右下角最大(ma ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
随机推荐
- 【数据库】Invalid default value for 'create_date' timestamp field
问题 最近遇到一个这样的问题,新建数据库表的时候 提示 错误如下 Invalid default value for 'created_time' timestamp field 语句如下 `crea ...
- 转:servlet的url-pattern匹配规则详细描述
原文地址:servlet的url-pattern匹配规则详细描述 原文写的很详细 另外可以参考一下:Web.xml中设置Servlet和Filter时的url-pattern匹配规则 一.概述 在 ...
- DATAPUMP进程查询
SELECT * FROM DBA_DATAPUMP_SESSIONS; SELECT * FROM DBA_DATAPUMP_JOBS; 例如: SYS@orclasm > SELECT * ...
- 20165336 2017-2018-2 《Java程序设计》第4周学习总结
20165336 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 第五章 使用extends来定义一个子类. Object类是所有类的祖先类. 当子类和父类不 ...
- 【PyQt5-Qt Designer】在GUI中使用pyqtgraph绘图库
pyqtgraph绘图库 1.1 简介: pyqtgraph是Python平台上一种功能强大的2D/3D绘图库,相对于matplotlib库,由于内部实现方式上,使用了高速计算的numpy信号处理库以 ...
- gpg签名用法
– 在CentOS 6上生成公钥/私钥对 [root@localhost ~]# gpg --gen-key gpg (GnuPG) ; Copyright (C) Free Software Fou ...
- Why does the memory usage increase when I redeploy a web application?
That is because your web application has a memory leak. A common issue are "PermGen" memor ...
- Docker 镜像(五)
我们都知道,操作系统分为内核和用户空间.对于 Linux 而言,内核启动后,会挂载 root 文件系统为其提供用户空间支持.而 Docker 镜像(Image),就相当于是一个 root 文件系统.比 ...
- 【Mock】【接口测试】【面试】mock-server 环境搭建—加分项!
mock-server 环境搭建 前言 mock 除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的需要服务端提供 API 接口 此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发 ...
- npm 安装包报错 rollbackFailedOptional
npm config rm proxynpm config rm https-proxy 然后使用npm install -g cnpm --registry=https://registry.npm ...