2021/3/29--前端第15天--csshack、IE6兼容、css单位、BFC\IFC 、布局导航

最新推荐文章于 2023-07-10 16:04:54 发布

张登辉的奇妙旅程

最新推荐文章于 2023-07-10 16:04:54 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/A444477/article/details/115292517

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

2021/3/30–前端第15天–csshack、IE6兼容、css单位、布局导航

csshack

在这里插入图片描述
属性值的hack
选择器的hack

<style>
        /* 内容css hack */
        h1{
            color: red;
            /* ie6下为绿色 */
            /* 下划线或者横线 */
            _color:green;
            /* ie 6/7  黄色 */
            !color:yellow;
            /* ie8/9以上 紫色*/
            color:purple\0;
            /* ie 6-10 */
            color:blue\9;

        }

        /* 选择器hack */
        /* ie6 */
        *html .title{
            font-size: 50px;
            background-color: yellow;
        }
        /* ie7 */
        .title, {
            background:pink;
        }
        /* 非ie6浏览器 */
        /* ie 6 不支持>尖角号 */
        body>.title{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h1>ickt</h1>
    <div class="title">ickt!</div>
</body>

IE6 兼容

在这里插入图片描述

css单位

% 相对于父元素
px 屏幕上的一个点
in 英寸分辨率 96个像素点
cm 厘米一英寸2.54cm 96/2.54px
mm 毫米
pt 磅 1/72英寸 1.33像素
pc 包含12个点活字

em 相对于字体的大小
rem 相对于根元素的大小
ex x字母的高度
vw 1vw相当于视口宽度的1%
wh 1vh相当于视口高度的1%
vmin 选vw、vh中小的那个
vmax 选vw、vh中大的那个

<style>
        html { 
            font-size: 30px;
        }
        .box {
            height: 30px;
            margin-top: 10px;
            background-color: pink;
            font-size: 20px;
        }
        .box1{
            width: 10%;
        }
        .box2{
            width: 10px;
        }
        .box3{
            width: 10in;
        }
        .box4{
            width: 10cm;
        }
        .box5{
            width: 10mm;
        }
        .box6{
            width: 10pt;
        }
        .box7{
            /* 1点活字16px */
            width: 10pc;
        }

        .box8{
            /* 和字号相关   字体为多大  em为多大 */
            width: 10em;
        }
        .box9{
            /* 在此设置字体大小无用，rem取决于根元素字体大小，html */
            /* font-size: 50px; */
            width: 10rem;
        }

        .box10{
            /*  */
            font-size: 40px;
            width: 10ex;
        }
        .box11{
            width: 10vw;
        }
        .box12{
            width: 10vh;
        }
        /* vw，vh正方形 */
        .box13{
            width: 10vmin;
            height: 10vmin;
        }
        .box14{
            width: 10vmax;
            height: 10vmax;
        }

    </style>
</head>
<body>
    <div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        <div class="box box9">9</div>
        <div class="box box10">10</div>
        <div class="box box11">11</div>
        <div class="box box12">12</div>
        <div class="box box13">13</div>
        <div class="box box14">14</div>
    </div>
</body>

BFC和IFC

FC:格式化上下文，是页面中的一块渲染区域，并有一套渲染规则，决定其子元素将如何定位，以及和其他元素的关系和定位相互作用。
常用的FC：
BFC:块级格式化上下文
IFC:内联格式化上下文
BFC布局规则和产生在这里插入图片描述
:
IFC布局规则:

在这里插入图片描述
GFC：网格
FFC：自适应

布局练习

reset.css / namalize.css 清除默认样式，统一各个浏览器

93 banner 部分

张登辉的奇妙旅程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021/3/29--前端第15天--csshack、IE6兼容、css单位、BFC\IFC 、布局导航

2021/3/29–前端第15天–csshack、IE6兼容、css单位、布局导航csshack属性值的hack选择器的hack<style> /* 内容css hack */ h1{ color: red; /* ie6下为绿色 */ /* 下划线或者横线 */ _color:green; /* ie 6/7 黄色 */
复制链接

扫一扫

专栏目录