css05

最新推荐文章于 2024-05-09 21:41:42 发布

Synga

最新推荐文章于 2024-05-09 21:41:42 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/Synga/article/details/89331863

版权

图片间隙问题
两个图片之间的和图片下方多出的空白间隙都可以使用以下方法解决
方法一：将图片显示为块

img {
	display: block;
}

方法二：改变图片的对齐方式,基线以外的值

img {
		vertical-align: middle;
}

方法：设置图片父标签的font-size: 0;line-height: 0;

.imgfather {
	font-size: 0;line-height: 0;
}

兼容问题

ie8中图片边框问题
ie8中图片放在a标签中显示边框
解决方案：

img {
	border: none;
}

其他IE低版本兼容性问题了解
1.在ie6以及更早浏览器中定义小高度的容器
解决

   .text {
    	overflow: hidden;
    	height: 1px;
    	font-size: 0;
    	line-height: 0;
    }

2.ie6以及更早浏览器浮动时产生的双倍边距BUG？

解决

.text {
	float: left;
	_display: inline;
}

3.ie7以及更早浏览器下子标签相对定位时父标签overflow属性的auto|hidden 失效的问题
解决，给父标签也加上相对定位

4.块转内联块ie7以及早版本浏览器不在一行显示问题
解决

.div {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

5.ie7及更早浏览器下当li中出现两个或以上浮动时，li之间产生的空白间隙
解决
.li {
vertical-align: top;
}

css hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

CSS hack方式一：条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

	只在IE下生效
	<!--[if IE]>
	这段文字只在IE浏览器显示
	<![endif]-->
	
	只在IE6下生效
	<!--[if IE 6]>
	这段文字只在IE6浏览器显示
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
	<![endif]-->
	
	非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->

CSS hack方式二：类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

背景透明及元素透明对比

1：背景透明 内容不透明  background:rgba()

2:背景透明 内容透明  background:#000;opacity:0-1

多列布局

1：圣杯（中间容器自适应，左右两侧容器固定宽度）

注意点：

1：集中中心区域考虑中心区域如何自适应？（设置%宽度）

2：中心区域100%合适左右两侧盒子想办法放上去

3：中间区域的盒子写到html最前面其余就该左和右

4:让三个区域同时浮动，左右盒子被折行到中间盒子底下并排

5：利用外间距将左侧盒子向左移动-100%宽度右侧盒子向左侧移动-自身的宽度 -----》？中间盒子内容被左侧盒子盖住了 —》给最大的盒子设置左右两侧内间距padding 目的就是把中间盒子内容挤到中间盒子来----》整个大盒子变小 —》把左侧盒子利用相对定位left=-自身的宽度移到左侧，右侧盒子同理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            /* 最小宽度是700px pc端  */
            min-width: 700px;
        }
        .center,.left,.right {
            /* 最小高度300px */
            min-height: 300px;
            float: left;


        }

        .center {
            width: 100%;
            height: 400px;
            background-color: red;

           
        }
        .left {
            width: 200px;
            height: 400px;
            background-color: yellow;
            /* 向左走100% 左外间距-100% */
            margin-left: -100%;
            position: relative;
            left: -200px;

        }
        .right {
            position: relative;
            width: 220px;
            height: 400px;
            background-color: green;
            margin-left: -220px;
            right: -220px;
        }
        .container {
            padding: 0 220px 0 200px;
        }
    </style>
</head>

<body>
    <!-- container 盒子 内容 容器 -->
    <div class="container">
        <!-- 中间盒子 自适应 必须写在结构最前面 -->
        <div class="center">圣杯（San-greal）是在公元33年，犹太历尼散月十四日，也就是耶稣受难前的逾越节晚餐上，耶稣遣走加略人犹大后和11个门徒所使用的一个葡萄酒杯子。耶稣曾经拿起这个杯子吩咐门徒喝下里面象征他的血的红葡萄酒，借此创立了受难纪念仪式。后来有些人认为这个杯子因为这个特殊的场合而具有某种神奇的能力。相传彼世安温的魔法炉则是圣杯的前身。
                很多传说相信，如果能找到这个圣杯而喝下其盛过的水就将返老还童、死而复生并且获得永生，这个传说广泛延续到很多文学、影视、游戏等作品中。</div>
        <!-- 固定宽度 -->
        <div class="left">圣杯（San-greal）是在公元33年，犹太历尼散月十四日，也就是耶稣受难前的逾越节晚餐上，耶稣遣走加略人犹大后和11个门徒所使用的一个葡萄酒杯子。耶稣曾经拿起这个杯子吩咐门徒喝下里面象征他的血的红葡萄酒，借此创立了受难纪念仪式。后来有些人认为这个杯子因为这个特殊的场合而具有某种神奇的能力。相传彼世安温的魔法炉则是圣杯的前身。
                很多传说相信，如果能找到这个圣杯而喝下其盛过的水就将返老还童、死而复生并且获得永生，这个传说广泛延续到很多文学、影视、游戏等作品中。</div>
        <!-- 固定宽度 -->
        <div class="right">圣杯（San-greal）是在公元33年，犹太历尼散月十四日，也就是耶稣受难前的逾越节晚餐上，耶稣遣走加略人犹大后和11个门徒所使用的一个葡萄酒杯子。耶稣曾经拿起这个杯子吩咐门徒喝下里面象征他的血的红葡萄酒，借此创立了受难纪念仪式。后来有些人认为这个杯子因为这个特殊的场合而具有某种神奇的能力。相传彼世安温的魔法炉则是圣杯的前身。
                很多传说相信，如果能找到这个圣杯而喝下其盛过的水就将返老还童、死而复生并且获得永生，这个传说广泛延续到很多文学、影视、游戏等作品中。</div>



    </div>
</body>

</html>

双飞翼布局（左右固定宽，中间自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
    * {
        padding: 0;
        margin: 0;
    }
    .center {
        width: 100%;
        height: 500px;
        background-color: aqua;
        float: left;
    }
    .left {
        width: 200px;
        height: 500px;
        background-color: green;
        float: left;
        margin-left: -100%;
    }
    .right {
        width: 230px;
        height: 500px;
        background-color: yellow;
        float: left;
        margin-left: -230px;
    }
    /* 和圣杯布局的不同点:双飞翼要额外增加标签  
    
    
    
     */
    .centerInner {
        margin: 0 230px 0 200px;
    }
    
    </style>
</head>
<body>
    <div class="bigBox">
         <div class="center">

            <div class="centerInner">
             中间盒子
            </div>
            
            </div>
         <div class="left">左测盒子</div>
         <div class="right">右侧盒子</div>


    </div>
</body>
</html>

不同点：

双飞翼需要多增一个HTML标签 ，利用中间区域的外边距去摆放左右两侧的盒子
而圣杯是利用大盒子的内间距去摆放左右两侧盒子。 
?双飞翼要比圣杯使用率要高  原因： 双飞翼布局在屏幕小到一定程度时不会发生布局混乱，（挤下来 ），而圣杯会

等高布局（多列盒子高度相等）

1：内边距和外边距相消法(内边距：9999px 外边距：-9999px)
注意：父盒子添加属性overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .clearfix::after,.clearfix::before {
         content: '.';
         display: block;
         clear: both;
         line-height: 0;

    }
    .box {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        float: left;
        background-color: blueviolet;
        padding-bottom: 9999px;
        margin-bottom: -9999px;


    }
    .col2 {
        width: 40%;
        float: left;
        background-color: red;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
 
    }
    .col3 {
        width: 30%;
        float: left;
        background-color: yellow;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        height: 500px;
    }
    </style>
</head>
<body>
    <div class="box clearfix">
        <!-- col column 列 -->
         <div class="col1">等高布局第一列</div>
         <div class="col2">等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列等高布局第二列</div>
         <div class="col3">等高布局第三列</div>


    </div>
    
</body>
</html>

增加额外嵌套的容器
有多少列就要嵌套多少个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            min-height: 400px;
        }
    .container1 {
        width: 100%;
        background-color: red;
        float: left;
        position: relative;
        right: 40%;

    }
    .container2 {
        width: 100%;
        background-color: yellow;
        float: left;
        position: relative;
        right:30%;
    }
    .container3 {
        width: 100%;
        background-color: blue;
        float: left;
        overflow: hidden;
    }
    .col1 {
        width: 30%;
        float: left;
        /* background-color: aqua; */
        height: 400px;
        position: relative;
        left: 70%;
        
    }
    .col2 {
        width: 40%;
        float: left;
        /* background-color: orangered; */
        position: relative;
        left: 70%;
        height: 800px;
    }
    .col3 {
        width: 30%;
        float: left;
        /* background-color: deeppink; */
        position: relative;
        left: 70%;
    }
    
    
    </style>
</head>

<body>
    <div class="container3">
        <div class="container2">
            <div class="container1">

                <div class="col1">第一列</div>
                <div class="col2">第二列</div>
                <div class="col3">第三列</div>
            </div>
        </div>
    </div>


</body>

</html>

Synga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css05

图片间隙问题两个图片之间的和图片下方多出的空白间隙都可以使用以下方法解决方法一：将图片显示为块img { display: block;}方法二：改变图片的对齐方式,基线以外的值img { vertical-align: middle;}方法：设置图片父标签的font-size: 0;line-height: 0;.imgfather { font-size: 0;l...
复制链接

扫一扫

css05

“相关推荐”对你有帮助么？