基础学习7 css技巧

最新推荐文章于 2024-04-19 05:47:05 发布

aZF1997

最新推荐文章于 2024-04-19 05:47:05 发布

阅读量664

点赞数

分类专栏：学习文章标签：笔记

本文链接：https://blog.csdn.net/aZF1997/article/details/98091352

版权

学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1:常见的兼容问题

兼容: 通过代码实线各浏览器表现一致性

1:ie8下图片边框问题

<a><img src="./a/1.jpg"></a>

解决办法:

img {
    border:0; //去掉ie8下图片边框
    display:block; 
    or vertical-align:middle;  取消下间隙
}

2:图片下间隙

    解决:   (1) 图片转换块元素
            (2)font-size:0;line-height:0;给父元素加  
            (3) 垂直对齐  vertical-align:middle;

3:文本框和提交按钮对不齐现象

 <style>
        * {
            margin: 0;
            padding: 0;
        }
    .box {
        width: 500px;height: 400px;
        border:6px double deeppink;
    }
    /* 文本框 */
    input:first-of-type {
        float: left;
        margin-top: 30px;
        height: 48px;
        border:1px solid #000;
        



    }
    /* 按钮 */
   input:last-of-type {
        float: left;
        margin-top: 30px;
        height: 50px;
        border:0;
        background-color: aqua;
        width: 50px;

    }
/* 
1: 不用普通按钮  用a元素模拟按钮  js提交
2:给按钮外边套一个div 

 */
    
    </style>
</head>
<body>
    <div class="box">
        <form action="">
        <!-- 盒模型的高度= height+border*2+padding*2  56-->
        <input type="text">
        <!-- 设置的高度包含了盒模型的边框+内边距 = 50px 
        盒模型的高度= height  50
        -->
        <input type="submit" value="提交">
        <!-- <a href="#">提交</a> -->
    </form>
    </div>
</body>
</html>

4:ie6下小高度问题

div {
    line-height:0;
    font-size:0;
}

2:css hack

hack: 针对不同浏览器写不同的结构或css代码就叫hack

结构hack :用于ie浏览器不同版本

6种条件: 大于小于等于大于等于小于等于非 >=ie6 =ie6

<!--[ if IE 6 ]>  开始

<p>只在ie6显示</p>
 
<![endif]-->  结束

CSS Hack实际上是指特殊的代码，这段代码只在某些浏览器中可以识别，而在其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码使用：在使用条件Hack时，需在HTML中添加link样式,在样式中添加脚本，写法如下：
<!--[if IE 8]>
<link rel='stylesheet' type='text/css' herf='css/sty-ie8.css'>
<![endif] -->
写法如下：语法：
<!--[if <keywords>? IE <version>?]><![endif]-->
HTML代码块<![endif]-->keywords取值|

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本选择方式说明是否指定是否IE或IE某个版本。
关键字：空大于选择大于指定版本的IE版本。
关键字：gt（greater than）大于或等于：选择大于或等于指定版本的IE版本。
关键字：gte（greater than or equal）小于选择小于指定版本的IE版本。
关键字：lt（less than）小于或等于选择小于或等于指定版本的IE版本。
关键字：lte（less than or equal）
非指定版本选择除指定版本外的所有IE版本。关键字：!

ie10以上已经将条件hack废除

属性hack

_display:inline;  针对ie6及其以下浏览器

*display:inline; 针对ie7及其以下浏览器

display:inline\0;  ie8,ie9两个浏览器

.test {
    
    w200
    h200
    bgc:red;//谷歌 火狐显示红色  
    _bgc:yellow; ie6及其以下显示黄色
    *bgc:green;ie7及其以下显示绿色
    bgc:orange\0;ie8,ie9 显示橘色
    
}
<div class="test"></div>

选择符hack

*html .box {
    bgc:red;
}//ie6添加此样式
*+ html .box {
    bgc:red;
}
//只有ie7才识别

3:经典常见布局

自适应: 盒子宽度随着屏幕宽度发生变化百分比

1:两列自适应布局

要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子

2: 三列自适应布局

左右两侧固定宽度,中间盒子自适应

技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排

圣杯布局

圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），

特征: 如何把中心内容移动到中心显示?

设置最外侧盒子的内边距吧实现的

<!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;
    }
    .container {
        /* min-height: 最小高度  if 内容的高度<300px  取300px  */

        min-height: 300px;
        /* 4:内边距 ---> 把内容挤到中间来 */
        padding: 0px 220px 0px 200px;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: red;
        float: left;
        /* 2:向左走100% */
        margin-left: -100%;

    /* 5:利用相对定位想左移动自身的宽度 */
    position: relative;
    left:-200px;


    }
    .center {
        width: 100%;
        height: 400px;
        background-color: deeppink;
        float: left;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: palegreen;
        float: left;
        /* 3: */
        margin-left: -220px;
        /* 6:利用相对定位想右移动自身的宽度 */
    position: relative;
    right: -220px;
    
    }
    
    </style>
</head>
<body>
    <div class="container">
          <!-- 100%宽度 自适应  保证左右两侧的盒子同时和他并排右侧 -->
          <div class="center">中心盒子</div>

        <!-- 固定宽度 -->
        <div class="left">左侧盒子</div>
      
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

双飞翼布局

双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
始于淘宝UED UED

特点: 给中心盒子在套一个盒子 ,这个盒子设置左右两侧的外边距 ,目的是把内容放到中心盒子身上展示

<!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;
        }
    .c {
        min-height: 400px;

    }
    .center {
        width: 100%;
        height: 400px;
        background-color: red;
        float: left;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: skyblue;
        float: left;
        margin-left: -100%;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: silver;
        float: left;
        margin-left: -220px;
    }
    .inner {
        margin: 0px 220px 0px 200px;
    }
    </style>
</head>
<body>
    
    <div class="c">


        <div class="center">

            <div class="inner">
                    中间盒子
            </div>
            
         
        
        </div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

3:等高布局

等高布局：给每一列添加相应的容器，并进行相互嵌套，并在每个容器中设置背景色，通过相对定位移动盒子到相应位置。

height:auto时的现象

height:auto 全部都是内容撑开

每一列盒子高度同时变化,以最高的那列为基准整个盒子的高度应该取决于最高的那列

等高布局

8种

1: 表格行等高列等宽

2:伪等高 —>内外边距相消法

    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        height: 400px;
        background-color: yellow;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col2 {
        width: 40%;
        height: 300px;
        background-color: red;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col3 {
        width: 30%;
        height: 500px;
        background-color: palegoldenrod;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    
    
    </style>
</head>
<body>
    <div class="c">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
</body>
</html>

H= height + padding+border+margin

3:真等高 —> 背景盒子法

原理: 父盒子取决于内容盒子里最高的盒子的高度

(1)多列浮动并排清除浮动影响

(2)给最外侧的盒子在套几个盒子套的盒子数量= 列的数量(每一列都要分配一个背景盒子)

(3)先移动倒数第2层的盒子然后依次移动倒数第3层…

设置负外边距移动

(4)移动相应的列到相应的背景盒子通过相对定位正值第一个移动的第3列向右移动的是第3列+第2列的宽度…

(5)最外侧盒子添加一个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;
        }

        .a {
          

            width: 100%;
            
            background-color: purple;
            margin-left: -30%;
        }
        .b {
            width: 100%;
            background-color: yellow;
            margin-left: -30%;
        }
        .c {
            width: 100%;
            background-color: orange;
        }
      

        .col1 {
            width: 40%;
            height: 200px;
            /* background-color: red; */
            float: left;
            position: relative;
            left: 60%;
            

        }

        .col2 {
            width: 30%;
            height: 300px;
            /* background-color: yellow; */
            float: left;
            position: relative;
            left: 60%;

           
        }

        .col3 {
            width: 30%;
            height: 400px;
            /* background-color: blue; */
            float: left;
            position: relative;
            left: 60%;
          
            
        }
       
    </style>
</head>

<body>
    <div class="c">
        <div class="b">
            <div class="a">
                <div class="col1">第一列</div>
                <div class="col2">第2列</div>
                <div class="col3">第3列</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

</body>

</html>

4:BFC

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

解决的问题:

1,外边距折叠；2，自适应两栏或三栏布局；3，防止字体环绕；4，清除浮动。

aZF1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础学习7 css技巧

day071:常见的兼容问题兼容: 通过代码实线各浏览器表现一致性1:ie8下图片边框问题<a><img src="./a/1.jpg"></a>解决办法:img { border:0; //去掉ie8下图片边框 display:block; or vertical-align:middle; 取消下间隙}2:图片...
复制链接

扫一扫