前端课堂（三）

馒头@Mm

已于 2022-07-14 10:44:51 修改

阅读量403

点赞数

分类专栏：前端笔记文章标签：前端 html css

于 2022-07-13 23:07:19 首次发布

本文链接：https://blog.csdn.net/yan626413/article/details/125771280

版权

前端笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

css的基本样式

font-size: 设置元素的字体大小

单位：px，像素

text-align：设置文本在元素内水平方向的位置

值：center：水平居中

left / start：水平居左

right / end：水平居右

font-weight：设置字体加粗

值： normal：默认值，定义标准字体

bold：定义加粗文本

bolder：特粗体，相当于strong和b的作用

lighter：定义细体文本

100-900：定义字符的粗细，400相等于默认值normal，700等同与粗体文本

text-decoration：文本装饰

值：none：去除文本装饰，比如a标签的下划线

line-through: 添加删除线

underline：添加下划线

overline：添加顶部线

text-indent: 设置段落首行缩进距离

单位：em：相当于当前元素的字体大小

font-family: 设置字体类型，字体家族

font-style: 设置元素字体风格

值：normal：默认值，标准的字体样式

italic：定义斜体文本

inherit：规定当前元素继承父元素的字体样式

oblique：文本为倾斜的状态

width : 宽度

单位：px，像素

百分比：%，占父元素宽度的百分之多少

注意：当元素没有设置宽度时，块元素宽度时父元素的100%，行内元素宽度靠文本内容撑开

height : 高度

单位：px，像素

百分比：%，占父元素宽度的百分之多少（要父元素在有固定高度的情况下使用）

注意：单元素没有设置宽度时，靠内容撑出高度，内容是浮动元素/绝对定位/固定定位除外

background-color : 设置元素的背景颜色

line-height: 设置行高，行间距

作用：让文本在行间距内垂直居中，不允许使用负值

值：numal：设置合理的行间距

numder：设置数字，此数字会与字体大小相乘来设置行间距

百分比：相当于当前文字大小的百分比进行行间距

letter-spacing : 字间距，设置字符与字符之间的间距

text-transform : 字体转换

值：uppercase：大写英文

lowercase：小写英文

capitalize：单词首字母大写

参考代码（自由复制）

<!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>css的基本样式</title>
    <style>
            font-size: 30px;          
            text-align: center;
            text-align: left;
            text-align: right;
            
        }
        a{
            font-weight:normal;
            text-decoration:underline;
        }
        p{
            text-indent: 2em;
            font-family: "宋体";
            font-style: normal;
            line-height: 2;
        }
        span{
            font-size: 30px;
            color: fuchsia;
        }
        div{
            width: 100%;
            height: 100px;
            background-color: deepskyblue;
        }
        .div1{
            width: 200px;
            height: 400px;
            background-color: aquamarine;
            line-height: 400px;
            /* line-height: numal; */
            /* line-height: 130%; */

        }
        h3{
            letter-spacing: 20px;
            text-transform: uppercase;
        }

    </style>
</head>
<body>
    <h1>css文本样式</h1>
    <a href="https://www.baidu.com/">百度一下</a>
    <p>&emsp;&emsp;所幸皆为美好，所行不负年少。</p>
    <p>&emsp;&emsp;你的生活中，有清晨灿烂的朝阳，傍晚辉煌的<span>暮光</span>，有真心待你的好友，有爱你至深的亲人，有第一场雪时吃的一碗麻辣烫，也有捂在掌心温热的奶茶。你看，这些都是生活赋予你的，简简单单又实实在在的美好</p>
    <div>
    &emsp;&emsp;走到生命的哪一个阶段，都该喜欢那一段时光，完成那一阶段该完成的职责，顺生而行，不沉迷过去，不狂热地期待着未来，生命这样就好。不管正经历着怎样的挣扎与挑战，或许我们都只有一个选择：虽然痛苦，却依然要快乐，并相信未来
    </div>
    <div class="div1">想开一间杂货铺</div>
    <h3>第一行</h3>
    <h3>第二行</h3>
    <h3>want you to be happy. But I want to be the reason.</h3>
</body>
</html>

盒子模型

1 . 什么是盒子模型

盒子模型（Box Model）就是把html元素本身看作是一个矩形盒子，每个矩形都是由内容（content），内边距（padding），边框（border），外边距（margin）组成，每个盒子除了有自己的大小之外，还会影响其他盒子的位置

2 . 盒子的特性：

每个盒子都有四部分组成：内容（content），内边距（padding），边框（border），外边距（margin）

每个属性都包括四部分：上，下，左，右

3 . 标准盒子和怪异盒子模型的表现效果的区别：

（ 1. 标准盒子中的width值的是内容区域（content）的宽度，高值的也是内容区域（content）的高度

标准盒子模型的大小=content+padding+border+margin

（ 2. 怪异盒子模型中width指的内容content+内边距padding+边框border

怪异盒子模型的大小=width（content+padding+border）+margin

元素盒子模型

box-sizing: 盒子模型尺寸的计算；

content-box：默认值，按照标准盒子进行计算。

border-box：计算宽高时按照IE盒模型进行计算。

参考代码（自由复制）

<!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>
    <style>
        #d1{
            width: 50px;
            height: 50px;
            border: 10px solid;
            padding: 10px;
        }
        #d2{
            width: 50px;
            height: 50px;
            border: 10px solid;
            padding: 20px;
            box-sizing: border-box;
        }
        section{
            width: 100%;
            height: 50px;
            border: 5px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <br>
    <div id="d2"></div>

    <section></section>
</body>
</html>

内边距和外边距

1. padding：内边距

作用：能撑大盒子，调整元素内容的位置。

距离：从元素的边框(border)开始到内部的内容(content)之间的距离。

语法结构：

一、属性为padding，通过值控制不同边的内边距。

1.一个值：同时设置四个边的内边距；

2.两个值：分别表示上下、左右内边距；

3.三个值：分别表示上，左右，下内边距；

4.四个值：分别表示上右下左内边距。

二、通过属性 padding-方向控制四个边的内边距，设置单方向内边距。

padding-top: 50px;

padding-right: 50px;

padding-bottom: 50px;

padding-left: 50px;

2. margin：外边距

作用：元素添加外边距后会移动元素的位置，调整元素与元素之间的距离。

距离：从自身的边框开始，到另一个元素边框之间的距离。

语法结构：

一、属性为margin，通过值控制不同边的外边距。

1.一个值：同时设置四个边的外边距；

2.两个值：分别表示上下、左右外边距；

3.三个值：分别表示上，左右，下外边距；

4.四个值：分别表示上右下左外边距。

二、通过属性 margin-方向控制四个边的外边距，设置单方向外边距。

margin-top: 50px;

margin-right: 50px;

margin-bottom: 50px;

margin-left: 50px;

参考代码（自由复制）

<!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>
    <style>
        /* div{
            padding: 50px;
            width: 50px;
            background-color: #ccdf;
        } */

        #div1{
            background-color: #fcf;
            border: solid 1px;
            /* padding: 20px; */
            /* padding: 20px 40px; */
            /* padding: 20px 40px 80px; */
            /* padding: 20px 40px 80px 120px; */
            /* padding-top: 50px;
            padding-right: 50px;
            padding-bottom: 50px;
            padding-left: 50px; */
            /* margin: 50px;
            margin: 50px 100px;
            margin: 50px 100px 150px;
            margin: 50px 100px 150px 200px; */
            margin-top: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            margin-left: 50px;
        }
        .item{
            margin: 10px;
            background-color: #ccf;
            border: #fcf 1px solid;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">123</div>
    <span class="item">第一块</span>
    <span class="item">第二块</span>
</body>
</html>

颜色的取值

1 . 使用颜色名（不建议大规模使用，避免有些颜色浏览器不被解析，不同浏览器对颜色的解析有差异）

2 . 使用百分比：

rgb：三种颜色

三个值为最大值表示白色

三个值为最小值表示黑色

三个值相等显示灰色

3 . 使用数值：

取值范围：0~255

4 . 十六进制：最常用的方法

5 . rgba : 最后一个值控制颜色的透明度

a的取值范围：0-1，0为完全透视，1为完全不透视

参考代码（自由复制）

<!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>
</head>
<style>
    .color_neme{
        color: blue;
    }
    .percentage{
         color: rgb(5%, 99%, 99%);
    }
    .number{
        color: rgb(255, 34, 255);
    }
    .system{
        color: #0000ff;
    }
    .box{
        height: 400px;
        background-color: rgba(255, 0, 0, 1);
    }

</style>
<body>
    <div class="color_name">颜色名</div>
    <div class="percentage">百分比</div>
    <div class="numder">数值</div>
    <div class="system">十进制</div>
    <div class="box">色盘</div>
    
</body>
</html>

元素转换

1 . display : 改变元素的布局方式。

值：

block：将元素转换为块元素。

inline：将元素转换为行元素。

inline-block：将元素转换为行内块元素。

none：隐藏一个元素，隐藏后不会显示。

2 . html标签按照布局方式可分为：

块元素，行元素，行内块元素。

3 . 块元素特点：

1.独占一行；

2.可以设置宽高，

如果不设置宽高，则显示默认宽高，如果也没有默认宽高，这显示为内容的宽高。

3.布局方式默认为块元素：p，h1-h6等。

4 . 行元素特点：

1.不独占一行；

2.不能设置宽高；宽高取决于自身的内容；

多个行元素之间会左右排列；

一行到最后显示不下时会自动换行。

3.布局方式默认为行元素：b，a等。

5.行内块元素特点：

1.不独占一行；

2.可以设置宽高；

3.多个行内块元素之间会左右排列；

4.一行到最后显示不下时会自动换行。

5.布局方式默认为行内块：img，input等。

参考代码（自由复制）

<!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>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        #d2{
            width: 50px;
            height: 50px;
            background-color: rgb(89, 255, 0);
        }
        .bg{
            background-color: aquamarine;
            /* width: 100px;
            height: 100px; */
        }
        button{
            width: 100px;
            height: 100px;
        }

        #d3{
            width: 100px;
            height: 100px;
            background-color: #ccdf;
            margin: 0 auto;
        }
        .container{
            text-align: center;
        }

        .box{
            background-color: cadetblue;
            display: block;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="d1">qwerqwer</div>
    <div id="d2"></div>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <button>确定</button>
    <button>取消</button>

    <div id="d3"></div>

    <p class="container">
        <span class="bg">水平居中</span>
    </p>

    <span class="box">显示为块元素</span>
    <span class="box">显示为块元素</span>
    <span>山东人富商大贾</span>
</body>
</html>