实例演示css选择器权重的计算方式盒模型常用属性与盒大小计算方式 css常用单位(em,rem,vw/vh)

笔记1

css是层叠样式表
当选择器权重相同时，最终样式与样式规则的位置相关
500 5百位 050十位 005个位
百位权重100 十位权重10 个位权重1
500
5在个位 005 = 0100+010+51
5在十位 050 = 0100+510+01
5在百位 500 = 5100+010+0*1

css选择器由原子选择器构成
number string bool 基本类型
tag 标签选择器相当于个位
class 类选择器相当于十位
id ID选择器相当于百位

0，0，1 id=0 class=0 tag=1
增加数量 h2 001 < body h2 002 < h2.title
012 body h2.title 0id 1class 2tag
header 100权重极高

场景渐进式UI设计
.table.hover 加tbody tr:hover或加:not(thead tr){
冗余规则 !important和ID 尽量调试环境中使用
id用于表单控件与锚点中使用
border是有边框及视觉效果真实占用页面的空间
outline框轮廓线及视觉效果之外不会占用空间
可以用于观察元素的外观

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/dome.css">
</head>
<body>
    <h2>php中文网</h2>
    <h2 class="title" id="header">php中文网</h2>
    <table class="table title theadBgColor hover">
        <caption>成绩表</caption>
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>课程</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>A001</td>
                <td>大朗</td>
                <td>HTML</td>
                <td>60</td>
            </tr>
            <tr>
                <td>A02</td>
                <td>二郎</td>
                <td>js</td>
                <td>70</td>
            </tr>
            <tr>
                <td>B01</td>
                <td>金华</td>
                <td>php</td>
                <td>88</td>
            </tr>
            <tr>
                <td>B02</td>
                <td>阿花</td>
                <td>CSS</td>
                <td>99</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

css样式

h2{
    color: green;
}
h2{
    color: blue;
}
#header{
    color:#4ff247;
}
h2.title{
    color: #1d06f4;
}
body h2.title{
    color: #f4c806;
}
body h2{
    color: red;
}
h2{
    color: green;
}
/* 表格的基本样式 */
.table{
    width: 80%;
    border: 1px solid #000;
    border-collapse: collapse;
    text-align: center;
    margin: auto;
}
.table th,
.table td{
    border: 1px solid #000;
    padding: 3px 5px;
}
/* 表格标题 */
.table.title caption{
    margin-bottom:  10px;
    font-size: large;
    font-weight: bold;
}
.table.theadBgColor thead{
    background-color: lightgreen;
    /* background-color: violet; */
}
.table.hover tr:hover:not(thead tr){
    background-color: #ddd;
    cursor: pointer;
}
/* */
.table.theadBgColor thead{
    background-color: violet;
}
table.table.theadBgColor thead{
    background-color: blue;
}
.table.theadBgColor thead{
    background-color: lightcoral !important;
    background-color: red !important;
}

笔记2

网页当中一切都是盒子
盒子是页面中可见的矩形区域
php.cn <html> {outline: 1px solid red;}
五大属性
1width宽
2height高
3padding内边距
4border边框
5margin外边距
border可见属性可见设置 width style color
padding/margin
不可见属性仅可设置width 大多数内置元素都有默认的padding/margin
建议全部重置为0以便自定义布局
border top上 bottom下 left左 right右 3px边框宽度 solid实线 color颜色
边框默认的就是内部文本的颜色
padding看不见边框所以需要先设置背景色裁切
background-clip: content-box;
padding是上右下左顺时针方向
1 左10=右10 上5！=下15 用三值表示
2 左10=右10 上15=下15 用双值表示
不论是三值还是双值第二个位置上永远都是左右
页面中显示盒子大小 174134
源码中是150100
标准计算 150+20+4=174
显示大小不等于源码中的大小
box-sizing 重新计算盒模型的边界
默认盒大小计算边界内容区
将盒大小计算边界扩展到边框
源码中的大小===页面中显示大小
通过收缩内容区大小类实现的

通用初始化

不管css中使用了什么单位浏览器统统转为px像素
1em===16px 2em===32px 20/16=1.25em ===2px
font-size 可继承属性
1em===16px 2em===32px =40 不是32px
因为em是一个变量根据位置变化优先级由内向外逐级降低
em静态化解决方案让em与位置无关只和一个固定的元素字号相关
rem只和根元素字号相关 r是root 让rem来代替em
默认 1rem==1em==1px
但是rem永远与根子号保持一致
究竟用哪个单位呢? em文本大小 rem元素大小
如果元素使用了rem,那它是相对于个固定的”根字号”来计算大小,绝对路径
如果元素使用em,那它相对于”自身或父级元素的字号”来计算大小,相对路径
1vw==1/100% =vw==视口宽度===可视窗口==viewport width
1vh==1/100% =vh==视口高度可视窗口==viewport height
min-height:calc(100vh - 5vh -5vh -1vh -1vh);
要减去页眉页脚的5vh和上下1vh的margin
calc（）运算符两边需要加空格 /和*不需要加空格+和-需要加空格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/dome.css">
</head>
<body>
    <div class="box">box</div>
    <div style="font-size: 16px;">hello</div>
    <div  style="font-size: 1em;">world</div>
    <hr />
    <div style="font-size: 2em;">
        <div>hello</div>
        <div>world</div>
    </div>
    <hr />
    <div style="font-size: 1.25em;">
        <div style="font-size: 2em;">hello</div>
        <div>world</div>
    </div>
    <hr />
    <div style="font-size: 1.25rem;">
        <div style="font-size: 2rem;">hello</div>
        <div>world</div>
    </div>
    <div class="box1">box</div>
</body>
</html>

css样式


.box{
    width:150px ;
    height: 100px;
    /* border: #000 solid 3px; */
    border: 3px solid;
    /* padding: 5px 10px 15px 20px; */
    background-color: red;
    background-clip: content-box;
    padding: 15px 10px;
    box-sizing: content-box;
    box-sizing: border-box;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 16px;
    font-size: 1rem;
    font-size: 1em;
    width: 100vw;
    height: 100vh;
}
.box1{
    width: 50vw;
    height: 10vh;
    background-color: yellow;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/dome.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
}
        body > *{
            outline:1px solid ;
            background-color: lightcyan;
        }
        header,footer{
            width: 100vw;
            height: 5vh;
        }
        main{
            background-color: violet;
            width: 100vw;
            margin: 1vh 0;
            min-height: 100vh;
            min-height:calc(100vh - 5vh - 5vh - 1vh - 1vh);
        }
    </style>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>

批改老师：

PHPz

批改状态：合格

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

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

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

0条评论

作者最新博文

开学第一课

2023-01-13 18:41:14

实例演示css选择器权重的计算方式 盒模型常用属性与盒大小计算方式 css常用单位(em,rem,vw/vh)

笔记1

笔记2

实例演示css选择器权重的计算方式盒模型常用属性与盒大小计算方式 css常用单位(em,rem,vw/vh)