css基础知识整理

浏览器内核

 

IE的内核是:  trident;

Firefox内核是: Gecko;

Chrome内核是: Blink;

Safari内核是: Webkit;

欧朋内核是: Blink;

 

 

Css

 

css层叠样式表

书写位置： 行内式 内嵌式 外链式

内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。

外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。

行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。  

选择器  写法：选择器｛属性：值；属性：值；．．．｝；

分类：

基础选择器：标签选择器　类选择器　id选择器 通配符选择器

复合选择器：交集选择器 并集选择器  后代选择器  子代选择器

 

标签分类:    块级元素   行内元素    行内式

互相转化  display ：block/inline-block /inline

注意：可以继承的属性：行高

优先级：

默认样式<标签选择器<类选择器选择器<行内样式

0         1          10     100      1000      1000以上

注意： 继承的权重为0 权重会叠加

行高：基线与基线d距离

不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

内边距撑大盒子的问题

影响盒子宽度的因素，内边距影响盒子的宽度，边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

垂直方向外边距合并  两个盒子垂直一个设置下外边距，一个设置上外边距，取的设置较大的值。

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框

           2给父盒子overflow:hidden;   bfc   格式化上下文

文档流： 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

浮动布局：float:  left   |   right （元素浮动之后不占据原来的位置（脱标），浮动的盒子在一行上显示。）

清除浮动   当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

◆清除浮动不是不用浮动，清除浮动产生的不利影响。

◆清除浮动的方法clear: left  |  right  | both  工作里用的最多的是clear:both;

 

定位：定位方向: left  | right  | top  | bottom

◆position:static;  静态定位。默认值，就是文档流。

◆绝对定位 Position:absolute;  元素使用绝对定位之后不占据原来的位置（脱标）

◆相对定位 Position: relative; 子绝父相（父元素相对定位，子元素绝对定位）

◆固定定位Position:fixed 固定定位之后，不占据原来的位置（脱标）

片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

Css可见性

overflow:hidden;   溢出隐藏    

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

Display:block;     元素可见

Display:none  和display:block  常配合js使用。

精灵图：css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

sprites优势：
若干小图标拼合成一张图后布局，减少http iis请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。

sprites缺点
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况。

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码”mainnav”>

中加入新的div元素,

按a命名法则: ”mainnav”>”firstnav”>…

,

样式写法:  #mainnav  .firstnav{…….}

按b命名法则: ”mainnav”>”main_firstnav”>…