html5巩固网页组成文字图片视频音频超链接等 web标准结构--html 表现--css 行为--java

highlight: github

网页组成

文字图片视频音频超链接等

web标准

结构--html 表现--css 行为--javaScript

HTML骨架

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>

标签结构及标签关系

<!-- 标签结构 -->
<!-- 双标签 -->
<!-- 例如：p标签 -->
<p>
    内容123
</p>
<!-- 单标签 -->
<!-- 例如：hr 水平线
           br 强制换行 -->
<hr> 
<br>
<!-- 标签关系 -->
<!-- 父子关系 -->
<head>
    <title></title>
</head>
<!-- 兄弟关系 -->
<head></head>
<body></body>

排版标签

标题标签

<h1>
    1级标题
</h1>
<h2>
    2级标题
</h2>
<h3>
    3级标题
</h3>
...
<h6>
    6级标题
</h6>
<!--
没有7级标题
文字依次变小
特点：
独占一行
文字变粗变大
双标签
-->

段落标签

<p>
    123
</p>
<!--
特点：
双标签
独占一行
段落与段落之间存在间隙
自动换行
-->

换行标签与水平线标签

<!--都是单标签
     hr 水平线
     br 强制换行 -->
<hr> 
<br>

文本格式化标签

<!-- 加粗 -->
<b>123</b>
<strong>123</strong>
<!-- 下划线 -->
<u>123</u>
<ins>123</ins>
<!-- 倾斜 -->
<i>123</i>
<em>123</em>
<!-- 删除线 -->
<s>123</s>
<del>123</del>
<!-- 推荐使用单词较长的标签，语义更加强烈 
重点掌握 <strong></strong> <em></em>
-->

图片标签

在网页中显示图片

<img src="url">
<!-- url:图片路径 -->
<!--
图片标签属性:
src:图片的路径,必写属性
alt 替换文本(图片无法加载显示的文本信息)
title 提示文本(鼠标悬停时显示的文本信息)
width:设置图片的宽度
height:设置图片的高度
border:设置边框
-->

路径

绝对路径

以计算机盘符开始的路径

<!-- 盘符开头 -->
    <img src="盘符名称:/目标文件路径" alt="">
    <!-- 网络地址 -->
    <!-- 如果绝对路径是以网络地址
        必须以http://开头或者https://
     -->
    <img src="http://www.itheima.com/images/logo.png" alt="">

相对路径

当前文件：当前的html网页;

目标文件：要找的图片从当前文件开始出发找目标文件的过程

<!--
同级目录
	方法一: 目标文件名称
	方法二:./目标文件名称
下级目录
	方法一: 目标文件夹/目标文件名称
	方法二:./目标文件夹/目标文件名称
上级目录
	上一级
	../目标文件名称
	上两级
	../../目标文件名称
-->

媒体标签

音频

在网页中插入一段音频

<audio src="" controls autoplay loop></audio>
<!--
常见属性:
        src 播放音频的路径
        controls 音频播放控件
        autoplay 音频加载完毕自动播放
        loop:音频结束之后重新开始播放
        音频标签目前支持三种格式：MP3、Wav、Ogg
        推荐使用MP3
-->

视频

在网页中插入一段视频

<video src="" controls autoplay muted loop></video>
<!--
常见属性
        src 视频的播放路径
        controls 显示播放控件
        autoplay 视频加载完毕自动播放 需要配合muted属性实现
        loop 视频结束之后重新开始播放
        视频标签目前支持三种格式：MP4, WebM, 和 Ogg
        推荐使用MP4
-->

链接标签

实现页面跳转

<a href="链接的地址" target="打开方式">链接文本</a>
<!--
  target
	取值
	_self :默认值 覆盖原始窗口
	_blank:保留原始窗口 打开新的窗口    
-->
<!-- 链接的分类 -->
  <h3>1.外部链接</h3>
    <a href="https://www.mi.com/">小米</a>
    <h3>2.内部链接</h3>
    <a href="目标页面地址">跳转当前html页面</a>
    <h3>3. 网页元素链接</h3>
    <a href="https://www.jd.com/"><img src="图片地址" alt=""></a>
    <h3>4.下载链接</h3>
    <!-- 下载链接
        文件名称必须以.exe .zip .rar结尾的后缀名文件
     -->
    <a href="目标文件.zip">下载</a>
    <h3>5.空链接使用#</h3>
    <a href="#">空链接</a>
    <!--   
    特点
	双边标签
	a标签为点击过是蓝色
	a标签点击过是紫色
	a标签有默认的下划线 后期CSS处理
        -->

表单

<!-- 表单域form
	action:提交至目标文件的路径
	method:提交方式
			post
			get
-->
<!--
	label:标签使用方法
	方法一：<label for="happy1">打游戏</label>
        <input type="checkbox" name="happy1" id="happy1">
		for与id必须保持一致
	方法二：<label><input type="checkbox" name="happy1">打游戏</label>
        不需要for和id
        
-->
<!--
    在input标签里面checked属性是指默认选中
    在select>option下拉列表中selected属性是指默认选中
-->
<form action="xx.php" method="get">
        <!-- placeholder属性 占位符，提示用户输入 -->
        昵称：<input type="text" name="username" id="" placeholder="请输入昵称"><br>
        密码：<input type="password" name="password" id="" placeholder="请输入密码"><br>
        性别：<label for="sex">男</label><input type="radio" name="sex" id="sex">
             <label for="sex1">女</label><inputtype="radio" name="sex" id="sex1"><br>
        爱好：<label for="happy">敲代码</label>
        <input type="checkbox" name="happy" id="happy" checked>
        <label for="happy1">打游戏</label>
        <input type="checkbox" name="happy1" id="happy1">
        <label for="happy2">追剧</label>
        <input type="checkbox" name="happy2" id="happy2"><br>
        <!-- type="file"文件上传 multiple属性 多文件上传 -->
        <!-- 文件：<input type="file" name="" id="" multiple><br> -->
        <!-- type="search" 搜索框 -->
        搜索：<input type="search" name="" id="" placeholder="搜索"><br>
        <!-- type="number" 必须为数字 -->
        <!-- 数字：<input type="number" name="" id=""><br> -->
        <!-- 提交按钮 type="submit" -->
        <input type="submit" value="提交"><br>
        <!-- 重置按钮 type="reset" -->
        <input type="reset" value="重置"><br>
        <!-- 普通按钮 type="button" -->
        <input type="button" value="普通按钮"><br>
        <!-- type="time" 时间 -->
        <input type="time" name="" id=""><br>
        <!-- type="date" 日期 -->
        <input type="date" name="" id=""><br>
        <!-- type="color" 颜色选择器 -->
        <input type="color" name="" id=""><br>
        <!-- button类按钮 -->
        <!-- 提交按钮 -->
        <button type="submit">提交</button><br>
        <!-- 重置按钮 -->
        <button type="reset">重置</button><br>
        <!-- 普通按钮 -->
        <button type="button">普通按钮</button><br>
        <!-- 谷歌浏览器默认为提交按钮 -->
        <button>默认为提交按钮</button><br>
        生日：<select>
            <option selected>-请选择年-</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
        </select>年
        <select>
            <option selected>-请选择月-</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
        </select>月
        <select>
            <option selected>-请选择日-</option>
            <option>01</option>
            <option>02</option>
            <option>03</option>
        </select>日<br>
        <!-- 文本域标签 -->
        留言：
        <textarea placeholder="请输入"></textarea>
        <!--
             文本域在网页中不友好，后期用css处理
        -->

    </form>

有语义化标签

<!--
    移动端使用较多
-->
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

有语化标签.png

无语义化标签

div：独占一行（盒子）

span：一行中可以显示多

<!--
    PC端常用的布局方式
-->
<div>
    123
</div>
<span>
    123
</span>

字符实体

空格：
    &npsp;
小于号：
    &lt;
大于号：
    &gt;
版权：
    &copy;

字符实体.png

css

css中文明:层叠式样式表(级联式样式表)

css的作用:美化页面布局页面给html标签添加样式

语法规范

/*选择器{
    属性:属性值
    ...
}
*/

示例代码

<div>
    独占一行
</div>

    div{
        color:red;
    }

引入方式

内嵌式

<!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">
    <link rel="stylesheet" href="./外联式.css">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            color: pink;
            background-color: rgb(255, 0, 0);
        }
    </style>
</head>

<body>
    <!-- <div style="width: 300px; height: 300px; color: pink; background-color: rgb(255, 0, 0);">123</div> -->
    <div>123</div>
</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">
    <!-- <link rel="stylesheet" href="./外联式.css"> -->
    <title>Document</title>
    <style>
        /* div {
            width: 300px;
            height: 300px;
            color: pink;
            background-color: rgb(255, 0, 0);
        } */
    </style>
</head>

<body>
    <div style="width: 300px; height: 300px; color: pink; background-color: rgb(255, 0, 0);">123</div>
    <div>123</div>
</body>

</html>

外联式

新建一个后缀名为.css的文件 2.通过link方式引入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">
    <link rel="stylesheet" href="./外联式.css">
    <title>Document</title>
    <style>
        /* div {
            width: 300px;
            height: 300px;
            color: pink;
            background-color: rgb(255, 0, 0);
        } */
    </style>
</head>

<body>
    <!-- <div style="width: 300px; height: 300px; color: pink; background-color: rgb(255, 0, 0);">123</div> -->
    <div>123</div>
</body>

</html>

选择器

选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她）

基本选择器我们主要讲解：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

语法:

   标签名{
       属性值:属性名;
       ...
   }

示例:

    <div>
        独占一行
    </div>

    div{
        color:red;
    }

类选择器

语法:

    .类名{
       属性值:属性名;
       ...
    }

示例:

    <div class="box">
        独占一行
    </div>

    .box{
        color:red;
    }

注意：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

ID选择器

语法:

    #id名{
       属性值:属性名;
       ...
    }

示例:

    <div id="box1">
        独占一行
    </div>

    #box1{
        color:red;
    }

注意：

以后开发中，我们写样式，首先考虑用类选择器。
id名不可以重复，一个id选择器只能选中一个标签

通配符选择器

示例:

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

注意:通配符选择器一般用来清除内外边距

字体样式

字体粗细

不加粗

    <div>
        字体粗细
    </div>

    div{
        font-weight:400;
        font-weight:normal;
    }

加粗

    <div>
        字体粗细
    </div>

    div{
        font-weight:700;
        font-weight:bold;
    }

字体样式

倾斜

    <div>
        字体样式
    </div>

    div{
        font-style:italic;
    }

不倾斜

    <div>
        字体样式
    </div>

    div{
        font-style:normal;
    }
    /*
        一般用来清除em和i标签倾斜的
    */

字体系列

    font-family:'黑体';

字体连写

    font:字体样式 字体粗细 字体大小 字体系列
    font: italic 700 60px '黑体';
    swsf(是我师傅)
    font:字体大小/行高 字体系列

注意:

必须严格遵循swsf这个顺序,各个属性值之间使用空格隔开.

字体样式字体粗细可以省略,但是必须保留字体大小字体系列

字体连写不能随意颠倒顺序.

文本样式

首行缩进

    text-indent:2em;
    /*1em=当前字体大小 */

文本对齐方式

    text-align:left|center|right

文本装饰

     /* 下划线  tdu*/
    text-decoration: underline;
     /* 删除线 tdl */
     text-decoration: line-through;
    /* 上划线 tdo*/
     text-decoration: overline;
    /* 取消下划线 取消a标签默认的样式 */
     text-decoration: none;

行高

    line-height:40px;
    font:20px/1.5 '黑体';

注意

行高写1.5表示的是倍数,当前字体大小的倍数
行高等于盒子的高度,单行文本会垂直居中
行高小于盒子的高度,单行文本会偏上
行高大于盒子的高度,单行文本会偏下单行文本水平垂直居中:

    <div>单行文本水平垂直居中</div>

    div{
    width:300px;
    height:60px;
    text-align:center;
    line-height:60px;
}

水平居中

    <div>单行文本水平垂直居中</div>

    div{
    width:300px;
    height:60px;
    text-align:center;
    margin:0 auto;
}

注意:

让div里面的内容水平居中:text-align:center;

让div盒子在浏览器水平居中:margin:0 auto;

复合选择器

后代选择器

作用:后代选择器可以选择所有的后代标签包括儿子孙子重孙子等

语法:
    选择器1 选择器2{
             css属性
    }

注意:

选择器与选择器之间由空格隔开
后代选择器最终选择的子代元素或子孙后代
后代选择器可以任意选择基础选择器组合

示例:

    .box div div p{
            color: seagreen;
        }

    <div class="box">
        <div>
            <div>
                <p>123</p>
            </div>
        </div>
    </div>

子代选择器

作用:子代选择器只能选中亲儿子标签(类名)

语法:
    选择器1>选择器2{
             css属性
    }

注意:

自能选中亲儿子
选择器与选择器之间由>隔开示例

    .box>p{
            color: seagreen;
        }

    <div class="box">
          <p>123</p>
    </div>

并集选择器

作用:同时选中多组标签设置相同样式.

语法:
    选择器1,选择器2{
             css属性
    }

示例

    li,
     a {
         color: salmon;
       }

    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

注意:

选择器与选择器之间由逗号隔开
并集选择器中每组选择器习惯竖着写,最后一个选择器的后面千万不要加逗号.
并集选择器每组选择器可以是任意基础选择器或复合选择器的组合

交集选择器

作用:交集选择器可以理解为既又的原则

语法:
    选择器1选择器2{
          css属性
    }

示例

    p.bix{
            color: springgreen;
        }

    <div class="bix">123</div>
    <div>123</div>
    <p>123</p>
    <p class="bix">123</p>

注意:

选择器1与选择器2之间紧挨着,不需要任何符号分隔
交集选择器如果有标签选择器,标签选择器必须放到最前面

:hover伪类选择器

作用:鼠标悬停时候的样式

语法:
    选择器:hover{
          css属性
    }

示例

    .box {
            background-color: red;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: black;
        }

        .box:hover {
            background-color: pink;
            color: seashell;
        }

    <div class="box">
        <p>123</p>
    </div>

注意 :hover选择器可以作用于任何标签 :前后不要加空格

背景属性

背景颜色

    .box {
            width: 500px;
            height: 500px;
            background-color: rgba(255, 0, 0, 1);
        }

        .box div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }

    <div class="box">
        <div></div>
    </div>

背景图片

    background-image: url(图片路径);

背景图片平铺

    背景图片默认会平铺
    /* 默认平铺 */
    background-repeat:repeat;
    /* 取消平铺 */
    background-repeat:no-repeat;
    /* 沿x轴平铺 */
    background-repeat:repeat-x;
    /* 沿y轴平铺 */
    background-repeat:repeat-y;

背景图片位置

    background-position:x y;
取值:
    方位名词:
	水平方位:left|center|right
	垂直方位:top|center|bottom
        方位名词和书写顺序无关系 bottom right与right bottom效果一致
        如果指定了一个方位名词,另外一个省略不写,则默认居中对齐(center)
        background-position: left bottom;
        background-position: center;
        数字+px:
        如果是精确单位 第一个参数是x坐标,第二个参数一定y坐标
        background-position: 20px 30px;
        background-position: 30px 20px;
        混合单位:
        第一个参数表示x坐标 第二个参数表示y坐标
        background-position: 40px top;
         background-position: 50px bottom;

背景连写

    语法:
    background:颜色 url(图片路经) 是否平铺 位置;
    background: pink url(./img/icon.png) no-repeat left center;

背景案例

    <!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>
        .title {
            width: 138px;
            height: 41px;
            font-size: 14px;
            font-weight: 400;
            line-height: 41px;
            /* background-color: pink; */
            /* background-image: url(图片路径);
            background-repeat: no-repeat;
            background-position: left center; */
            background: url(图片路径) no-repeat left center;
            padding-left: 20px;
        }

        .title:hover {
            color: orange;
        }
    </style>

</head>

<body>

    <h3 class="title">成长守护</h3>

</body>

</html>

注意:

img标签应用场景:产品图片

背景图片的应用场景:装饰型的小图片 logo 超大背景图

区别:

img标签可以撑开盒子.

背景图片只是装饰css的样式,不能撑开盒子

以后要使用背景图片,一定要记得设置宽高.

Chorme调试工具

场景一:

场景二:

注意:样式没有显示出来可能是类名写错

元素显示模块

块级元素

特点:

独占一行
宽度默认是父级的宽度,高度由内容撑开
可以设置宽高
代表标签:div p h系列 ul li dl dt dd...

行内元素

特点:

一行显示多个
高宽由内容撑开
设置宽高无效
代表标签:a span strong b i em ...

行内块元素

一行显示多个
可以设置宽高
代表标签:input textarea button...

显示模式转换

目的:修改元素默认显示特点

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

标签嵌套注意事项

块级元素可以嵌套任意元素,反之不要用p标签去包含 div h系列 p.
a标签可以嵌套任意元素,但是不要用a标签包含a标签
a标签可以包含块级元素,但是吐血推荐小伙伴们进行模式转换

CSS的特性

继承

子承父业

子元素可以继承父元素的某些样式.

   /* 以下属性都可以继承 */ 
    color: red;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    font-family: '黑体';
    text-indent: 2em;
    text-align: center;
    line-height: 200px;

注意:控制文字的属性都能继承,不是控制文字的都不能继承.

继承失效:

层叠

相同的选择器设置相同的样式才会有层叠性.

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

权重叠加

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加公式:

行内样式个数 id选择器个数类选择器个数标签选择器个数 0 0 0 0

如果优先级相同,则比较层叠性,谁的样式在后面,谁说了算.

!important如果不是继承,权重最高天下第一

盒子模型

内容区边框内边距外边距

网页的每个元素(标签)都可以理解为盒子.

内容区域

宽高设置内容区域的大小

    width:100px;
    height:100px;

边框

    边框粗细
    border-width:5px;
    边框样式
    border-style:solid|dashed|dotted
    边框颜色
    border-color:red;

边框单方向

    border-top:solid 1px red;
    border-bottom:solid 1px red;
    border-left:solid 1px red;
    border-right:solid 1px red;

边框简写

    border:1px solid #fff;

内边距(padding)

    上右下左
    padding:10px;
    上下 左右
    padding:10px 20px;
    上 左右  下
    padding:10px 20px 30px;
    上右下左
    padding:10px 20px 30px 50px;

内边距单方向设置

    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
    padding-right:10px;

盒子模型终极计算公式

    盒子宽度=左右边框+左右padding+内容宽度
    盒子高度=上下边框+上下padding+内容高度
    边框 padding都会撑大盒子
	1 手动内减 
	2 自动内减

自减盒子模型

    css3盒子模型
    box-sizing: border-box;

不会撑大盒子问题:

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

外边距(margin)

    上右下左
    margin:10px;
    上下 左右
    margin:10px 20px;
    上 左右  下
    margin:10px 20px 30px;
    上右下左
    margin:10px 20px 30px 50px;

外边距单方向设置

清除内外边距

因为部分标签有默认的内外边距,如果不清除,会影响网页布局..

    *{
    margin:0;
    padding:0;
}

版心

网页的可视区域.版心一定要固定的宽度.实际开发固定宽度一旦设置,不要轻易更改.

    .w{
    width:1226px;
    margin:0 auto;
}

外边距折叠现象

外边距正常现象

水平方向的盒子,左右margin正常,互不影响,最终的距离为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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            display: inline-block;
            width: 200px;
            height: 300px;
        }

        .box1 {
            background-color: pink;
            margin-right: 20px;
        }

        .box2 {
            background-color: green;
            margin-left: 30px;
        }

        /* 
        水平布局的盒子,左右margin正常,互不相影响,
        最终的距离为margin左右的和.
        */
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

外边距折叠-合并现象

垂直布局的块级元素，上下的margin会合并最终两者的距离为margin最大值解决方案:实际开发避免即可,只给其中一个盒子设置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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {

            width: 200px;
            height: 300px;
        }

        .box1 {
            background-color: pink;
            margin-bottom: 20px;

        }

        .box2 {
            background-color: green;
            margin-top: 60px;

        }

        /* 
            垂直布局 的 块级元素，上下的margin会合并
            最终两者的距离为margin最大值
            解决方案:实际开发避免即可,只给其中一个盒子设置margin即可

        */
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

外边距折叠现象-塌陷现象

互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

解决方案:

给父元素设置border-top;
给父元素设置padding-top
给父元素设置 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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* border-top: 1px solid #000; */
            /* padding-top: 1px; */
            /* overflow: hidden; */
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            margin-top: 40px;
            background-color: green;

        }

        /*  
        互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
        导致父元素一起往下移动
        解决方案
        1 给父元素设置border-top;
        2 给父元素设置padding-top
        3 给父元素设置 overflow: hidden
        4 转换为行内块元素
        5 设置浮动
        注意:浮动 绝对定位 固定定位的盒子不会有嵌套块级元素塌陷问题.

        */
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

行内元素内外边距无效

注意:

行内元素我们只能给左右的内外边距,不要给上下的内外边距.
路过非要给,请传换为块级元素或者行内元素

    <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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            /* display: inline-block; */
            /* 水平方向 有效 */
            /* margin:0 20px; */
            /* 垂直方向  无效*/
            /* margin: 30px 0; */
            padding: 50px 30px;
        }
    </style>
</head>

<body>
    <a href="#">百度</a>|<a href="#">新浪</a>|<a href="#">谷歌</a><a href="#">小米</a>|
</body>

</html>

结构伪类选择器

作用:根据元素在HTML中的结构关系查找元素(根据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>
    <style>
        /* 选择li里面的第一个孩子  */
        ul li:first-child {
            background-color: pink;
        }

        /* 选择li里面的最后一个孩子 */
        ul li:last-child {
            background-color: blue;
        }

        /* 选择li里面的某个孩子 如果写(5) 就是选择第5个孩子 */
        ul li:nth-child(5) {
            background-color: yellow;
        }

        /*选择倒数第几个孩子  */
        ul li:nth-last-child(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <div>私生子</div> -->
        <li>我是li里面的第1个孩子</li>
        <li>我是li里面的第2个孩子</li>
        <li>我是li里面的第3个孩子</li>
        <li>我是li里面的第4个孩子</li>
        <li>我是li里面的第5个孩子</li>
        <li>我是li里面的第6个孩子</li>
        <li>我是li里面的第7个孩子</li>
        <li>我是li里面的第8个孩子</li>
        <li>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>

</html>

E:nth-child(n) 注意事项:

E:nth-child(n)只能写n,不能写其他字母.写n表示选中所有孩子
E:nth-child(n)不完全取代E:first-child E:last-child n的注意点:

    <!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>
        /* 如果直接写n  表示选中所有的孩子 */
        /* E:nth-child(n) 只能写n  不能写其他字母*/
        /* n为 0 1 2 ..... */
        /* .box li:nth-child(n) {
            background-color: pink;
        } */
        /* n可以直接写 数字  表示选择第几个孩子 */
        /* .box li:nth-child(6) {
            background-color: blue;
        } */
        /* n为关键字  even(偶数 )  odd(奇数)*/
        .box li:nth-child(even) {
            background-color: blue;
        }

        .box li:nth-child(odd) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>我是li里面的第1个孩子</li>
        <li>我是li里面的第2个孩子</li>
        <li>我是li里面的第3个孩子</li>
        <li>我是li里面的第4个孩子</li>
        <li>我是li里面的第5个孩子</li>
        <li>我是li里面的第6个孩子</li>
        <li>我是li里面的第7个孩子</li>
        <li>我是li里面的第8个孩子</li>
        <li>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>

</html>

n的公式:

    <!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>
        /* 2n 表示选中偶数 */
        .box li:nth-child(2n) {
            /* background-color: pink; */
        }

        /* 2n+1 表示选中奇数数 */
        .box li:nth-child(2n+1) {
            /* background-color: blue; */
        }

        /* 3n 表示3的倍数 */
        .box li:nth-child(3n) {
            /* background-color: orange; */
        }

        /* n+5  表示从第5个开始 一直到最后 包含第5个*/
        .box li:nth-child(n+5) {
            /* background-color: orange; */
        }

        /* -n+5 选中前5个 包含第5个 */
        .box li:nth-child(-n+5) {
            background-color: orange;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>我是li里面的第1个孩子</li>
        <li>我是li里面的第2个孩子</li>
        <li>我是li里面的第3个孩子</li>
        <li>我是li里面的第4个孩子</li>
        <li>我是li里面的第5个孩子</li>
        <li>我是li里面的第6个孩子</li>
        <li>我是li里面的第7个孩子</li>
        <li>我是li里面的第8个孩子</li>
        <li>我是li里面的第9个孩子</li>
        <li>我是li里面的第10个孩子</li>
    </ul>
</body>

</html>

伪元素

伪元素就是由css模拟出来的盒子

::before 在父元素内容的最前面添加一个元素

::after 在父元素内容的最后面添加一个元素

注意事项

伪元素必须要指定 content属性

伪元素插入的元素属于行内元素设置宽高无效

伪元素的权重和标签一致 0001

css2伪元素是单冒号

C333伪元素是双冒号

就是伪了区分伪类和伪元素,但是单冒号仍然有效的.

    <!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>
    <!--  伪元素就是由css模拟出来的创建的标签或者盒子-->
    <style>
        /* ::before 在父元素内容的最前面添加一个元素  */
        .box::before {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: orange;
            content: '我是';
        }

        /* ::after 在父元素内容的最后面添加一个元素 */
        .box::after {
            content: '你呢?';
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: pink;
        }

        /* 
        注意事项 
        伪元素必须要指定 content属性
        伪元素插入的元素属于行内元素 设置宽高无效
        伪元素的权重和标签一致 0001
        */
    </style>
</head>

<body>
    <div class="box">pink老师</div>
</body>

</html>

标准流

网页布局：标准流 + 浮动 + 定位

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1.块级元素：从上往下，垂直布局，独占一行

2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动

为什么需要浮动

想要把多个块级元素放在一行显示,打破常规布局.

使用行内元素布局页面有一定的局限性,中间会有空白间隙.

实际开发中盒子之间间隙会有严格的要求哟..

浮动的语法和浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

浮动布局注意事项:

1.浮动一般情况下和标准流的父盒子一起搭配使用.

♥先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2 浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?

♥浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题?

♥浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

一浮全浮

定位

定位>浮动>标准流

可以让盒子随意摆放在网页任意位置

一般用于盒子与盒子层叠

静态定位

静态定位就是标准流,不能通过偏移值设置位移

相对定位

需要配合偏移值设置位移

相对于自身原位置进行移动

占位置,没有脱标

绝对定位

需要配合偏移值进行位移

默认相对浏览器进行位移

如果祖先有定位,侧相对最近有定位的祖先进行位移

不占位置脱离标准流

子绝父相

让子级元素相对父级移动

子级绝对定位,父级相对定位

原因:父级相对定位不脱标,占位置,对后续网页布局影响最小

固定定位

需要配合偏移值实现移动

相对浏览器可视区域进行移动

脱离标准流,在浏览器中不占位置

定位的特殊性

行内元素加了绝对或者固定定位可以设置宽高

块级元素加了绝对或固定位,如果不给宽高那么高宽由内容撑开(宽度不在默认为父级宽度)

嵌套块级元素加了绝对或者固定定位,不会有塌陷问题

元素层级

标准流<浮动<定位

定位的元素层级相同(相对,绝对,固定) (默认情况下定位的盒子后来者居上)

z-index属性可以设置定位元素层级

属性值:整数数字(默认为auto)没有单位

数字越大，层级越高

垂直对齐方式

基线对齐

场景:解决行内/行内块元素垂直对齐问题

vertical-align属性只对行内或行内块元素有效.

/* 默认值基线对齐 */

vertical-align: baseline;

/* 底部对齐 */

vertical-align: bottom;

/*中线对齐 */

vertical-align: middle;

/* 顶部对齐 */

vertical-align: top;

光标类型

场景:设置光标在元素上时显示的样式

属性名:cursor

常用属性值

cursor:pointer(小手,提示用户可以点击)

边框圆角

border-radius

溢出隐藏

(溢出隐藏重点) overflow:hidden

文字溢出显示3个点

单行:

/* 溢出文字强制一行显示 */
    white-space:nowrap;
 /* 溢出部分隐藏 */
 overflow:hidden;
 /* 文字溢出部分用省略号显示 */
 text-overflow:ellipsis;

多行(有兼容性问题):

    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩对象的子元素的排列方式 */
    -webkit-box-orient: vertical;

元素本身隐藏

display:none;(元素隐藏) display:block;(元素显示)

元素整体透明度

opacity:0.5;

属性值:0-1之间的数字

1:表示完全不透明

0:表示完全透明

细线边框

border-collapse:collapse;

css写三角形

设置一个盒子
设置4个不同颜色的边框
将高宽设置为零,只保留边框
将得到的4个三角形保留想要的一个,其他3个设置透明色

选择器扩展

链接伪类选择器

/* 1 未访问过的状态 */
    a:link {
            color: blue;
        }
 /* 2 访问之后的状态 */
        a:visited {
            color: red;
        }
/* 3 鼠标悬停时候的状态 */
        a:hover {
            color: burlywood;
        }
/* 4 鼠标按下未弹起时的状态 */
         a:active {
            color: chartreuse;
        }
 /* 伪类选择器权重是10 */
 /* 如果要实现以上4种伪类选择器生效 必须遵循 LVHA的写法 */

焦点伪类选择器

获取焦点状态

只对表单元素生效

    input:focus {
            background-color: red;
        }

属性选择器

通常借助html属性来选择元素,通常用于input标签

选择具有att属性的E元素。

E[att]{}

选择具有att属性且属性值等于val的E元素。

E[att="val"]{}

    input[type="text"] {
            background-color: pink;
            outline: none;
            border: none;
        }

精灵图

精灵图:

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤:

1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

    <!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>
        span {
            display: inline-block;
            background-image: url(./images/abcd.jpg);
        }

        span:nth-child(1) {
            width: 139px;
            height: 110px;
            background-position: -115px -560px;
        }

        span:nth-child(2) {
            width: 105px;
            height: 115px;
            background-position: -389px -135px;
        }

        span:nth-child(3) {
            width: 110px;
            height: 110px;
            background-position: -215px -140px;
        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
    <span></span>
</body>

</html>

背景图大小

background-size:cover|contain|百分比|数字

    <!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: 1200px;
            height: 300px;
            border: 2px solid red;
            /* background: url(./images/jd.jpg) no-repeat; */
            /* background-size: contain; */
            /* background-size: cover; */
            /* background-size: 15px 15px; */
            /* background-size: 100% 50%; */
            /* 连写 */
            background: pink url(./images/jd.jpg) no-repeat center/100% 50%;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

文字阴影

    text-shadow: 水平阴影 垂直阴影 模糊距离  阴影颜色;
    text-shadow: -8px 0px 9px red;

盒子阴影与过渡

box-shadow:水平阴影垂直阴影模糊距离阴影面积阴影颜色内/外阴影 ;

transition:属性名时间;

    <!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;
            margin: 100px auto;
            background-color: pink;
            transition: all 1s;
        }

        .box:hover {
            box-shadow: 20px 20px 5px 3px grey;
        }

    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>