Blogger Information

Blog 35

fans 0

comment 0

visits 16910

Special Recommendation

More>

Related recommendations

一、CSS布局常用单位

1. 绝对单位

px像素
in英寸

1in等于96px

2.相对单位

2.1 % 相对父级的百分比

2.2 em和rem

1em默认是16px
em受父类影响，rem受根元素也就是HTML的影响。

一般为了保证浏览器正常的阅读，em 小于12px时，将不能生效，除非去浏览器里调整浏览器字体最小显示，调到12px以下，才能生效。不建议调整。

2.3 vw和wh

vw view-width 视图宽度
vh view-height 视图高度
视图窗口，简称视口，view-port
1vw = 整个视口宽度/100
1vh = 整个视口高度/100
参考如下案例：

HTML代码
<!DOCTYPE html>
<html lang="en">
<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></title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box">
    </div>
</body>
</html>
CSS文件test.css中的内容
body{
    background-color: lightblue;
    width: 100vw;
    height: 100vh;
}
.box{
    width: 50vw;
    height: 50vh;
    background-color: coral;
    background-clip: border-box;
}

效果如下（div始终占视口的50%）：

二、表格常用样式

添加表格线，添加到单元格td、th
折叠表格线
调整表头、文字、表格居中
使用伪类选择器设置样式

HTML代码
<!DOCTYPE html>
<html lang="en">
<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></title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <table>
        <caption>课程表</caption>
        <thead>
            <tr>
                <th></th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="8">中午</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td rowspan="2">下午</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
        </tbody>        
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="7"></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
test.css代码
/* 添加单元格表格线，添加到td、th级别。 */
table th,
table td{
    border: 1px solid #000;
}
/* 折叠表格线 */
table{
    border-collapse: collapse;
    /* 表格（块级元素）水平居中 */
    margin: auto;
    /* 文本水平居中 */
    text-align: center;
}
/* 调整标题 */
caption{
    /* 调整表标题字体大小 */
    font-size: 1.2em;
    /* 调整与表主体的距离 */
    margin-bottom: 0.6em;
}
table thead{
    background-color: lightblue;
}
/* 使用位置类伪类选择器进行样式设置 */
table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
    background-color: lightgreen;
}

调整后的效果入下：

三、class方式引入字体图标

基础HTML代码
<!DOCTYPE html>
<html lang="en">
<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></title> 
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div>
        <span class="iconfont icon-jingdong myicon"></span>
    </div>    
</body>
</html>
test.css代码
/* 导入官方库 */
@import 'font_icon/iconfont.css';
/* 设置图标样式 */
.myicon{
    /* 可以把文字图标当普通文字一样设置样式 */
    font-size: 100px;
    color: green;
    box-shadow: 2px 2px 2px yellow;
    border: 10px solid coral;
}

引用效果如下：

四、媒体查询（PC优先）

媒体：手机/pad/pc等的屏幕，打印机都是媒体
查询：获取媒体当前状态。
布局的前提：用户在一个宽度/高度受限，高度/宽度随用户内容增长的空间进行布局。高度/宽度必须固定一个。

媒体查询PC优先，即先从最大屏开始匹配

HTML代码
<!DOCTYPE html>
<html lang="en">
<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></title> 
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <button class="btn small">btn1</button>
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button> 
</body>
</html>
test.css代码
用html根元素伪类设置
:root{
    font-size: 16px;
}
.btn{
    background-color: seagreen;
    color: white;
    border: none;
    outline: none;
}
.btn:hover{
    cursor: pointer;
    opacity: 0.1;
    transition: 0.3s;
}
.small{
    font-size: 1.2rem;
}
.middle{
    font-size: 1.6rem;
}
.large{
    font-size: 2rem;
}
@media (min-width: 1000px){
    :root{
        font-size: 256px;
    }
}
@media (min-width: 500px) and (max-width:999px){
    :root{
        font-size: 128px;
    }
}
@media (min-width: 250px) and (max-width:499px){
    :root{
        font-size: 64px;
    }
}
@media (min-width: 125px) and (max-width:249px){
    :root{
        font-size: 32px;
    }
}

效果描述：

当屏幕宽度大于1000px时，html的font-size被修改为256px，三个按钮使用了rem的相对单位，对应大小调整为：

small按钮,
font-size=256*1.2=307.2px
middle按钮,
font-size=256*1.6=409.6px
large按钮,
font-size=256*2=512px

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0810-变量引用、字符串函数

2022-08-29 13:47:39