0
点赞
收藏
分享

微信扫一扫

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像素的间距。




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



举报

相关推荐

0 条评论