CSS布局和兼容

最新推荐文章于 2024-08-26 10:26:24 发布

会撸串的傻狍子

最新推荐文章于 2024-08-26 10:26:24 发布

阅读量304

点赞数 1

分类专栏： CSS2 文章标签： css

本文链接：https://blog.csdn.net/L990614/article/details/108517342

版权

CSS2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了CSS布局流程，包括确定版心、页面结构分析以及常见的网页布局如表格布局、浮动布局等。同时，文章详细阐述了浏览器兼容性问题的产生，列举了解决图片间隙、透明度、圆角、CSS Hack等问题的方法，旨在帮助开发者更好地处理CSS在不同浏览器中的显示差异。

摘要由CSDN通过智能技术生成

布局和兼容

版心和布局流程通栏

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

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

一、布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面结构。（从上往下------>每行划分)

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

目录说明：

要实现结构和样式相分离的设计思想，根目录下有这4个文件（目录）。

名称	说明
css	用于存放css文件
images	用于存放图片
index	首页html
js	用于后期存放javascript文件

二、常见的网页布局分类

1、表格布局

优点：

（1）表格布局，使得结构位置更简单；
（2）对于学习初期，table更容易理解；
（3）数据化的存放更合理；

缺点：

（1）标签结构多，复杂，影响网站性能；
（2）不利于搜素引擎抓取信息，影响网站的排名；
（3）table一旦设计完成很难通过css让他展现新的面貌

2、DIV+CSS布局

网页HTML代码主要使用DIV将内容模块化，用CSS控制其显示效果。

浮动布局：是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，可以实现一行显示多个div的功能。

在div+css布局之前采用的是table表格的布局方式。由于table表格布局有不足和缺点，后来慢慢就采用了div+css布局的方式。

**优点：**web的三大标准；结构（html），样式(css)和行为(js)

（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您 
     的网站不会因为将来网络应用的升级而被淘汰。    
（2）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。
（3）支持浏览器的向后兼容，使您的网站都能够有很好的兼容性。   
（4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
（5）搜索引擎更加友好。         
（6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

3、流动布局（html网页默认的布局方式）

特点：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

4、浮动布局(float)

特点：

默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。

5、层模型

特点：

如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed

三、兼容的产生:

由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

俗话说：没有IE就没有伤害。

1、图片有三像素（小技巧）

float display vertical-align

img默认的display是inline-block，匿名块框把行内元素包裹起来，会撑出一定空隙。

1、将图片转换成块，img{display：block；}

2、如果要让图片成行显示，img{float：left；}或者 img{float：right；}

3、给图片加一个对齐方式img{vertical-align:middle; }

4、给父元素加font-size:0;

2、css设置元素透明度问题

属性	说明	举例
opacity:x	x值为0~1，值越小越透明	opacity:0.5(含IE8以下不支持)
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter：alpha(opacity=40)

3、css圆角问题

低版本不支持

width：100px;

height:100px;

boder-radius ：50%；（50%-100%都有效）

4、css hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。

样式Hack

css样式属性名前加上一些只有特定浏览器才能识别的hack前缀，实现页面效果
书写顺序从高版本到低版本

使用前缀	IE6	IE7	IE8
_样式属性	支持	不支持	不支持
*样式属性	支持	支持	不支持
样式属性值\9	支持	支持	支持

element{
color：#666\9； //IE8 IE9
* color：#999；   //IE7
_color:#EBEBEB； //IE6
}

5、1px问题：在IE6低版本中把低于19px解析为19px

解决办法：

给元素添加：

overflow:hidden;
或者
line-height:1px;（IE5不管用）

6、双边距问题

设置为float的div在ie下设置的margin会加倍，这是一个IE6的经典bug。

解决方案是在这个div里面加上display:inline;

<div id=” Iamfloat ”></div>

#Iamfloat{

float:left;

margin:5px;/IE下理解为10px/

display:inline !important;/IE下再理解为5px/

}

7、DIV浮动IE文本产生3px的问题

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。

.box{
           width: 800px;
           height: 200px;
           background: rgb(124, 151, 207);
           float: left;
       }
.box1{
           width: 50%;
           height: 200px;
           background: rgb(219, 78, 78);
           float: left;
           /* margin-right: -3px; */
       }
.box2{
           width: 50%;
           height: 200px;
           background: rgb(216, 211, 138);
       }

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

8、游标手指cursor兼容

cursor: pointer      可以同时在 IE FF 中显示游标手指状
cursor: hand         仅 IE7/8 可以