css基础知识整理_css大区块样式添加注释, 小区块适量注释;-CSDN博客

本文链接：https://blog.csdn.net/GaojbSunny/article/details/53343321

浏览器内核

IE的内核是: trident;

Firefox内核是: Gecko;

Chrome内核是: Blink;

Safari内核是: Webkit;

欧朋内核是: Blink;

Css

css层叠样式表

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

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

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

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

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

分类：

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

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

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

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

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

优先级：

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

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中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

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

按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

样式写法: .main_firstnav{…….}

7. css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相应的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：　font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；其他属性包括: list-style(列表样式)　＆　vertical-vlign　＆　cursor　＆　z-index(层叠顺序) 　＆　zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

定义

ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)