HTML&CSS精选笔记_布局与兼容性

布局与兼容性

CSS布局

版心和布局流程

为什么要应用布局？

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”

版心

“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px等





布局流程

1、确定页面的版心。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

单列布局

“单列布局”是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。

两列布局

“两列布局”和“一列布局”类似，只是网页内容被分为了左右两部分，通过这样的分割，打破了统一布局的呆板，让页面看起来更加活跃。

三列布局

对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式

通栏布局

为了网站的美观，网页中的一些模块，例如，头部、导航、焦点图或页面底部等经常需要通栏显示

注意:通栏布局的关键在于在相应模块的外面添加一层div，并且将外层div的宽度设置为100%。

网页模块命名规范

避免使用中文字符命名（例如id=“导航栏”）。

不能以数字开头命名（例如id=“1nav”）。

不能占用关键字（例如id=“h3”）。

用最少的字母达到最容易理解的意义。





驼峰式命名：除了第一个单词外后面的单词首写字母都要大写（例如partOne）。

帕斯卡命名：每一个单词之间用“_”连接（例如content_one）。





头
header

内容
content/container

尾
footer

导航
nav

侧栏
sidebar

栏目
column

左右中
left right center

登录条
loginbar

标志
logo

广告
banner

页面主体
main

浏览器兼容性

CSS Hack

选择器Hack

为什么要调试浏览器的兼容性问题？

由于各浏览器对页面的解析不同，会导致页面在不同浏览器中显示的样式不一致，为了保持页面的统一，经常需要对浏览器进行兼容性问题的调试。

CSS选择器Hack是指通过在CSS选择器的前面，加上一些只有特定浏览器才能识别的Hack前缀，来控制不同的CSS样式。

选择器Hack分为以下几类:





（1）IE6及IE6以下版本识别的选择器Hack

其基本语法如下：

* html 选择器{样式代码}

（2）IE7识别的选择器Hack

其基本语法如下：

*+html 选择器{样式代码}

选择器Hack写法
针对于的浏览器

@media screen\9{body { background: red; }}
只对IE6/7生效

@media \0screen {body { background: red; }}
只对IE8生效

@media \0screen\,screen\9{body { background: blue; }}
只对IE6/7/8有效

@media screen\0 {body { background: green; }}
只对IE8/9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}
只对IE10有效

属性Hack

是指在CSS属性名的前面，加上一些只有特定浏览器才能识别的Hack前缀。





属性Hack分为以下几类:

（1）IE6（含）以下版本识别的属性Hack，其基本语法如下：

 _属性:样式代码;

（2）IE7（含）以下版本识别的属性Hack，其基本语法如下：

+或*属性: 样式代码;







CSS属性Hack（前缀）
针对的浏览器

_color:red;
IE6及其以下的版本

*color:red ;或者 +color:red;
IE7及其以下的版本

CSS属性Hack（后缀）
针对的浏览器

color:red\9;
IE6/IE7/IE8/IE9/IE10版本

color:red\0;
IE8/IE9/IE10版本

color:red\9\0;
IE9/IE10

color:red!important
IE7/IE8/IE9/IE10及其他非IE浏览器

IE条件注释语句

是IE浏览器专有的Hack，针对不同的IE浏览器，书写方法不同

（1）判断浏览器类型的条件注释语句

<!--[if IE]>

只能被 IE 识别;

<![endif]-->

第一行的英文字母“IE”代表浏览器的类型，表示该条件注释语句只能被IE浏览器识别

（2）判断IE版本的条件注释语句

<!--[if IE 7]>

只能被 IE7 识别;

<![endif]-->

第一行的数字代表IE的版本号，表示该注释语句只能被当前IE版本识别。

IE条件注释语句
针对的浏览器版本

<!--[if lt IE 7]>内容<![endif]-->  
  IE7 以下版本

<!--[if lte IE 7]>内容<![endif]-->
IE7及以下版本（包含IE7）

<!--[if gt IE 7]>内容<![endif]-->
IE7 以上版本

<!--[if gte IE 7]>内容<![endif]-->
IE7及以上版本（包含IE7）

<!--[if !IE 7]>内容<![endif]-->
非IE7版本

<!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]-->
非IE浏览器

使用!important解决高度自适应问题

制作网页时，当盒子中的内容超过了盒子的宽高时，在标准浏览器下内容会溢出，但是在IE6中盒子会自适应内容的大小。这是就需要通过!important解决IE6高度自适应问题。



div{

height:auto!important;

height:30px;

min-height:30px;

width:500px;

border:1px solid #000;

font-size:50px;

}

!important用于提升优先级，浏览器会优先执行“height:auto!important;”

常见的IE6兼容性问题

IE6中浮动元素的双倍外边距问题

当对浮动的元素应用左外边距或右外边距（margin-left或margin-right）时，在IE6浏览器中，元素对应的左外边距或右外边距将是所设置值的两倍。

解决方法：为浮动块元素定义“_display:inline;”样式来解决。

IE6不支持透明图像问题

IE6浏览器并不能很好地支持透明图片，如png（24位）、gif等格式的透明图片。





解决方法：借助微软提供的js文件来解决。

IE6中图片底部会有像素间隙问题

解决方法：

1、将<img>标记与</div>标记放在同一行。

2、为<img />定义“display:block;”样式。

IE6中元素最小高度的问题

由于IE6浏览器有默认的最小像素高度，因此它无法识别19px以下的高度值

解决方法：

1、给该盒子指定“overflow:hidden;”样式。

2、给该盒子指定“font-size:0;”样式。

IE6显示多余字符问题

在IE6中，当浮动元素之间加入HTML注释时，会产生多余字符

解决方法：

1、去掉HTML注释。

2、不设置浮动div的宽度。

3、在产生多余字符的那个元素的CSS样式中添加“position:relative;”样式。

IE6中3像素间距Bug

在IE6中，当文本或其他非浮动元素跟在一个浮动元素之后时，文本或其他非浮动元素与浮动元素之间会多出3像素的间距。





解决方法：对盒子运用负外边距的方法来解决。