1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh) - 前端开发

首页 > 博客列表 > 1. 实例演示css选择器权重的计算方式 2. 实例演示盒模型常用属性与盒大小计算方式 3. 实例演示css常用单位(em,rem,vw/vh)

博主信息

博文 10

粉丝 0

访问量 6127

专题推荐

更多>

1. 实例演示css选择器权重的计算方式

css权重计算方式 `id` `class` `tag`

id#权重最高 1.0.0
class.是主流 0.1.0
tag标签用来增加权重 0.0.1

实例演示

<h2 class="title" id="header">hello</h2>

权重0.0.1，一个`tag`标签

h2 {
color:red;
}

同样权重0.0.1 顺序决定

h2 {
color:red;
}

权重0.0.2 两个`tag`标签权重高低决定顺序

body h2 {
color:red;
}

权重0.1.0 一个`class` 权重高低决定顺序

.title {
color:red;
}

权重一个`id`1.0.0 权重高低决定顺序

#header {
color:red;
}

2. 实例演示盒模型常用属性与盒大小计算方式

盒模型的常用属性

五大属性

width
height
padding
loorder
margin

border属性,可见属性

可设置width style color

pading,matgin属性，不可见属性

可设置width
大多数内置元素都有默认的padding margin

盒大小

<body>
    <div class="box">hello</div>
    <style>
        body {
            outline: 1px solid black; 
        }
        .box { 
            width: 200px;
            height: 100px;
            border: 1px solid black;
            padding:5px;
            background-color: blueviolet;
            background-clip: content-box;
        }  
    </style>
</body>

盒大小计算方式

盒子大小`212112` 源码大小`200100`

标准计算：200px+10px+2px=212 *100px+10px+2px=112px

3. 实例演示css常用单位(em,rem,vw/vh)

实例演示(em,rem)

 <div style="font-size: 1.25em;">
        <div style="font-size: 2em">hello</div>
    </div>

<body>
    <div style="font-size: 1.25rem;">
        <div style="font-size: 2rem">hello</div>
    </div>
</body>
</html>
<style>
    html {
        font-size: 1rem;
    }
</style>

实例演示(vw/vh)

<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body > * {
        outline:1px solid;
        background-color:antiquewhite
    }
    header,
    footer {
        width: 100vw;
        height: 5vh;
        background-color:yellow;
    }
    main {
        width: 100vw;
        min-height:100vh;
        margin: 0.5vh 0;
        min-height: calc(100vh - 11vh);
    }
</style>

批改老师：

PHPz

批改状态：合格

老师批语：完成的不错，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法运用

2023-01-13 15:40:03