CSS3 元素基础知识

最新推荐文章于 2022-06-17 22:29:17 发布

苦涩2020

最新推荐文章于 2022-06-17 22:29:17 发布

阅读量184

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106078089

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS3 元素基础知识

元素宽高特点
元素类型转换
元素显隐
px像素
em单位
rem单位
百分比单位
颜色名和16进制颜色值
rgb和rgba颜色值

元素宽高特点

块级元素

可以设置宽高
不能和其他元素在一行
没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
当设置有宽高时，元素的宽高就是设置的值

行级元素

不可以设置宽高，设置的宽高无效
可以和其它元素在一行
宽高由元素内容决定

行内块级元素

可以设置宽高
可以和其它元素在一行
当没有设置宽高时，宽高由元素内容决定
当设置有宽高时，元素的宽高就是设置的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素宽高特点</title>
</head>
<body>
    <!-- <div style="background: red; width: 200px; height: 20px;">块级元素</div> -->
    <!-- <div>块级元素</div> -->

    <!-- <span style="background: red; width: 300px; height: 20px;">行级元素</span> -->
    <!-- <span style="background: red;">行级元素</span> -->

    <img src="./头像.png" style="background: red; width: 100px; height: 100px;">
    <img src="./头像.png" style="background: red; width: 100px; height: 100px;">
</body>
</html>

元素类型转换

display:block 转块级元素

display:inline 转行级元素

display:inline-block 转行内块级元素

任何元素都可以进行类型转换，元素类型之间可以相互转换
元素类型转换不会影响元素自身的性质

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类型转换</title>
    <style type="text/css">
        a,span,img{
            background: #ccc; margin-bottom: 5px;
            display: block;
            width: 200px; height: 80px;
        }
        div{background: #ccc; 
            /* width: 200px; height: 80px;宽高失效 */
            display: inline;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">行级元素</a>
    <span>行内元素</span>
    <img src="./头像1.png" alt="行内块级元素">

    <hr>

    <div>块级元素111</div>
    <strong>行内元素</strong>
</body>
</html>

元素显隐

display:none 元素隐藏，页面结构仍然存在，元素所占空间会被隐藏

display:block 块级元素显示

display:inline 行级元素显示

display:inline-block 行内块级元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显隐</title>
    <style type="text/css">
        div{
            width: 200px; height: 80px;
            background: #ccc;
            display: none;
        }
        span{
            background: #ccc;
            display: none;
        }
        .div1{display: block;}
        .span1{display: inline;}
    </style>
</head>
<body>
    <div class="div1">元素显隐</div>
    <span class="span1">元素显隐2</span>
</body>
</html>

px像素

屏幕上的一个点作为单位，稳定精确
用得最多的尺寸单位

em单位

em是以自身字体大小font-size作为参考，是自身字体大小的倍数
当自身字体大小改变时，em会跟着改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em单位</title>
    <style type="text/css">
        div{
            font-size: 15px;
        }
        h4{
            background: #ccc;
            width: 300px; height: 30px;
        }
        p{
            font-size: 20px;
            background: green;
            width: 20em; 
        }
    </style>
</head>
<body>
    <div>
        <h4>em单位</h4>
        <p>em单位2</p>
    </div>
</body>
</html>

rem单位

rem是以根元素（html元素）字体大小作为参考，是根元素字体大小的倍数
当根元素字体大小改变时，rem会跟着改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem单位</title>
    <style type="text/css">
        html{
            font-size: 20px;
        }
        h4{
            background: #ccc;
            width: 400px; height: 30px;
        }
        p{
            font-size: 20px;
            background: green;
            width: 20rem; 
        }
    </style>
</head>
<body>
    <div>
        <h4>rem单位</h4>
        <p>rem单位2</p>
    </div>
</body>
</html>

百分比单位

%百分比单位是以父作为参考，是父元素的百分比
当父元素改变时，使用%作单位的子元素会跟着改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比单位</title>
    <style>
        div{
            background: #ccc;
            width: 600px; height: 300px;
        }
        p{
            background: red;
            width: 50%; height: 50%;
            font-size: 200%;
        }
    </style>
</head>
<body>
    <div>
        <span style="font-size: 32px;">百分比单位</span>
        <p>百分比单位2</p>
    </div>
</body>
</html>

颜色名和16进制颜色值

颜色表示方式：

颜色名称：red、yellow、blue。。。（用得少）
16进制颜色值：#rrggbb；rr(红色)，gg(绿色)，bb(蓝色)；使用16进制整数规定颜色成分，所有值必须介于00至ff之间（用得多）

color: red;
color: #ff0000;

rgb和rgba颜色值

rgb(红，绿，蓝)颜色值：通过定义三种（红，绿，蓝）颜色的强度来定义颜色；所有值必须介于0至255之间
rgba(红，绿，蓝，透明度)颜色值：在rgb颜色值基础上增加了透明度，a表示alpha透明度，取值0.0至1.0之间，0表示完全透明，1表示完全不透明

color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.6);

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 元素基础知识

CSS3 基础元素宽高特点元素类型转换元素宽高特点块级元素可以设置宽高不能和其他元素在一行没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定当设置有宽高时，元素的宽高就是设置的值行级元素不可以设置宽高，设置的宽高无效可以和其它元素在一行宽高由元素内容决定行内块级元素可以设置宽高可以和其它元素在一行当没有设置宽高时，宽高由元素内容决定当设置有宽高时，元素的宽高就是设置的值<!DOCTYPE html><html lang="en"&
复制链接

扫一扫