CSS基本知识 （布局方式，和模型 样式表 优先级 ）
**
1. 一❀css布局方式:
** 1.默认文档html结构顺序 2.浮动布局float 3.定位布局position：绝对 相对 固定
❀定位布局position
❀绝对定位：position：absolute
1.简言之：以父元素基点，进行定位，会脱离文档流。
2.具体描述： 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
3.注意事项： 当我们使用绝对定位时，必须有两个条件：
(1)、必须给父元素加定位属性，一般建议使用position:relative (2)、给子元素加绝对定位，position:absolute;同时要加方向属性。
❀相对定位：Position:relative
1.简言之：以自身为基点，进行定位，但还占原来空间）
2.具体描述：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
3.注意事项：虽然相对定位也是脱离文档流。但是不能用清除浮动的方法解决那些问题。
❀固定定位：fixed
元素框的表现类似于将 position 设置为 absolute，不过基点是是视窗本身
❀浮动定位float：
1.float取值：right left。 float不具有继承性
2.具体描述：如：对块元素设置浮动属性后，它就脱离了当前的文档流布局的方式，漂浮到他的父级元素的左边或者右边。如果想让多个块显示在同一行中，可以将这些块都设置成浮动，并且浮动方向相同。
3.浮动的缺点：当元素有默认属性，且每个浏览器默认属性值不同，而编写者不清楚具体是多少及多大事，会对父元素（如对父元素的background属性，margin属性有影响）和后面元素产生影响，造成布局错乱。故需使用Clear属性：清除浮动 Clear属性：取值有：left,right,both,none(通常使用both.)
4.清除浮动的3种办法：
1.添加一个附加层，清除浮动。必须设置高度，否则无效。例：#haa{clear:both;height:20px;}
2.给父元素添加overflow：hidden;属性。但是IE6不支持，还需给父元素添加zoom:1属性。
3.利用伪类after的方法 例： .cf:after{content:” “；height:0； display:block； clear:both；line-height:0; Visibility:hidden；} .cf{zoom:1}
/IE6不支持通过clear:both和行高为0的方式清除浮动，需增加zoom:1/
5.使用时：浮动布局的时候，在ie6环境中会出现双倍边距的bug（即元素浮动方向和边距方向一致的时候边距会是原来的两倍。）解决的办法是给元素添加display:inline;属性。
二、 ❀css元素的分类
块元素：
能容纳块和内联等其他元素，重点内容不能与其他元素同行，对于宽高起作用.（即能设宽高，独占一行）
内联元素：
只能容纳文本和内联元素，容许其他内联元素与其同行，宽高对其不起作用。 inline不响应垂直margin,和padding（有但请避免）, width, height, max/min width/height 等属性声明。
提示：对内联元素宽高起作用，请使用display:inline-block
块元素:
block：p,ul,li ,dl,ol,dt,h1~h6,hr,div,pre,table. form , fieldset
内联元素:
inline： a、span、img、input、label、select、strong、textarea br, code, sup, sub；；
主要的结构化块状元素
<ol> 、<ul> 、<dl>、<table>支持结构化的元素
<li>、<dt>、<dd>、<caption>、<thead>、<tbody>、<tfoot>、<colgroup>、<col>终端块状元素
<h1>...<h6>、<p>、<blockquote>、<dt>、<address>、<caption>多目标块状元素
<div>、<li>、<dd>、<td> 、<form>三、❀css应用网页的四种方式:
1、行内样式（内联）2、内嵌样式3、外部链接样式4、导入方式
四、❀选择符：
1、标签选择符2、类选择符 3、id选择符
五、❀Css（层叠样式表）样式的特点：
继承特点：子元素会继承父元素的某些样式。【因为有些子元素本身就有默认值，所有他就不用父元素】但width height float无继承属性。 Display的属性是可以继承的
层叠：子元素如果定义了与父元素相同的样式，会覆盖掉父元素的样式。后面的样式会覆盖前面的样式。
六、❀css样式的优先权：
1应用到页面的4种方式的优先权：行内样式(内联式 内部样式)>内嵌样式（嵌入式）>外部链接样式>@import导入方式。
2选择符的优先权：行内＞id＞class＞标签选择符tag（经测试!important(提升权限)关键字各大浏览器都支持(IE6.0不支持)）
3优先权：就近原则。（先按就近原则，再按优先权） 4作用范围越小，优先权越高。离修饰目标越近，优先权越高。
❀字体 文本属性设置（9个）
font-family:”宋体”; font-size: 12px 50%; font-weight: bold normal ;
Font-style: italic 800 normal ； font-variant: small-caps(小型的大写字母) normal;
letter-spacing 字符间距。 word-spacing:基本不用。 text-align:center left 。 vertical-align: . Sub(下标) uper middle
white-space：文字对象中换行处理。Normal自动换行，pre原样输出 Nowrap:强制换行。 color: red #333; text-indent(首行缩进): 10px 10% inherid; ; 可以是负数 text-decoration: none underline overline(文本上) line-through blink inherid； text-transform （文本的大小）：none uppercase(大写) lowercase capitalize ; direction: rtl ltr
❀背景的属性应用(5个)、
background-repeat:no-repeat， repeat-y;
background-position:center top left right bottom, 20% 30%， 50px 10px(指距离左和上距离) , -34px -34px;(背静图片开始的位置)
background-image:url(‘/images/3.jpg’);
background-color:#ffaa11
background-attachment:fixed scroll inherid; fixed指图像不会随页面的其余部分滚动(使用百分比来在页面上定位背景图像,此项必须设置成fixed。IE6.0只有html和body这两个元素支持这个属性值（fixed）所以这种效果一般不用)
简写：background: #ff0000 url(../i/eg_bg_03.gif) no-repeat 36px 63px scroll;
❀盒子模型：
一个盒子是由以下几个部分构成的1、盒子的内容content，2、盒子的边框border，3、盒子边框与盒子内容的距离padding，4、盒子与盒子之间的距离margin。
盒子低的背景占住content+padding的空间。与border+margin无关。
通常说说的width仅指content的宽度。而盒子的width需要将width+2个padding+2个border+2个marging.
padding：不可为负数。Margin:可为负数。 四种简写方式：margin:10px;上 右 下 左
margin:10px 10px 10px; 上 左右 下； margin:10px 10px; 上下 左右；margin:10px
10px 10px 10px; 上 右 下 左 . IE盒子和W3C盒子的宽高计算方式不同
可通过设计box-szing：border-box content-box来设置
❀常用的命名：
头：header 内容content 尾footer 页面主体main
菜单：menu; 子菜单：submenu; 导航：nav; 子导航：subnav;
栏目column 登陆条：loginbar 侧栏：sidebar 左右中：left right center
热点:hot 新闻:news 下载:download 广告:banner 标志:logo
版权:copyright 友情链接:friendlinks 页面外围控制整体布局宽度：wrapper
居中的三个办法
1. margin-left: auto; margin-right:auto; text-align: center;必须设置text-align，否则在IE中会居左。
2.居中就是要先找到中间的位置，再偏移一定的像素。假设宽度为900，设置如下：left: 50%; margin-left: -450px;
3.采用浏览器宽度调整定位：left:expression_r((body.clientWidth-900)/2);
这个不如第二个办法好。并且在IE中不灵光。如果用jquery的话是可以的。
css中的zoom:1的作用
1、检查页面的标签是否闭合 不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。 快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。
2、样式排除法 有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。
3、模块确认法 有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。
4、检查是否清除浮动 其实有不少的 CSS BUG
问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。
5、检查 IE 下是否触发 haslayout 很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读
蓝色上的转帖 ） 快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。
6、边框背景调试法 故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^ 最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ，生活越来越美好。
CSS hack
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
标签最低高度设置min-height不兼容
因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. /* Clear Fix / .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } / Hide from IE Mac / .clearfix {display:block;} / End hide from IE Mac / / end of clearfix */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
overflow:hidden;作用：1. 清浮动 2当子容器宽高大于父容器时，不会撑开父容器.
❀心得/小技巧:
1.color:指其中内容的颜色，非背景。
2 -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}消除兼容性。
3.cursor: pointer;鼠标放上去 是个小手。
4.❀css-sprite 主要是为了减少http请求。缺点就是：修改不容易。使用方法：background: url(“../images/common_index.png”) no-repeat -22px -364px;图片墙。
5. outline: none;无外轮廓。 Overflow：hidden
6.text-align:center; line-height:父级元素的高度。使其居中
6.5 用了float:Z-index;
7.可以给一个元素应用多个类，类名与类名之间用空格分割。例如：
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
