谈谈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:;
}
最新文章
- 解决lScrollView嵌套ListView只显示一行的问题,listvie显示全部的item
- Xcode环境配置mysql
- Jira 6.0.3 安装与破解
- C++例题2:汉诺塔问题
- MYSQL注释
- php 编码规范(1)
- protel99_拼板详细图解
- IOS学习之路八(GCD与多线程)
- CentOS 6.8下安装docker并使用
- CodeFirst+MySQL+.Net Core配置详情
- java中如何从一行数据中读取数据
- leetcode python快乐数
- C#工具:CSV文件转换帮助类
- Go语言数组
- openstack-KVM-存储配置
- Linux配置Redis外网访问
- 使用patroni 解决hasura graphql-engine pg 数据库ha的问题
- ffmpeg常用参数一览表
- 使用DDMS中的内存监测工具Heap来优化内存
- Eclipse插件的安装与配置