web前端零基础入门（四）

最新推荐文章于 2024-05-10 15:47:34 发布

339+

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量234

点赞数

分类专栏： web前端开发文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_47743942/article/details/127112212

版权

web前端开发专栏收录该内容

10 篇文章 4 订阅

订阅专栏

web前端零基础入门

38. 继承
39. 选择器的权重
40. 像素和百分比
41. em和rem
42. RGB与RGBA值
43. HSL和HSLA
44. 文档流
45. 盒子模型
46. 边框
47. 内边距
48. 外边距

38. 继承

样式的继承：为一个元素设置的样式，同时也会应用到它的后代元素

继承是发生在祖先后代之间的，当然也包括父子元素之间

继承的设计是为了方便我们开发，可以将一些通用样式设置到共同的祖先元素上

但注意不是所有样式都会被继承，如：背景相关的，布局相关的不会被继承

<!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>Document</title>
    <style>
        body{
            font-size: 20px;
        }

        p{
            color: pink;
            background-color: orange;
        }
        div{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>

    </p>
    <span>我是p元素外的span</span>
    <div>
        我是div
        <span>我是div里的span
            <em>我是span里的em</em>
        </span>

    </div>
</body>
</html>

在这里插入图片描述

【注意】如何查看CSS相关属性能否被继承，可以打开Zeal离线文档查看器进行搜索

在这里插入图片描述

39. 选择器的权重

在上一的章节的32. 关系选择器中说道元素颜色会发生覆盖，由它们的优先级决定，也就意味着它们发生了样式的冲突

样式的冲突：当通过不同的选择器选中相同的元素并设置了不同的值时，此时会发生样式的冲突

发生了样式冲突时，应用那个样式由选择器的权重（优先级）决定

选择器权重：
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承无优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
分组选择器的优先级是单独计算的
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某样式后面加上!important，此时该样式优先级最高，超过内联样式

<!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>Document</title>
    <style>
        #box1{
            background-color: orange;
        }
        div{
            background-color: yellow ;
        }
        .red{
            background-color: red;
        }
        div#box1{
            background-color: aqua;
        }
        div,#box1{
            background-color: brown;
        }
        *{
            font-size: 50px;
        }
        div{
            font-size: 20px;
        }
        p{
            background-color: bisque !important;
        }
    </style>
</head>
<body>
    <div id="box1" class="red" style="background-color:skyblue">我是第一个div</div> <!-- 内联选择器的优先级最高 -->
    <div id="box1">我是第二个div
         <!-- 交集选择器的优先级大于并集的优先级，color：aqua -->
         <!-- 通配选择器的优先级大于继承的优先级，字体50px -->
        <span>我是div里的span</span> 
    </div>
    
    <!-- 使用!important改变样式优先级，color：bisque -->
    <p style="background-color: pink;">我是p元素</p>
</body>
</html>

在这里插入图片描述

【注意】可以看到p元素上方有距离，因为p元素自带有上下边距，后面章节会详细说明

40. 像素和百分比

长度单位：
像素：屏幕（显示器）实际上由一个一个的小点构成
不同屏幕的像素大小是不同的，像素越小屏幕显示效果越清晰
百分比：将属性值设置为父元素属性的百分比
子元素可以跟随父元素改变而改变

41. em和rem

em是相对于元素的字体大小计算的
1em = 1 font-szie，默认为16px
em会根据字体大小的改变而改变

rem是相对于根元素（html）的字体大小计算的

因此改变该元素和html跟元素的字体大小都可以使em和rem的基数

<!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>Document</title>
    <style>
        html{
            font-size: 15px;
        }
        .box1{
            width: 300px;
            height: 100px;
            background-color: orange;
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: greenyellow;
            
        }
        .box3{
            font-size: 20px;
            width: 15em;/*em以元素字体大小计算 */
            height: 5em;
            background-color: aqua;
        }
        .box4{
            width: 20rem; /*rem以html根元素字体大小计算*/
            height: 6.667rem;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

在这里插入图片描述

42. RGB与RGBA值

在CSS中可以使用颜色名来设置各种颜色
比如：red、orange、blue…

但很多颜色无法表示，因此引入RGB值，通过红绿蓝三原色调配出不同的颜色

十进制RGB值：
每一种颜色值范围在0-255（0%-100%）之间，表示颜色的浓度
语法：RGB（红色值，绿色值，蓝色值）
此三原色为光的三原色，（0,0,0）表示黑色，（255,255,255）表示白色
十六进制RGB值：
颜色浓度通过00-ff表示
语法：#红色绿色蓝色
如果颜色两位两位重复可以简写，如#aabbcc -> #abc

而RGBA在RGB基础上引入了不透明度，1表示完全不透明，0表示完全透明

<!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>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;/* 颜色名 */
            background-color: rgb(0, 255, 0);/* RGB */
            background-color: rgba(76, 72, 102, 0.9);/* RGBA */
            background-color: #bfa;/* 16进制RGB值 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

43. HSL和HSLA

HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

HSL即色相（Hue）、饱和度（ Saturation）、亮度（ Lightness）
H取值范围0-360
S取值范围0%-100%
L取值范围0%-100%

在这里插入图片描述

HSLA在HSL基础上引入透明度，与RGBA类似

<!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>Document</title>
    <style>
        .box{
            width: 10em;
            height: 10em;
            background-color: hsl(76, 72%, 89%);
            background-color: hsla(76, 72%, 89%, 0.6);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

44. 文档流

文档流（normal flow）
之前介绍网页是一个多层的结构，一层叠着一层，而用户只能看到最上面一层
其中最底下的层称为文档流，所创建的元素默认在文档流中进行排列
因此元素只有两种状态，在文档流中和脱离文档流

元素在文档流中特点：
块元素：
独占一行，无论宽度多宽，自上向下垂直排列
默认宽度是父元素的宽度（撑满父元素），
默认高度被内容撑开
行内元素：
不会独占一行，自左向右水平排列
一行容纳不下会换行到下一行继续自左向右排列
默认宽度和默认高度都是被内容撑开

<!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>Document</title>
    <style>
        .box{
            background-color: yellow;
        }
        span{
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="box">html和css</div>
    <span>jiayou</span>
    <span>jiayou</span>
    <span>jiayou</span>
</body>
</html>

在这里插入图片描述

45. 盒子模型

CSS将页面中所有元素都设置为了一个矩形的盒子，至此对页面的布局就是将不同的盒子摆放到不同的位置

每一个盒子组成部分：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

元素中的所有子元素和文本、图像等内容都在内容区中排列
内容区大小由width和height两个属性来设置

边框会影响盒子的大小，设置边框需设置宽度、颜色、边框样式

<!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>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            border-width: 10px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

46. 边框

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width：不写有默认值，不同浏览器不一样

可以指定四个方向的边框宽度
四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右

另外border-xxx-width可以单独指定一个边的宽度

border-color：不写默认值为color的颜色值，不设置为黑色
可以指定四个方向的边框颜色，四个值情况与宽度一样
另外border-xxx-color可以单独指定一个边的颜色

border-style：不写默认值为none
可以指定四个方向的边框颜色，四个值情况与宽度一样
可以指定边框的样式

solid表示实线
dotted表示点状虚线
dashed表示虚线
double表示双线

另外border-xxx-style可以单独指定一个边的边框样式

对这三个值可以进行简写，如：border：solid 10px orange

<!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>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border-color: red;
            border-style: solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            border-width: 1px 2px 3px 4px;
            border-color: saddlebrown salmon sandybrown;
            border-style: dashed dotted;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            border-width: 5px;
            border-style: solid;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            border: solid 3px red;
            border-right: none;
        }
    </style>
</head>
<body>
    <div class="box1"></div><!-- 边框宽度不写此处默认宽度为1px -->
    <br>
    <div class="box2"></div><!--边框四个方向不同值情况  -->
    <br>
    <div class="box3"></div><!--边框颜色不写默认黑色  -->
    <br>
    <div class="box4"></div><!--只需要三边的样式  -->
    
</body>
</html>

在这里插入图片描述

47. 内边距

内容区和边框之间的距离是内边距

一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left

内边距的设置为影响到盒子的大小
背景颜色会延伸到内边距上

一个盒子可见框的大小，由内容区、内边距和边框共同决定

padding内边距的简写属性，可以同时指定四个方向的内边距
如：padding：10px 20px 30px；

<!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>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px orange solid;

            padding-top: 100px;
            padding-right: 50px;
            padding-bottom: 25px;
            padding-left: 12.5px; 
        }
        .inner{
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
    </div>
</body>
</html>

在这里插入图片描述

48. 外边距

外边距margin不会影响盒子可见框的大小，但是外边距会影响盒子的位置

一共有四个方向的外边距：
margin-top：设置一个正值，元素会往下移动，负值相反
margin-right：设置一个值，会移动其它元素（具体后面章节介绍）
margin-bottom：设置一个正值，会移动其它元素，负值相反
margin-left：设置一个正值，元素会往右移动，负值相反

margin的简写属性，可以设置四个方向的外边距
如：margin：10px 20px 30px；

<!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>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;

            margin-top: -50px;/* 往上移动自己50px */
            margin-right: 10px;/* 右边没有元素，没有生效 */
            margin-bottom: -10px;/* 往上移动下面元素10px */
            margin-left: 10px;/* 往右移动自己10px */
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述
【注意】margin-right默认情况下不会产生任何效果

下一章节将会布局进行实例练习，这么久终于要开始实操了啊，想想都激动！

339+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端零基础入门（四）

本章节对继承、选择器优先级、像素、百分比、em和rem、RGB和RGBA、HSL和HSLA、文档流、盒子模型、边框、内外边距进行了归纳总结，重点为盒子模型，这也是整个HTML布局的关键，需要理解并掌握
复制链接

扫一扫