pc端兼容、两栏布局、三栏布局

最新推荐文章于 2022-07-06 14:53:01 发布

王辣辣

最新推荐文章于 2022-07-06 14:53:01 发布

阅读量411

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_44870324/article/details/98720573

版权

一、 pc端兼容性问题解决

1：常见兼容性问题（不区分浏览器）
图片下间隙问题
现象：图片和父盒子有3px的间隙，并且间隙会随着字体大小发生变化，字体越大，间隙越大。
原因：图片具有文本属性，文本会以基线对齐，所以导致文字在下，图片在上，还有间隙。
解决方法：
1.设置字体大小为0px；
2：将图片转换为块元素（彻底取消掉基线对齐方式）
3：文本垂直方向对齐方式调整 vertical-align:top/middle/baseline(基线)/bottom.
2.行内元素并排中间间隙问题
解决方法：float：left、right or 将其利用display：block 转换为块元素。
3.文本框与提交（普通）按钮对不齐现象
在这里插入图片描述
1.不用按钮，用a标签模拟按钮 js提交。
2. 按钮元素套 div
<div> <input type="button" value="登录"></div>
3.内减input元素的padding和border值
``

ie浏览器常见兼容性问题

1.ie8及其以下，图片外套a超链接时图片会有默认边框 (100%)

   ` <a><img src=""></a>

img {
    verticla-align:middle/top/bottom; //取消图片下间隙  or display:block
    border:none; // 取消ie浏览器下图片边框
}`

== 解决方法: 设置img标签 border:none==

2:ie6下小高度问题（不超过10px高度的盒子线）

原因: ie6 有默认的行高大约 10px+ 盒子被撑起来

解决方案:

 line-height:0;
  font-size:0;
  overflow:hidden;

3.css hack

条件hack（html结构） ie10 +废除条件hack 性能不好
只有ie浏览器能看到这个元素

   ****属性hack （单属性）****
    —属性名：属性值 ； ie6 及其以下  浏览器会识别此属性
     * 属性名：属性值；ie7及其以下 会识
     \0  尾缀  属性名：属性值\0;   ie8-ie 识别

选择符级 hack （类样式）

      * html .box {}  .box 只在ie6以及更早
* + html .box {}  .box ie7以及更早浏览器识别

二。经典布局

1：两列自适应
在这里插入图片描述

          <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            /* overflow: hidden; */
            /* position: relative; */
            width: 100%;
            height: 300px;
            background-color: red;
        }
        .col1 {
         
            width: 200px;
            height: 300px;
            background-color: blue;
           /* position: absolute;
           left: 0px;
           top:0px; */
           float: left;

        }
        .col2 {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;
            /* padding-left: 200px; */
           
        }
        .box {
            width:25%;
            height: 100px;
            background-color: purple;
            float:  left;
            margin-left: 30px;
        }
    
    
    </style>
</head>
<body>
        <!-- 容器  最外层布局容器container -->
    <div class="container">
        <!-- col 列 -->
        <div class="col1">左侧 固定宽度 </div>
        <div class="col2"> 
            <div class="box"></div>
           
            
            
            自适应： 随着屏幕宽度而自动进行宽度调整  % 
            <div style="clear: both"></div>
        </div>
            <div style="clear: both"></div>
    </div>
</body>
</html>

三列自适应（原理：负外边距+浮动+相对定位实现效果）

1：中间盒子放在结构的第一位

圣杯布局
利用内边距去实现内容放置
因为超出浏览器宽度所以左浮后自动换行

 <style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
        padding: 0px 200px;
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;

        position: relative;
        left:-200px;
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }
    </style>
</head>
<body>
    <div class="c">
          <!-- 100% -->
          <div class="center">中间盒子</div>
      
        <!-- 固定宽度 -->
        <div class="left">左列</div>
     
      
        <div class="right">右列</div>

        <div style="clear:both"></div>
    </div>
</body>
</html>

**
`

        <div class="inner"> 中间盒子</div>
          
       
    </div>
  
    <!-- 固定宽度 -->
    <div class="left">左列</div>
 
  
    <div class="right">右列</div>

    <div style="clear:both"></div>
</div>

双飞翼布局

利用外边距去实现内容放置
**

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
     
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;
      
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
       
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }
    .inner {
        margin: 0px 200px;
    }
    </style>
</head>
<body>
    <div class="c">
          <!-- 100% -->
          <div class="center">
              <!-- inner用来装内容  -->

            <div class="inner"> 中间盒子</div>
              
           
        </div>
      
        <!-- 固定宽度 -->
        <div class="left">左列</div>
     
      
        <div class="right">右列</div>

        <div style="clear:both"></div>
    </div>
</body>
</html>

王辣辣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pc端兼容、两栏布局、三栏布局

一、 pc端兼容性问题解决1：常见兼容性问题（不区分浏览器）图片下间隙问题现象：图片和父盒子有3px的间隙，并且间隙会随着字体大小发生变化，字体越大，间隙越大。原因：图片具有文本属性，文本会以基线对齐，所以导致文字在下，图片在上，还有间隙。解决方法：1.设置字体大小为0px；2：将图片转换为块元素（彻底取消掉基线对齐方式）3：文本垂直方向对齐方式调整 vertical-align:...
复制链接

扫一扫