HTML+CSS前端学习笔记

2024-01-08 22:33:58

HTML标签笔记

1.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>
</head>
<body>
    
</body>
</html>

2.标题标签

<h1>一级标签<h1>
<h2>二级标签<h2>
<h3>三级标签<h3>
<h4>四级标签<h4>
<h5>五级标签<h5>
<h6>六级标签<h6>

3.段落标签和水平线标签

<p>一段文字。。。。。。。。。。。。。。</p>
<hr/>   //水平线标签，在标签内可以设置水平线的属性

4.换行和div span标签

<br/>		//换行标签
<div>div标签</div>
<span>span标签</span>

5.文本格式化标签

<b>文本加粗标签</b>
<strong>文本加粗标签</strong>
-------------------------------
<i>文本斜体标签</i>
<em>文本斜体标签</em>
-------------------------------
<s>删除线标签</s>
<del>删除线标签</del>
-------------------------------
<u>下划线标签</u>
<ins>下划线标签</ins>

6.图像标签

<img src="" title="" width="" />  //src属性表示图片路径、title属性表示鼠标移到图片上后的显示文字、width属性描述图片尺寸

7.链接标签

<a href="" target="_blank"></a>		//href属性填写跳转的地址、target=“_blank” 表示在新界面打开链接
<a href="#"></a>					//表示一个空链接的跳转(暂时没有地方可以跳转可以这么写)
<a href="xxx.html"></a>				//也可以进行内部跳转

8.锚点定位

//1.使用a标签，在标签属性的herf中加入herf="#+id"
//2.在要跳转的标题中加入一个id属性和上面链接标签中的id相对应，就能实现页面内的跳转了。

9.base标签

//1.base标签写在<head>标签内
//2.base标签的作用：设置整体链接的打开状态
<base target="_blank">		//这样写就不用在每个链接标签内加入target属性来设置新窗口打开链接了

10.特殊字符

描述	字符代码
空格符	&nbsp；
小于号	&lt；
大于号	&gt；
和	&amp；
人民币	&yen；
版权	&copy；
注册商标	&reg；
摄氏度	&deg；
正负号	&plusmn；
乘	&times；
除	&divide；
平方2	&sup2；
立方3	&sup3；

11.注释标签

<!-- 这里面是注释的内容 -->

12.相对路径和绝对路径

//1.同一级路径：在同一个文件夹下的文件
//要引用同级路径的文件只要直接输入文件名即可
<img src="xxx.jpg"/>
--------------------------------------------
//2.下一级文件的引用需要用“/”隔开，以当前html文件所在目录为根通过“/”符号找到引用的文件所在的目录完成引用
<img src="images/xxx.jpg"/>		//其中的images文件夹根据实际情况自行命名
--------------------------------------------
//3.上一级文件的引用：如果要引用的文件处于当前html文件的上一级或上几级目录中，通过“../”来表示上一级
<img src="../xxx.jpg"/>
//4.绝对路径：直接在src属性中设置图片的绝对路径
<img src="C:\Users\msi\Pictures\龚俊\IMG_2268(20210623-225601).JPG"/> //这种基本不用

13.列表标签

//1.无序列表
<ul>
	<li>俊子</li>
    <li>张老师</li>
    <li>猫猫狗狗爱*</li>
    <li>俊哲</li>
</ul>
---------------------------------------
//2.有序列表
<ol>
    <li>俊子</li>
    <li>张老师</li>
    <li>猫猫狗狗爱*</li>
    <li>俊哲</li>
</ol>
---------------------------------------
//3.自定义列表
<dl>
    <dt>背景</dt>
    <dd>描述dt标签</dd>
    <dd>可以有多个</dd>
    <dd>描述dt标签</dd>
    <dd>描述dt标签</dd>
</dl>

CSS

1.书写CSS的语法规则

css代码由选择器和一对花括号组成
花括号内由一条一条的声明语句组成
每一句都要用英文状态下的分号隔开
每条语句都是由“属性：值”组成
css中属性的值一般不加引号
在css中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般是px（像素）
在css中不出现HTML标签

2.嵌入式

将css代码嵌入到html文件中，通过一对

<style type="text/css">
    /*书写css代码*/
    
</style>

一般情况下，

3.外联式

创建以**.css**为扩展名的文件
在html文件的head标签内关联css文件

//link标签需要写在html文件的head标签内
<link rel="stylesheet" href="one.css">		//href属性中填写的是要引入的css文件的相对路径

link标签可以有多个，也就是说一个html文件可以关联多个css文件

4.行内式

将css代码写在html标签的style属性内
```
<标签 style="">
```

5.注释

/* 在里面书写注释 */ 
//不要在html中书写css注释 即<!-- -->这种注释

6.选择器

基本选择器

选择器	格式	含义
通用选择器	*{属性：值;}	通用选择器，将匹配HTML所有的标签
标签选择器	标签名{属性:值;}	标签选择器，匹配对应的HTML标签
类选择器	.class属性值{属性:值;}	类选择器，匹配对应的HTML标签
Id选择器	#id属性值{属性:值;}	Id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。id选择器用“#”来定义

/* 通用选择器 */
/* *{
    background-color: cadetblue;
} */

/* 标签选择器 */
ul{
    color: paleturquoise;
}

/* 类选择器 */
.text1{
    color: peru;
}

/* id选择器 */
/* id 的名字必须是唯一的 */
#text2{
    color: seagreen;
}

7.尺寸样式属性

/* 通过类选择器设置尺寸样式 */
.text1{
    color: peru;
    width: 300px;
    height: 300px;
}

标签不能设置宽高属性

8.文本属性

/* 颜色属性 */
color:red/rgb(255,0,0)/#ff0000 /*颜色属性可以使用英文单词表示简单你的颜色；rgb颜色/十六进制表示具体颜色，*/

/*文字位置(居左，居右，居中)*/
text-align:left/right/center

/*文字装饰*/
text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(删除文本修饰线)

/*文字格式转换*/
text-transform:capitalize(将首字母变为大写)/uppercase(将小写转化为大写)/lowercase(将大写转变为小写)

/*文本缩进*/
text-indent:2em(1em表示一个汉字的位移)

9.列表样式属性

 /* 后代元素选择器 */
        .box ul{
            /* 去除小圆点 */
            list-style-type: none;
        }

        .box ul li{
            border:1px solid red;
            /* 将文字居中对齐需要将高度和行高设置成相同的值 */
            height: 35px;
            line-height: 35px;
            
            /* 原点在框框内测or外侧 用的很少 */
            list-style-position: inside;
            
            /* 将前面的小圆点换成自定义的图片 */
            /* 首先将小圆点去除 */
            list-style-type: none;
            /* 再将图片换上去 */
            list-style-image: url(../images/gongjun.JPG);
            
            /* list-style 集成了上述三个属性的全部，用空格隔开。其属性值个数不定，位置也不定 */
            list-style: none  url(../images/gongjun.JPG);
        }

10.伪类选择器

伪类选择器是用来给超级链接的不同状态设置样式

超级链接的不同样式：

正常状态：超级链接没被访问 :link
访问过后状态：超级链接已经被访问 :visited
鼠标放上状态：鼠标放在超级链接，但是没有点击超链接 :hover
激活状态：鼠标已经点击了超链接，但是还没有松开左键 :active

伪类选择器都是带有冒号

 		a:link
		{
            color: red;
        }
        /* visited表示访问过后状态 */
        a:visited{
            color:steelblue;
        }
        /* 表示鼠标返回在超链接标签上的状态 */
        a:hover{
            color: cadetblue;
        }
        /* 表示鼠标点击超链接但是还没抬起左键的状态 */
        a:active{
            color: coral;
        }

tips:如果不按照伪类选择器的顺序设置，就会失效！！！要按照link–>visited–>hover–>active的顺序

11.超链接美化

通常会去掉超链接的下划线，并设置一个颜色

一般情况下将正常状态和访问状态下的颜色设置成一致
鼠标放上去的时候设置成另一种颜色
激活状态一般不设置颜色（激活时间太短，没有太多必要）

/* 使用伪类选择器给超链接设置样式 */
        /* link表示未访问时状态 */
        a:link{
            color: black;
            text-decoration: none;/*取消下划线*/
        }
        /* visited表示访问过后状态 */
        a:visited{
            color:black;
            text-decoration: none;
        }
        /* 表示鼠标返回在超链接标签上的状态 */
        a:hover{
            color: cadetblue;
        }
        /* 表示鼠标点击超链接但是还没抬起左键的状态 */
        /* a:active{
            color: coral;
        } */

12.属性选择器

		/* 通过属性选择器来匹配元素 */
        /* 第一个：[属性名] */
        [align]{
            color: burlywood;
        }
--------------------------------------------
        /* 第二种 [属性名=值] */
        [align="center"]{
            color: cadetblue;
        }
--------------------------------------------
        /* 第三种[属性名^=值] */
		/* 匹配属性值中以xx开头的所有元素 */
        /* 先找到font标签，再匹配color属性值以#FF开头的元素 */
        font[color^="#FF"]{
            border: hotpink 1px solid;
        }
--------------------------------------------
        /* 第四种[属性名$=值] */
		/* 匹配属性值中以xx结尾的所有元素 */
        /* 先找到font标签，再匹配color属性值以#00结尾的元素 */
        font[color$="00"]{
            border: hotpink 1px solid;
        }
---------------------------------------------
		/* 第五种[属性名*=值] */
        /* 匹配包含属性值的所有元素 */
        /* 先找到font标签，再匹配color属性值中含有aa的元素 */
        font[color*="aa"]{
            border: hotpink 1px solid;
        }

13.继承性

内层元素会继承外层元素的样式
当内层元素与外层元素身上的样式相同时，内层元素会覆盖外层元素
当内层元素与外层元素身上的样式不相同时，内层元素不会被覆盖
并不是所有的样式都能被继承，只有文本与字体样式能被继承，其他样式属性都不能被继承

tips：实际工作中，我们往往会给body标签设置字体大小及字体颜色。因为body标签是最外层的。内层会继承外层的样式

14.优先级

类选择器的优先级大于标签选择器
id选择器的优先级大于类选择器
行内样式优先级大于id选择器

一般而言，选择器指向的越准确，优先级就越高，通常情况下，我们使用1表示标签选择器的优先级，用10表示类选择器的优先级，100表示id选择器的优先级，1000表示行内样式优先级。值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合，他们的优先级都可根据选择器的权重相加的形式进行计算，权重越大就表示其优先级越高

15.！important属性

！important主要是用来给属性提高权重的，其属性的权重值为无穷大

/*语法：	属性：值！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 type="text/css">
        p{
            color: steelblue !important ;
        }
        .p1{
            color: tomato;
        }
        #p2{
            color: violet;
        }
    </style>
</head>
<body>
    <p class="p1" id="p2">开开心心浪浪钉</p>
</body>
</html>

16.一个标签可以携带多个类名

举例：

<标签名 class=“值1 值2 值3”></标签名>

每个类名之间用空格隔开

多个类名的优点：

减少css代码量
多个类名的样式会叠加到当前元素上面

<!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 type="text/css">
        .div1{
            font-weight: bold;
        }
        .div2{
            color: tomato;
        }
        /* .div3{
            font-weight: bold;
            color: teal;
        } */
    </style>
</head>
<body>
    <div class="div1">开开心心浪浪钉1</div>
    <div class="div2">开开心心浪浪钉2</div>
    <div class="div2 div1">开开心心浪浪钉3</div>
</body>
</html>

tips:如果一个标签内的多个类名上的样式一样就会出现样式冲突，此时会按照css中的代码为标准，哪个写在后面就以哪个为准

17.背景样式属性

tips:

background-color属性用于给元素设置背景颜色，但前提是这个元素要么有内容，要么有宽高

.box{
           /* 设置背景颜色 */
           background-color: tomato;
           width: 888px;  
       }
       
       .box2{
           /* 设置背景图片 */
           background-image: url(../images/gongjun.JPG);
           width: 2000px;
           height: 1125px;
           /* 设置水平方向平铺 */
           background-repeat: repeat-x;
           /* 设置垂直方向平铺 */
           background-repeat: repeat-y;
           /* 不平铺 */
           background-repeat: no-repeat;
       }

.box{
            width: 1000px;
            height: 600px;
            border: black 1px solid;
            margin-left: auto;
            margin-right:auto;
            background-image: url(../images/gongjun.JPG);
            /* 设置图片不平铺 */
            background-repeat: no-repeat;
            /* background-position属性设置图片的位置 */
            /* 按照right bottom设置则图片出现在右下 */
            /* 水平方向可设置：left center right */
            /* 垂直方向可设置：top center bottom */
            background-position:right bottom ;
            /* background-position还可以用固定值选择图片所处位置 */
            background-position:100px 100px;
            /* background-position还可以用百分比确定图片所处位置  */
            background-position: 50% 50%;
            /* 三种方式可混合使用 */
            background-position: center 50%;
            /* background-attachment属性可以设置背景图片是否固定 */
            background-attachment: fixed;
            /* 简写属性：background */
            /* 可以同时设置多个样式，例如背景颜色，背景图片，背景图片是否平铺等等... */
            background:url(../images/zhuomian.JPG) fixed center center no-repeat
        }

18.背景样式属性案例

<!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>
    <link rel="stylesheet" href="exp2.css">
</head>
<body>

    <div class="box">
        <h2>开开心心浪浪钉</h2>
        <ul>
            <li><a href="#">开开心心浪浪钉，俊哲是真的！！！</a></li>
            <li><a href="#">开开心心浪浪钉，俊哲是真的！！！</a></li>
            <li><a href="#">开开心心浪浪钉，俊哲是真的！！！</a></li>
            <li><a href="#">开开心心浪浪钉，俊哲是真的！！！</a></li>
            <li><a href="#">开开心心浪浪钉，俊哲是真的！！！</a></li>
        </ul>
    </div>
    
</body>
</html>


/* 给body标签设置样式 */
body{
    font-size: 20px;    
    color: coral;
}

/* 给div设置边框 */
.box{
    width: 600px;
    border: 1px black solid;
    margin-left: auto;
    margin-right: auto;
}
/* 设置h2标签的样式 */
.box h2{
    height: 45px;
    line-height: 45px;
    color: cadetblue;
}
/* 去除li前面的小圆点 */
.box ul li{
    list-style-type: none;
    height: 30px;
    line-height: 30px;
    /* 给每一个li标签设置背景图片 */
    background-image: url(../images/ic_daily.png);
    background-repeat: no-repeat;
    background-position: left center;
    /* 左内填充 */
    /* padding属性设置盒子内的内容到边框线的距离 */
    padding-left: 30px;
}
/* 伪类选择器 */
a:link{
    color:darksalmon;
    text-decoration:none;
}
a:visited{
    color: darksalmon;
    text-decoration: none;
}
a:hover{
    color: royalblue;
    font-weight: bold;
}

19.标准文档流

标准文档流：页面上的内容都要遵循规律，从左到右，从上到下排版
空白折叠现象：在body标签内，如果没有使用任何标签，直接键入文字，输入的时候将文字之间用回车隔开，在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>Document</title>
</head>
<body>
    <!-- 空白折叠现象 -->
    文
    本
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAxfp7eR-1626594619738)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210703154634401.png)]

高矮不齐，底部对齐：在页面上显示文字的时候，如果大小不一样，则文字底部对齐，图片如是说。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3GA5gmb-1626594619741)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210703155855222.png)]

20.浮动

当增添浮动属性时，该块脱离文档流，向右浮动，不占用最外层的空间
浮动元素的层级比标准元素高
浮动元素遇到父元素的边框线就会停止浮动、
浮动元素遇到别的浮动元素就会停止浮动
当浮动元素浮动后，父元素不会包裹浮动元素
将行内元素进行浮动后，行内元素就会变成块级元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5pq0EB4-1626594619749)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210703162640792.png)]

<!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 type="text/css">
        .box{
            width: 600px;
            border: brown solid 1px;
            margin-right: auto;
            margin-left: auto;
            
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            /* 给第一个box增加float属性 */
            float: right;
            /* 当增添浮动属性时，该块脱离文档流，向右浮动，不占用最外层的空间 */
            /* 浮动元素遇到父元素的边框线就会停止浮动 */
            /* 浮动元素的层级比标准元素高 */
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: coral;
            float: right;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color:darkslateblue;
            /* float: left; */
        }

        .box2{
            width: 600px;
            border: 1px cornflowerblue solid;
            margin-left: auto;
            margin-right: auto;
        }
        .s1{
            background-color: crimson;
            width: 100px;
            height: 100px;
            float: right;
        }
        .s2{
            background-color: darkorange;
            width: 100px;
            height: 100px;
        }
        .s3{
            background-color: dodgerblue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    <div class="box2">
        <span class="s1">文本1</span>
        <span class="s2">文本2</span>
        <span class="s3">文本3</span>
    </div>
</body>
</html>

21.浮动案例

tips：有些标签有其默认的内填充和外边距，可能会影响界面布局

可使用通用选择器来去除HTML中所有标签的默认内填充和外边距

*{
    margin: 0px;
    padding: 0px;
}

<!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>
    <link rel="stylesheet" href="exp3.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

/* 使用通用选择器去除HTML中所有标签的默认内填充与外边距 */
*{
    margin: 0px;
    padding: 0px;
}
/* 设计的时候从最外层的标签开始设计 */
body{
    background-image: url(../images/zhuomian.JPG);
}

.nav{
    width: 100%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px cornflowerblue solid; */
}

.nav ul {
    list-style:none;
}
.nav ul li{
    /* 把每一个li标签进行浮动 */
    /* li本来是一个块元素标签，将其浮动后就可变为排位一行的样式 */
    float: left;
    /* 因为最外层的盒子宽度时960，其中八个标签，平均下来每个字段占的宽度为120 */
    width: 12.5%;
    height: 50px;
    /* 高度与线宽一致保持垂直居中 */
    line-height: 50px;
    /* 文本居中 */
    text-align: center;
    background: cornflowerblue;
}

/* 美化a标签 */
a:link{
    color: darkorange;
    text-decoration: none;
}
a:visited{
    color: darkorange;
    text-decoration: none;
}
a:hover{
    color: indianred;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EZwh2bsL-1626594619751)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210703165832618.png)]

22.清除浮动

只要有浮动，后必须清除浮动

原因：

经过了浮动的元素，会影响到它下面的元素的排版布局，浮动元素的父元素不会将浮动元素从视觉上包裹

清除浮动的三种方法：

给浮动元素的父元素设置固定的高度 这个方法不建议使用，一个元素的高度一般不手动设置，应该由其中包裹的内容撑高
使用清除浮动的样式属性：clear(这个属性专门用来清除浮动)

clear:right（清除右浮动）

clear:left（清除左浮动）

clear:both（清除两边）一般使用这个属性

一般在最后一个浮动元素的下面新建一个空白的div，空置这个div，它仅用来清除浮动
使用overflow:hidden 这个属性来清除浮动

overflow是一个属性

overflow:hidden本身是用来将溢出的部分隐藏，还能用来清除浮动 该属性一般用于清除列表的浮动

<!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 type="text/css">
        .box{
            width: 600px;
            border: 1px cornflowerblue solid;
            margin-left: auto;
            margin-right: auto;
            /* 方法一：给浮动元素的父元素设置固定高度 */
            /* height: 400px; */
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: crimson;
            /* 向左浮动 */
            float: left;

        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* 向左浮动 */
            float: left;

        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            /* 向右浮动 */
            float: right;
        }
        /* 方法二：使用清除浮动的样式属性 */
        .cls{
            /* clear:both属性用于清除左右浮动 */
            clear: both;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            border: rgb(12, 167, 167) 1px solid;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <!-- 新建空白的div用于清除浮动 -->
        <div class="cls"></div>
    </div>
    <h2>开开心心浪浪钉</h2>
    <!-- 方法三：给浮动元素的父元素设置overflow:hidden的属性 -->
    <ul style="overflow: hidden;">
        <li>俊哲是真的1</li>
        <li>俊哲是真的2</li>
        <li>俊哲是真的3</li>
        <li>俊哲是真的4</li>
        <li>俊哲是真的5</li>
        <li>俊哲是真的6</li>
        <li>俊哲是真的7</li>
        <li>俊哲是真的8</li>
        <li>俊哲是真的9</li>
        <li>俊哲是真的10</li>
    </ul>
    <h2>开开心心浪浪钉</h2>
</body>
</html>

23.padding

padding是 “内填充” 的意思，指的是盒子中间的内容到边框的这一段距离
padding有四个方向，我们可以分别描述4个方向的padding
小属性：
- padding-top：上内填充
- padding-right：右内填充
- padding-bottom：下内填充
- padding-left：左内填充
简写属性：
- padding:20px 表示上下左右四个方向的内填充都是20个像素
- padding:20px 30px 如果填入两个数值，则两个数值按顺序分别表示上下、左右内填充
- padding:20px 30px 40px 如果填入三个数值，则三个数值按顺序分别表示为上、左右、下内填充
- padding:20px 30px 40px 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>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 100px;
            border: coral 1px solid;
            /* 使用小属性来描述内填充 */
            /* 上内填充 */
            padding-top: 20px;
            /* 右内填充 */
            padding-right: 30px;
            /* 下内填充 */
            padding-bottom: 40px;
            /* 左内填充 */
            padding-left: 50px;

        }
        .box2{
            width: 300px;
            height: 100px;   
            border: coral 1px solid;
            /* 使用简写属性描述内填充 */
            /* 如果只有一个数值则表示上下左右四个方向的内填充一致 */
            /* padding:20px; */
            /* 如果输入多个数值，则四个数值对应的内填充方向分别为上、右、下、左 */
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div class="box">开开心心浪浪钉</div>
    <div class="box2">开开心心浪浪钉2</div>
</body>
</html>

24.margin

margin表示 “外边距” 的意思。它是指盒子与盒子之间的距离
margin有四个方向，我们可以通过四个方向对其进行描述
小属性：
- margin-top：上外边距
- margin-right：右外边距
- margin-bottom：下外边距
- margin-left：做外边距
简写属性
- margin：margin的方向与上一节中讲到的padding的方向一致
margin的注意事项：
- 在标准文档流中，竖直方向的margin值不会叠加，它会取较大值
- 横着方向是没有margin的塌陷现象
- 浮动元素没有margin的塌陷现象
margin属性的左右分别设置auto就能实现居中
只有在标准文档流中的盒子才能实现居中（浮动元素不属于标准文档流）
margin属性是用于盒子的水平居中而不是用于文本的对齐方式
- text-align：用于实现文本的水平居中而不能实现盒子的水平居中

tips：塌陷现象指的是设置了margin的值之后不会叠加

<!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 type="text/css">

        body{
            padding: 0;
            margin: 0;
        }
        .box1{
            border:steelblue 1px solid;
            width: 100px;
            height: 100px;
            /* margin: 10px 40px 50px; */
        }
        .box2{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            /* margin: 20px; */
        }
        .test1{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            background-color: crimson;
            /* 下外边距 */
            margin-bottom: 20px;

        }
        .test2{
            border:coral 1px solid;
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            /* 竖直方向的margin不会叠加，会取较大值 */
            margin-top: 40px ;
        }
        /* 横向的margin值是不存在塌陷的现象的 */
        span{
            border: darkgreen 1px solid;
        }
        .s1{
            background-color: darkorange;
            margin-right: 20px;
        }
        .s2{
            background-color: dodgerblue;
            margin-left: 20px;
        }
        /* 浮动元素没有塌陷现象 */
        .box3{
            width: 200px;
            border: orangered 5px solid;
            /* 清除浮动 */
            overflow: hidden;
        }
        .box3 div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: firebrick;
            float: left;
            margin-bottom: 20px;
        }
        .div2{
            background-color: lightskyblue;
            float: left; 
            margin-top: 40px;
        }
        .abc{
            background-color: orangered;
            width: 100px;
            height: 100px;
            /* 左右外边距都设置auto属性则会居中 */
            /* 如果元素没有设置宽度，则该元素会占据父元素的百分之百 */
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="box1">开开心心浪浪钉</div>
    <div class="box2">开开心心浪浪钉</div>
    <div class="test1">开开心心浪浪钉</div>
    <div class="test2">开开心心浪浪钉</div>
    <span class="s1">开开心心浪浪钉</span><span class="s2">开开心心浪浪钉</span>
    <div class="box3">
        <div class="div1">开开心心浪浪钉</div>
        <div class="div2">开开心心浪浪钉</div>
    </div>
    <div class="abc">开开心心浪浪钉</div>
</body>
</html>

25.善于使用父元素的padding而不是子元素的margin

当盒子嵌套盒子的时候，如果要让内层的盒子距离外层的盒子有一定的边距有两种方法：
- 给最外层的盒子加上边框线（实际应用之不常用）
- 使用父元素的padding属性而不是子元素的margin属性

<!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 type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 300px;
            height: 500px;
            background-color: palegreen;
            /* 给content1的父元素也就是a盒子设置padding属性 */
            padding-top: 100px;
        }
        .content1{
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            /* margin-top: 100px ; */
        }




    </style>
</head>
<body>
    <div class="a">
        <div class="content1">开开心心浪浪钉</div>
    </div>
</body>
</html>

margin属性本意用来描述兄弟与兄弟元素之间的关系而不是用于描述父子元素之间的关系，父子间的关系最好使用padding属性

26.border属性

边框也有方向：
- border-top：上边框
- border-left：左边框
- border-right：右边框
- border-bottom：下边框
边框线的样式有多种

<!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 type="text/css">
        ul{
            border: slategrey 1px solid;
            width: 300px;
            margin-right: auto;
            margin-left: auto;
            /* padding-top: 10px; */
        }
        ul li{
            list-style: none;
            margin-top: 10px;
            width: 100px;
            height: 20px;
            margin-left: auto;
            margin-right:auto ;
        }
        .line1{
            border:steelblue 10px dotted;
        }
        .line2{
            border: steelblue 10px dashed;
        }
        .line3{
            border: steelblue 10px solid;
        }
        .line4{
            border: steelblue 10px double;
        }
        .line5{
            border: steelblue 10px groove;
        }
        .line6{
            border: steelblue 10px ridge;
        }
        .line7{
            border: steelblue 10px inset;
        }
        .line8{
            border: steelblue 10px outset;
            margin-bottom: 10px;
        }
    </style>
</head>
    <ul>
        <li class="line1">点边框</li>
        <li class="line2">虚线边框</li>
        <li class="line3">实线边框</li>
        <li class="line4">双实线边框</li>
        <li class="line5">groove边框</li>
        <li class="line6">ridge边框</li>
        <li class="line7">内嵌边框</li>
        <li class="line8">外凸边框</li>
    </ul>
</body>
</html>

27.display属性

display是显示的意思，用来进行 行内元素与块级元素的相互转换 将隐藏的元素显示或者将显示的元素进行隐藏
display这个属性的取值：inline（行内）、block（块级）、none（无）
将一个行内元素的display属性值设置成block后，这个元素就会从行内元素转变成块级元素
- ```
span{
        background-color:crimson ;
        width: 100px;
        height: 100px;
        /* 使用display属性 */
        display: block;
        margin-bottom: 10px;
    }
```
- 注意：如果一个行内元素转化成为块级元素，这个元素就会有块级元素的特点
将一个块级元素的display属性设置成inline后，这个元素就会转变成行内元素
- ```
h2{
       width: 100px;
       height: 100px;
       background-color: salmon;
       /* 将一个块级元素转化为行内元素 */
       display: inline;
   }
```
- 注意：如果一个行内元素转化为块级元素，这个元素就会有块级元素的特点

将一个显示的元素隐藏只需要将display属性设置成none即可

.box{
        width: 100px;
        height: 100px;
        background-color:seagreen;
        margin-top: 20px;
        /* 将display属性设置为none */
        display: none;
    }

28.display综合案例

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>Document</title>
    <link rel="stylesheet" href="exp4.css">
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
    
</body>
</html>

css文件：

/* 使用通用选择器去除HTML中所有标签的默认内填充与外边距 */
*{
    margin: 0px;
    padding: 0px;
}
/* 设计的时候从最外层的标签开始设计 */
body{
    background-image: url(../images/zhuomian.JPG);
}

.nav{
    width: 100%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px cornflowerblue solid; */
}

.nav ul {
    list-style:none;
}
.nav ul li{
    /* 把每一个li标签进行浮动 */
    /* li本来是一个块元素标签，将其浮动后就可变为排位一行的样式 */
    float: left;
    /* 因为最外层的盒子宽度时960，其中八个标签，平均下来每个字段占的宽度为120 */
    width: 12.5%;
    height: 50px;
    /* 高度与线宽一致保持垂直居中 */
    line-height: 50px;
    /* 文本居中 */
    text-align: center;
    background: cornflowerblue;
}
.nav ul li a{
    width: 100%;
    height: 50px;
    /* 转化行内元素为块级元素 */
    display: block;
}

/* 美化a标签 */
a:link{
    color: darkorange;
    text-decoration: none;
}
a:visited{
    color: darkorange;
    text-decoration: none;
}
a:hover{
    color: indianred;
    background: darkslateblue;
}

效果图：
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RyNUDwL5-1626594619752)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210706142404864.png)]

29.position属性

position 在英文中表示位置的意思，它主要用于实现对元素的定位
分为三类：
- position：fixed 固定定位
- position：relative 相对定位
- position：absolute 绝对定位
注意：在使用定位属性时，一定要配合定位的坐标来使用
- left：表示定位的元素离左边多远
- right：表示定位的元素离右边多远
- top：表示定位的元素离上边多远
- bottom：表示定位的元素离下边多远

固定定位：

固定定位元素脱离了标准文档流
固定元素的层级比标准文档流的元素高，所以固定元素会压盖住标准文档流的元素
固定定位元素不再占用空间，他显示的位置不会随着浏览器滚动而滚动
案例一：使用固定定位来实现返回顶部的按钮

<!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 type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        a{
            width: 80px;
            height: 60px;
            display: block;
            text-align: center;
            line-height: 60px;
            background-color: tomato;
            text-decoration: none;
            color: cornsilk;
            font-size: 18px;
            /* 使用固定定位 */
            position: fixed;
            right: 30px;
            bottom: 100px;
        }
    
    
    </style>
</head>
<body>
    <a href="#">返回顶部</a>
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
    <img src="../images/gongjun.JPG" alt="俊俊子">
</body>
</html>

案例截图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZpNKE5fp-1626594619754)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210706151026628.png)]

案例二：使用固定定位固定顶部导航条

<!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 type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 100%;
        height: 60px;
        background-color: #222;
        /* 使用固定定位 */
        position: fixed;
        left: 0;
        top: 0;
    }
    .nav .inner_c{
        width: 1000px;
        height: 60px;
        margin-left: auto;
        margin-right: auto;
        /* background-color: aqua; */
    }
    ul{
        list-style: none;
    }
    ul li {
        float: left;
        width: 12.5%;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    ul li a{
        display: block;
    }
    a:link{
        text-decoration: none;
        color: beige;
    }
    a:visited{
        color: beige;
    }
    a:hover{
        color: rgb(26, 26, 25);
        background: beige;
        font-weight: bold;
        
    }
    body{
        padding-top: 70px;
    }
    
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
            </ul>
        </div>
    </div>
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
    <img src="../images/gongjun.JPG" alt="俊俊">
</body>
</html>

效果截图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3WWNBFx8-1626594619754)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210706155233662.png)]

相对定位：
- 相对定位元素没有脱离标准文档流
- 相对定位元素如果没有设置定位的坐标，则相对定位给元素不改变位置；相对定位元素设置了定位坐标后，会以原来的位置为基准变换位置
- 相对定位元素会将标准文档流的元素盖住
- 相对定位元素可以是负数
- 注意：相对定位元素会在原来位置留下一个坑，很少单独使用，主要是配合绝对定位元素使用
- 案例一：
```
<!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 type="text/css">
    /* 使用属性选择器匹配元素 */
    input[type="text"]{
        font-size: 36px;
    }
    input[type="button"]{
        position: relative;
        top: 4px;
    }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="检测用户名">
</body>
</html>
```
效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScssP1oL-1626594619755)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210706161100524.png)]

绝对定位：

相对于 “祖先定位元素” 进行定位
祖先定位：绝对定位元素会优先查找其父元素是否设置了定位属性，如果有则会以其父元素为基准进行定位，如果其父元素没有设置定位属性，则会继续查找其父元素的父元素，以此类推。如果都没有设置定位属性，则会根据浏览器的窗口进行定位。
绝对定位元素脱离了标准文档流

绝对定位元素不占用空间，会压盖住标准文档流的元素

<!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 type="text/css">
    
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            border: darkcyan 1px solid;
            margin: 100px auto;
            position: relative;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .test1{
            background-color: orangered;
        }
        .test2{
            background-color: goldenrod;
            /* 增添绝对定位属性 */
            position: absolute;
            /* left: 0px; */
            right: 0px;
            top: 0px;
            /* bottom: 0px; */
        }
        .test3{
            background-color: lightseagreen;
        }
    
    </style>
</head>
<body>
    <div class="box">
        <div class="test1">俊俊</div>
        <div class="test2">俊俊</div>
        <div class="test3">俊俊</div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwzYqTKQ-1626594619756)(C:\Users\msi\AppData\Roaming\Typora\typora-user-images\image-20210706163126788.png)]

如果父元素和爷爷元素都有相对定位，则当前绝对定位元素会对其父元素来进行定位
父元素的定位形式可以是固定定位，相对定位，绝对定位 一般情况下使用相对定位属性（子绝父相）

30.定位属性案例

<!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>
    <link rel="stylesheet" href="exp8.css">
</head>
<body>
    <div class="box">
        <span><img src="../images/ic_daily.png" alt="" ></span>
        <div><img src="../images/gongjun.JPG" alt="俊俊" width="308px"></div>
    </div>
    
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 308px;
    height: 308px;
    border: cornflowerblue solid 1px;
    margin: 100px auto;
    position: relative;
}

.box span{
    /* 绝对定位 */
    position: absolute;
    left: 20px;
    top: -20px;
}