HTML和CSS

璃尔 °

已于 2022-07-14 10:48:01 修改

阅读量923

点赞数 7

分类专栏：前端编程入门文章标签： html css css3

于 2021-07-24 10:47:48 首次发布

本文链接：https://blog.csdn.net/qq_43492477/article/details/118931601

版权

前端编程入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端

一、HTML
二、CSS

一、HTML

1.1 HTML基础

1.1.1 概念

HTML：Hyper Text Markup Language，即：超文本标记语言。
主要是通过html标签（记）对网页中的文本，图片，声音等内容进行描述。

超文本
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言
由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言
html文档后缀名 .html 或者 .htm

1.1.2 基本结构

<!DOCTYPE html><!--告诉浏览器采用哪种编码类型  html5-->
<html lang="en"><!--网站根标签 lang表示language，en:english告诉搜索引擎，这是英文站-->
<head><!--头标签，用来定义头部信、主要用来封装其他位于文档头部的标记-->
	<meta charset="UTF-8"><!--charset定义字符编码方式，如utf-8:包含全世界所有国家需要用到的字符、gb2312:简单中文、GBK:包含全部中文字符繁体、BIG5:繁体中文-->
	<title>Document</title><!--标题标签，用于定义HTML页面的标题-->
</head>
<body><!--体标签，定义页面要显示的内容，包括文字 ，图片 ，视频 ，音频等主要是展示给用户看的-->

</body>
</html>

1.2 开发工具

工具名称	工具logo	下载地址
Sublime Text		http://www.sublimetext.com/3
HBuilder		https://www.dcloud.io/hbuilderx.html
VS code		https://code.visualstudio.com/Download
WebStorm		https://www.jetbrains.com/webstorm/download/

1.3 常用标签

1.3.1 标题标签

    <!-- 标题标签 -->
    <!-- 用于书写在页面中标题的使用h1~h6 数值越大 显示越小 -->
    <!--具有加粗效果，最小字体为16像素、最大字体是42像素-->
    <!-- html在进行解析时如果遇到标签会进行解析操作 根据标签的功能进行内容的设置 -->
    <!-- 如果解析的标签不识别  也会将内容进行展示 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <h7>七级标题</h7>
    <!--七级标题跟没有标签书写一样-->

1.3.2 段落标签

	<!-- 段落标签 -->
    <!-- 对于段落中的内容没有额外的效果设置 -->
    <!-- 唯一设置的是段落的间距 -->
    <p>
        &nbsp;&nbsp;用于一个段落的书写
    </p>
    <p>
        &nbsp;&nbsp;可以通过书写多个段落实现内容在页面的指定格式
    </p>

    <!-- 在html中无论多少个空格与回车都会被解析为一个空格在页面显示 -->
    <!-- 换行我们一般使用<br>标签进行设置  空格我们一般使用转义符&nbsp; -->
    这&nbsp;&nbsp;是没有设置段落的话</br>

1.3.3 换行标签

	<!-- 换行标签 -->
	<br>

1.3.4 水平线标签

	<!-- 水平线标签 -->
	<!-- width设置水平线的水平宽度 -->
	<!-- size设置水平线的垂直宽度，即高度 -->
	<hr size="5" width="500px" color="gray" title="aaa">

1.3.5 列表标签

	<!-- 无序列表 -->
    <!-- 无序指的是没有相应的序号标识 -->
    <!-- type 修改列表前面黑点的样式
         disc 默认为黑色圆形
         square 黑色方形
         circle 空心圆形
     -->
    <ul>
        <li>哈尔滨</li>
        <li>郑州</li>
        <li>长沙</li>
    </ul>
    
    <!-- 有序列表 -->
    <!-- type 序号样式：1、a、A、I、i -->
    <!-- start 初始位置 -->
    <ol type="1" start="2">
        <li>北京</li>
        <li>湖北</li>
        <li>河南</li>
    </ol>

    <!-- 自定义列表 -->
    <!-- 自定义序列的标签 可以多个内容对应一个标题 -->
    <dl>
        <dt>金牌</dt>
        <dd>1、2018年金牌</dd>
        <dd>2、2019年金牌</dd>
        <dt>银牌</dt>
        <dd>1、2018年银牌</dd>
        <dd>2、2018年银牌</dd>
    </dl>

1.3.6 图片标签

	<!-- 图片标签 -->
    <!-- 将图片引入到页面进行展示的标签 图片的类型可以为任意图片类型 -->
    <!-- 
        src:图片的路径（一般书写相对定位）
        alt：当图片加载失败时展示的内容
        width：设置图片显示的宽度（如果只设置了宽度 高度等比例进行设置）
        height：设置图片显示的高度（如果只设置了高低 宽度等比例进行设置）
        title：用于设置标签 鼠标移入后的提示信息（所有标签都可以书写该属性）
    -->
    <img src="../image/pk.gif" alt="没有嘞" width="500px" height="500px" title="设置宽高500"> <br>
    <img src="../image/pk.gif" alt="没有嘞" height="500px" title="设置高500"> <br>
    <img src="../image/pk.gif" alt="没有嘞" width="500px" title="设置宽500"><br>
    <img src="../image/pk.gif" alt="没有嘞" title="没有设置宽高">
    <img src="../image/pk1.gif" alt="没有嘞" title="没有设置宽高">

1.3.7 超链接标签

	<!-- 超链接标签 -->

    <!-- 功能1 -->
    <!-- 书写在网页中，定义跳转连接，当客户点击相应链接跳转到对应地址 -->
    <!-- 注意：需要在a标签设置显示文本 否则页面没有显示 -->
    <!-- 
        href：链接地址标签（必须书写 否则失去超链接标签意义,可以使用#来代表当前页面）
        target：打开样式 ，用于定义打开链接的样式默认在当前窗口中打开_top
            _top：默认 在当前标签页中打开 会替换原标签页内容
            _blank：在新的标签页打开 每次点击都会新建标签页
            _myself：在当前浏览器中打开新的标签页 如果已存在则不打开
        download：下载网页
     -->
    <a href="#">sadasdas</a><br>
    <!-- 可以直接跳转至其他服务页面 但是需要输入完整的url地址 -->
    <a href="https://www.baidu.com" target="_myself">百度一下</a><br>

    <!-- 如果跳转到当前服务页面 可以使用过相对地址的形式进行url书写 -->
    <a href="h1~h6.html" target="_top">查看标题标签</a><br>

    <a href="../day0719/img.html" target="_blank">查看图片标签</a><br>


    <!-- 功能2 -->
    <!-- 书写在页面中 可以进行锚点的定义 使其在页面中进行快速的切换 -->
    <!-- 1.定义锚点 -->
    <!-- 在进行a标签书写时 使用id进行唯一标识 -->
    <!-- 2.跳转锚点 -->
    <!-- 在a标签的url中使用 #锚点id 进行锚点的跳转 -->
    <a href="#d1">第一回 张天师祈禳瘟疫 洪太尉误走妖魔</a><br>
    <a href="#d2">第二回 王教头私走延安府 九纹龙大闹史家村</a><br>
    
    <a href="shz.html#d1" target="_myself">第一回 张天师祈禳瘟疫 洪太尉误走妖魔</a><br>
    <a href="shz.html#d2" target="_myself">第二回 王教头私走延安府 九纹龙大闹史家村</a><br>
	
	<!-- download下载网页 -->
	<a href="shz.txt" download="shz.txt">下载文章</a>

1.3.8 表格标签

1.3.8.1 表格基本属性与标签

    <!-- 表格标签 -->
    <!-- 在页面书写 用于特定格数数据的保存与展示 -->
    <!-- 可以通过表格的形式进行数据的格式展示 -->

    <!-- 表格的根标签 -->
    <!-- 用于包裹当前表格中其他标签 没有特殊语义 -->
    <!-- border设置表格边框线-->
    <!-- cellspacing设置单元格与单元格之间的空白间距 -->
    <!-- cellpadding设置单元格与单元格边框之间的空白间距 -->
    <table border="1" cellspacing="0"  width="500px" height="500px" align="center">
        <!-- 继续书写表格中的二级标签 对表格的数据进行进一步的划分 -->
        <!-- thead -->
        <!-- 表头标签  用于书写定义表格的标题行，开粗居中 -->
        <!-- caption 设置标题，居中于表格之上-->
        <thead>
            <!-- tr 表格行标签 一对tr代表一行数据 -->
            <tr>
                <!-- th 表头标签 每一对代表一个表头 -->
                <th>姓名</th><th>性别</th><th>年龄</th>
            </tr>
        </thead>
        <!-- tbody -->
        <!-- 表格数据标签  用于书写表格中存储的数据行 -->
        <tbody>
            <tr>
            	<!-- tr中只能牵头td，td可以容纳所有元素-->
                <!-- 数据行使用td进行数据包裹 -->
                <td>张三</td><td>男</td><td>18</td>
            </tr>
            <tr>
                <!-- 数据行使用td进行数据包裹 -->
                <td>李四</td><td>男</td><td>18</td>
            </tr>
            <tr>
                <!-- 数据行使用td进行数据包裹 -->
                <td>王五</td><td>男</td><td>18</td>
            </tr>
        </tbody>
        <!-- tfoot -->
        <!-- 表格底部表 用于书写表格底部数据 例如 总和 备注等 -->
        <tfoot>
            <tr><td>备注：</td><td>谨慎修改</td></tr>
        </tfoot>
    </table>

1.3.8.2 跨行跨列属性

    <!-- 跨行跨列属性 -->
    <!-- 在进行表格的书写时 有时需要进行单元格的合并操作 -->
    <!-- 这个时候就需要使用跨行跨列属性 -->
    <!-- rowspan跨行，合并列-->
    <!-- colspan跨列，合并行-->
    <!-- 注意：在html中表格的合并时根据左上的表格进行操作的 并且需要将被合并覆盖的表格对应代码删除 -->
    <table border="1" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td width="100px"></td>
            <td>专业</td>
            <td  width="100px"></td>
            <!-- rowspan跨行 输入当前表格跨行数 -->
            <td rowspan="2"><img src="../image/jrm.jpg" width="100px"></td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td></td>
            <td>联系方式</td>
            <td></td>

        </tr>
        <tr>
            <td>籍贯</td>
            <!-- colspan跨列 输入表格跨列数 -->
            <td colspan="4"></td>
  
        </tr>
        <tr>
            <td colspan=5>工作经历</td>
        </tr>
        <tr>
            <td>1</td>
            <!-- 同时书写跨行与跨列操作 -->
            <td colspan="3" rowspan="2">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>

1.3.8.3 表格优缺点

优点

1.布局简单（因为就是纯表格的区域划分）
2.样式统一（只要确认好第一行的样式，后面的都会跟着变）
缺点

维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

1.3.8.4 表格应用场景

布局简单，变动的可能性比较小的情况下考虑使用表格

例如：登录、注册页，百度新闻的热搜新闻词模块

1.3.9 表单标签

1.3.9.1 基本表单标签

	<!-- 表单标签 -->
    <!-- 是前期后台获取前台数据的重要手段之一
    也可以书写表达进行数据的展示
    -->
    <!-- form是表单的根标签 -->
    <!-- 用于包裹当前标签信息 在进行数据提交时根据当前表单按钮提交当前表单数据 -->
    <!-- action：动作属性属性数据提交的url地址 -->
    <!-- method：表单提交方式 
            get默认 由url地址进行数据传输,提交的数据量比较小，效率高;get方式提交的数据会在地址栏中显示出来，很不安全
            post 将数据进行封装后传输,效率低，安全，携带大量的数据，不会在地址栏中显示
    -->
    <!-- enctype：数据打包方式 
            application/x-www-form-urlencoded 默认 将表单数据进行解析以简单形式进行传输
            multipart/form-data 将数据以二进制流的形式进行传输（）
    -->
    <form action="#" method="get" enctype="application/x-www-form-urlencoded">
        <!-- input输入框 根据不同的type在页面展示不同类型的输入框进行数据的输入 -->
        <!-- 如果进行数据提交必须指定name属性 -->
        <!-- text默认 文本输入框 用于数据文本信息 -->
        账号：<input type="text" name="un" placeholder="提示信息"><br>
        <!-- password 密码输入框 在输入后会使用*代替输入 -->
        密码：<input type="password" name="pwd"><br>
        <!-- radio单选按钮 由于是按钮 所以不能输入数据 需要预先设置value进行数据的设置 -->
        <!-- 并且为了实现单选的功能 必须书写相同的name -->
        <!-- 也可以通过添加checked进行默认选中 -->
        <!-- radio:单选框
					* 注意：
						1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						3. checked属性，可以指定默认值checked
				* checkbox：复选框
					* 注意：
						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						2. checked属性，可以指定默认值checked
		-->
        性别: <input type="radio" name="sex" value="男" checked> 男
        <input type="radio" name="sex" value="女"> 女 <br>
        <!-- checkbox多选按钮 通过可以进行多选 一般设置相同的name -->
        <!-- 如果没有设置value会返回当前多选框的状态 -->
        爱好：<input type="checkbox" name="like" value="cy">抽烟
        <input type="checkbox" name="like" value="hj">喝酒
        <input type="checkbox" name="like" value="tt">烫头<br>
        <!-- 文件选择输入框 在进行文件上传时进行使用 可以在客户端进行文件的选择 -->
        <!-- 注意：文件上传不能使用get -->
        头像上传：<input type="file" name="fname" ><br>
        <!-- image图片提交按钮 -->
        图片框：<input type="image" src="../image/pk.gif" width="100px" >
        <!-- hidden在页面隐藏的标签 需要设置value进行数据的提交 -->
        隐藏域：<input type="hidden" name="yc" value="noneVlaue"><br>
        <!-- button普通按钮 需要书写vlue才能在按钮显示信息 -->
        <input type="button" value="登录">
        <!-- submit提交按钮 如果不书写value默认为提交 -->
        <input type="submit">
        <!-- reset重置按  重置当前表单中的所有输入框为默认状态 -->
        <input type="reset">
    </form>

1.3.9.2 下拉框标签

	<form action="#">
        <!-- 下拉框/选择框 -->
        <!-- 由select以及option选项组成 -->
        <!-- size属性用于设置当前下拉框展示数据的个数 默认为1 -->
        <!-- multiple属性可以使下拉框多选 一般用于size大于1时 -->
        <select name="city" size="5" multiple>
            <!-- option选项标签  用于定义下拉列表的选项信息 -->
            <!-- value定义的选择选项提交时的数据 如果没有书写则与标签内数据相同 -->
            <!-- select默认显示第一个选项 可以selected进行默认选择 -->
            <option>==请选择城市==</option>
            <option value="zz">郑州</option>
            <option value="hrb" selected>哈尔滨</option>
            <option>北京</option>
        </select>
        <input type="submit">
    </form>

1.3.9.3 文本域标签

	<!--  textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。
	-->
	<form action="#">
        <!-- textarea可以在页面输入多行文本 并且通过鼠标拖拽的方式进行放大缩小 -->
          <!-- 多行文本域的大小默认是可以自由扩展的，宽高的自由扩展会影响页面的排版
禁用方式(样式)：
1、指定最大宽高及最小宽高 style='max-width: 200px;min-width: 200px;max-height: 200px;min-height: 200px;'
2、禁止重置大小style="resize: none;"
-->
        <textarea name="wby" cols="30" rows="10">
多行文本域。可以书写多行的文本信息，没有value属性，默认值
与数据直接在两个标签中间进行书写</textarea>
        <input type="submit">
    </form>

	<!-- label 标注标签 -->
	<!-- label：指定输入项的文字描述信息
	注意：
		label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
	-->
    <!-- 通常书写在表单中，用于表单中文字与标签的链接操作 -->
    <input type="checkbox" name="like" id="c1"><label for="c1">抽烟</label>
    <input type="checkbox" name="like" id="c2"><label for="c2">喝酒</label>
    <input type="checkbox" name="like" id="c3"><label for="c3">烫头</label>

	<!-- iframe标签 -->
	<!-- 可以在一个页面中嵌套其他页面的内容 -->
	<!-- 引入其他页面
frameborder：控制是否显示边框线 1显示 0不显示
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
-->
	<iframe src="../day01/常用标签01.html" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>

1.3.10 文本格式化标签

	<b> 标签定义粗体文本</b>
	<strong>定义粗体文本用法和b差不多</strong>
	<i>标签定义斜体文本</i>
	<em>定义强调文本跟斜体差不多</em>
	<s>删除</s>
	<del>删除</del>
	<u>下划线</u>
	<ins>下划线</ins>

1.3.11 注释语法

注释语法：
快捷键：ctr + /
作用

注释内容不会在页面显示，用于解释代码，方便日后查看

1.3.12 span和div

行内标签：inline、可以在同一行显示，设置宽高不生
块级标签：block、效单独占整行（自带换行符），可以设置宽高属性的
行内块标签：inline-bloack、既可以设置宽高，也可以在同一行显示

1.3.13 特殊符号

在这里插入图片描述

二、CSS

CSS：Cascading style sheets层叠样式表。
层叠：多个样式可以作用在同一个html的元素上，同时生效

好处
- 功能强大
- 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率

2.1 CSS引入方式

2.1.1 行内样式

书写在标签中，使用style书写通过样式：值的形式进行样式的操作

	<!-- 行内样式 -->
    <!-- 通过书写在标签中的style书写 书写样式 -->
    <!-- 样式书写的语法为  样式名：值   多个样式使用;分隔 -->
	<!-- 当前设置的样式只有当前标签生效 -->
    <div style="width: 200px; height: 200px; background-color: yellowgreen;">
    </div>

该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护

2.1.2 内部样式(内联样式)

书写在html页面中，使用特点的选择器进行标签选择（可以选择多个标签）进行统一的样式操作
讲页面内容与表现形式进行分离，方便对样式进行统一管理

<style>
  div{
    color:deepskyblue;
    font-size: 20px;
  }
  p{
    color: darkslateblue;
  }
</style>

<div style="color: red;">内联样式，统一管理样式</div>
<div>内联样式，统一管理样式</div>
<div>内联样式，统一管理样式</div>
<hr>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>
<p>样式引入方式，选择性使用，不是一定要用某一种</p>

2.1.3 外部样式(外联样式)

对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可

/*注意：.css文件本身就代表是样式，所以直接写对应的样式即可，不需要有style标签或属性*/
div{
    height: 200px;
    width: 200px;
   background-color: bisque  ;
}

	<!-- 外部样式在书写后需要相应的页面进行引用后才能生效 -->
    <!-- 引入的方式 -->
    <link rel="stylesheet" href="../css/wb.css">

2.2 选择器

2.2.1 简单选择器

基础选择分三种，分别是：标签选择器、class选择器、id选择器

2.2.1.1 标签选择器

标签选择器主要是根据标签的名字进行元素的选择

语法

标签名{}
例如：div{color:red;font-size:20px;}

<style>
    /* 标签选择器 */
    /*  选择指定的标签 进行样式操作 */
    div {
        background-color: grey;
    }
    span {
        background-color: green;
    }
    p {
        background-color: greenyellow;
    }
</style>

<body>
    <div>d1</div>
    <div>d2 </div>
    <p>p1</p>
    <p>p2</p>
    <span>s1</span>
    <span>s2</span>
</body>

2.2.1.2 class选择器

类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置

语法

类名{}
例如：.div-cls{color:red;}

<style>
    /* 类选择器 */
    /* 当对一类具有相同样式的标签进行设置选择使用 */
    /* .类名{} */
    /* .代表类名标识 通过class属性的值进行匹配 */
    .c1{
        background-color: greenyellow;
    }
</style>

<body>
    <div id="d1" class="c1">d1</div>
    <div id="d2">d2 </div>
    <p id="p1" class="c1">p1</p>
    <p id="p2">p2</p>
    <span>s1</span>
    <span class="c1">s2</span>
</body>

2.2.1.3 id选择器

id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）

语法

#id名{}
例如：#div-id{color:red;}

<style>
	/* id选择器 */
    /* 通过标签的唯一id进行标签的选择 */
    /* #id{}进行选择 */
    /* #代表id的识别 如果不写# 会当做标签进行查找 */
    d1{
        background-color: greenyellow;
    }
    #d2{
        background-color: red;
    }
    #p1{
        background-color: blue;
    }
</style>

<body>
    <div id="d1">d1</div>
    <div id="d2">d2 </div>
    <p id="p1">p1</p>
    <!-- 相同的id 也可以被选择 但是不建议书写 -->
    <p id="p1">p2</p>
    <span>s1</span>
    <span>s2</span>
    <d1>aaaa</d1>
</body>

2.2.2 组合选择器

组合选择器是根据元素在页面中的同级关系进行选择

2.2.2.1 后代选择器

后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素

<style>
    /* 后代选择器 */
    /* 在指定选择器下的所有的自定的选择器标签 */
    /* 父选择器 空格 子选择器 */
    
    /* 选择所有在div标签中p标签中的的span标签 */
    div p span{
        background-color: grey;
    }

    /* id为d1的标签中的 class为c1标签中的a标签 */
    #d1 .c1 a{
        background-color: hotpink;
    }
</style>

<body>
    <div>
        <p>ppppp<span>ssssss</span>pppp</p>
        <span>sssss</span>
        <span>s1s1s1<span>s2s2s2</span>s1s1s1s1</span>
    </div>
    ----------------------
    <div> 
        <span>sssss</span>
    </div>
    <a href="">a标签</a>
    <div id="d1">
        <div class="c1">
            <div>
                <div>
                    <div>
                        <div>
                            <!-- 只要a标签在对应的标签内部即可 无需考虑有多少层 -->
                            <a href="">a1标签</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c2"><a href="">a2标签</a></div>
    </div>
</body>

2.2.2.2 子代选择器

<style>
    /* 子代选择器 */
    /* 选择当前选择器下一级选择器匹配内容 */
    /* 首先会根据第一个选择器选择标签 在第一个选择器标签下一级标签中进行第二个选择器的匹配 */
    /* 选择div标签下的子标签中的p标签 */
    div > p{
        background-color: grey;
    }
    /* 选择所有id为d1标签下 的div子标签 */
    #d1>.c1{
        background-color: hotpink;
    }
</style>
<body>
     <div>
         <p>p1</p>
         <span>
             <p>p2</p>
         </span>
     </div>

     <div id="d1">
         <div class="c1">c1</div>
         <div>
            <div class="c1">c2</div>
         </div>
     </div>
</body>

2.2.2.3 相邻选择器

<style>
    /* 相邻选择器 */
    /* 选择与第一个选择器同级相邻的下一个元素选择匹配 */
    
    /* 选择div标签同级的下一个div标签 */
    div + div{
        background-color: hotpink;
    }
    /* 选择id为d1的标签后紧跟着的下一个class为c1的标签 */
    #d1 + .c1{
        background-color: red;
    }
    .c1 + div{
        background-color: green;
    }
</style>
<body>
     <div>
         <p>p1</p>
         <span>
             <p>p2</p>
         </span>
     </div>
     <div id="d1">
         <div class="c1">c1</div>
         <div>
            <div class="c1">c2</div>
         </div>
     </div>
     <span class="c1">ccc</span>
</body>

2.2.2.4 通用兄弟选择器

<style>
    /* 通用兄弟选择器 */
    /* 选择与第一个选择器同级之后的的下一个元素选择匹配 */


    /* 选择id为d1之后的所有同级的span标签 */
    #d1~span {
        background-color: greenyellow;
    }
</style>

<body>
    <span class="c1">ccc1</span>
    <span class="c1">ccc2</span>
    <div id="d1">
        <div class="c1">c1</div>
        <div>
            <div class="c1">c2</div>
        </div>
    </div>
    <div>
        <p>p1</p>
        <span>
            <p>p2</p>
        </span>
    </div>
    <span class="c1">ccc1</span>
    <span class="c1">ccc2</span>
</body>

2.2.3 伪类选择器

<style>
    /* 伪类选择器 */
    /* 根据元素标签特殊的状态进行标签的选择 */
    /* 伪类：指的是在页面正常展示时没有这类的标签 只不过是一些特殊的状态 */
    /* 选择的是相应标签的相应状态 */

    /* 未访问的链接 */
    a:link {
        color: #FF0000;
    }
    /* 已访问的链接 */
    a:visited {
        color: #00FF00;
    }
    /* 鼠标悬停链接 */
    a:hover {
        color: #FF00FF;
    }
    /* 已选择的链接 */
    a:active {
        color: #0000FF;
    }
    div {
        height: 50px;
        width: 200px;
        background-color: hotpink;
    }
    #d1:hover {
        background-color: black;
        color: white;
    }
    /* 当元素获取焦点时 一般使用input*/
    #input1:focus {
        background-color: aquamarine;
    }
    input:disabled {
        background-color: brown;
    }
    /* 选择所有标签中 第n个input */
    /* 获取所有input标签所在标签下的第一个input标签 */
    input:nth-of-type(1) {
        background-color: chartreuse;
    }
    div input:disabled {
        background-color: red;
    }
    td:nth-of-type(1){
        background-color: chartreuse;
    }
    td:nth-of-type(2){
        background-color: red;
    }
    td:nth-of-type(3){
        background-color: aqua;
    }
    tr:hover{
        background-color: chartreuse;
    }
    div:hover+div{
        background-color: red;
        height: 200px;
    }
</style>

<body>
    <!-- a标签默认已经配置了四个伪元素选择 分别设置相应的状态-->
    <a href="#">a标签</a>

    <div id="d1">请将鼠标悬停在我上面
        <input id="input1" type="text"><br>
        <div>
            <input type="text" disabled><br>
        </div>
    </div>
    <input type="text"><br>
    <input type="text" disabled><br>
    <input type="text"><br>
    <input type="text"><br>
    <table border="1">
        <tbody>
            <tr>
                <td>1111</td>
                <td>1111</td>
                <td>1111</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
<hr>
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
</body>

2.2.4 伪元素选择器

<style>
    /* 伪元素选择器 */
    /* 与伪类选择器相同的是 也可以看做是元素内容特定情况下的选择 */
    /* 提供了对标签内容 首字符 或首行操作的方法 也可以进行内容的添加 */

    /* 样式操作 */
    /* 所有div标签中内容的首字符 */
    div::first-letter {
        color: red;
    }
    /* 设置所有div首行内容 */
    div::first-line {
        background-color: palegreen;
    }
    div::selection {
        background-color: pink;
    }
    /* 在前后进行内容的追加 */
    div::after{
        content: "之后添加的内容";
    }
    div::before{
        content: "之前添加的内容";
    }
</style>

<body>
    <div>
        话说大宋仁宗天子在位，嘉??三年三月五更三点，天子驾坐紫宸殿，受百官朝贺。但见：
        祥云迷凤阁，瑞气罩龙楼。含烟御柳拂旌旗，带露宫花迎剑戟。天香影里，玉簪珠履聚丹墀；仙乐声中，绣袄锦衣扶御驾。珍珠帘卷，黄金殿上现金舆；凤羽扇开，白玉阶前停宝辇。隐隐净鞭三下响，层层文武两班齐。

    </div>
    <div>
        当有殿头官喝道：“有事出班早奏，无事卷帘退朝。”只见班部丛中，宰相赵哲，参政文彦博出班奏曰：“目今京师瘟疫盛行，伤损军民甚多。伏望陛下宽恩，省刑薄税，祈禳天灾，救济万民。”天子听奏，急敕翰林院随即草诏：一面降赦天下罪囚，应有民间税赋悉皆赦免；一面命在京宫观寺院，修设好事禳灾。
        不料其年瘟疫转盛。仁宗天子闻知，龙体不安，复会百官计议。向那班部中，有一大臣，越班启奏。天子看时，乃是参知政事范仲淹。拜罢起居，奏曰：“目今天灾盛行，军民涂炭，日夕不能聊生。以愚臣意，要禳此灾，可宣嗣汉天师星夜临朝，就京师禁院修设三千六百分罗天大醮，奏闻上帝，可以禳保民间瘟疫。”仁宗天子准奏。急令翰林学士草诏一道，天子御笔亲书，并降御香一炷，钦差内外提点殿前太尉洪信为天使，前往江西信州龙虎山，宣请嗣汉天师张真人星夜来朝祈禳瘟疫。就金殿上焚起御香，亲将丹诏付与洪太尉，即便登程前去。
        洪信领了圣敕，辞别天子。背了诏书，盛了御香，带了数十人，上了铺马，一行部从，离了东京，取路径投信州贵溪县来。于路上但见：

    </div>
    <div>
        遥山迭翠，远水澄清。奇花绽锦绣铺林。嫩柳舞金丝拂地。风和日暖，时过野店山村；路直沙平，夜宿邮亭驿馆。罗衣荡漾红尘内，骏马驱驰紫陌中。
        且说太尉洪信赍擎御诏，一行人从，上了路途，不止一日，来到江西信州。大小官员出郭迎接。随即差人报知龙虎山上清宫住持道众，准备接诏。次日，众位官同送太尉到于龙虎山下。
        只见上清宫许多道众，鸣钟击鼓，香花灯烛。幢幡宝盖，一派仙乐，都下山来迎接丹诏，直至上清宫前下马。太尉看那宫殿时，端的是好座上清宫。但见：

    </div>
    <div>
        青松屈曲，翠柏阴森。门悬敕额金书，户列灵符玉篆。虚皇坛畔，依稀垂柳名花；炼药炉边，掩映苍松老桧。左壁厢天丁力士，参随着太乙真君；右势下玉女金童，簇捧定紫微大帝。披发仗剑，北方真武踏龟蛇；恿履顶冠，南极老人伏龙虎。前排二十八宿星君，后列三十二帝天子。阶砌下流水潺?，墙院后好山环绕。鹤生丹顶，龟长绿毛。树梢头献果苍猿，莎草内衔芝白鹿。三清殿上，击金钟道士步虚；四圣堂前，敲玉罄真人礼斗。献香台砌，彩霞光射碧琉璃；召将瑶坛，赤日影摇红玛瑙。早来门外祥云见，疑是天师送老君。
        当下上自住持真人，下及道童侍从，前迎后引，接至三清殿上，请将诏书居中供养着。洪太尉便问监宫真人道：“天师今在何处？”住持真人向前禀道：“好教太尉得知，这代祖师，号曰虚靖天师，性好清高，倦于迎送，自向龙虎山顶，结一茅庵，修真养性，因此不住本宫。”太尉道：“目今天子宣诏，如何得见？”真人答道：“容禀：诏敕权供在殿上，贫道等亦不敢开读。且请太尉到方丈献茶，再烦计议。”当时将丹诏养在三清殿上，与众官都到方丈。太尉居中坐下，执事人等献茶，就进斋供，水陆俱备。斋罢，太尉再问真人道：“既然天师在山顶庵中，何不着人请将下来相见，开宣丹诏？”真人禀道：
        “这代祖师，虽在山顶，其实道行非常，能驾雾兴云踪迹不定。贫道等如常亦难得见，怎生教人请得下来？”太尉道：“似此如何得见？目今京师瘟疫盛行，今上天子特遣下官赍捧御书丹诏，亲奉龙香，来请天师，要做三千六百分罗天大醮，以禳天灾。救济万民。似此怎生奈何？”真人禀道：“天子要救万民，只除是太尉办一点志诚心，斋戒沐浴，更换布衣，休带从人，自背诏书，焚烧御香，步行上山礼拜，叩见天师，方许得见。如若心不志诚，空走一遭，亦难得见。”太尉听说，便道：“俺从京师食素到此，如何心不志诚？既然恁地，依着你说，明日绝早上山。”当晚各自权歇。
        次日五更时分，众道士起来，备下香汤，请太尉起来沐浴。
    </div>
</body>

2.2.5 属性选择器

属性选择器是根据元素上已有的属性标识进行选择

语法

[属性名='']{}

<style>
    /* 属性选择器 */
    /* 在html中解析时会对已有特殊功能的标签进行解析，但是也可以想xml一样书写自动定义标签 */
    /* 所以在页面书写过程中我们无法确定是否可以使用该标签（不报错） 同理属性也是一样  */
    /* 对于不同的标签可以书写不同的属性，只不过书写时浏览器无法确定是否拥有该属性，可以在标签书写任意属性 */
    /* 属性选择就是可以通过属性与属性值进行相应标签的选择 */
    
    /* 根据是否拥有指定属性进行选择 */
    *[class]{
        background-color: powderblue;
    }
    /* 选择a标签中 拥有type属性 并且属性值为_blanK标签 */
    a[type="_blank"]{
        background-color: silver;
    }
    /* 选择div标签中拥有class属性 并且包含一个单独的c字符的标签 */
    div[class~="c"]{
        background-color: slateblue;
    }
    /* 选择特殊字符c开头以-分割的标签 */
    *[class|="c"]{
        background-color: red;
    }
    /* 选择以指定字符开头的标签 */
    /* 如果存在多个值 也会获取多个值的首字符判断 */
    *[class^="c"]{
        background-color: teal;
    }
    /* 选择以指定字符结尾的标签 */
    a[type$="k"]{
        background-color: tomato;
    }

    /* 选择属性值包含指定字符的标签 */
    span[class*="a"]{
        background-color: blue;
    }
</style>

<body>
    <div class="c-div" ai>div</div>
    <input type="text" class="c-input" ai>
    <span class="cspan" ai>span</span>

    <a href="#" type="_blank">a标签</a>
    <a href="#" type="_top">a标签</a>
    <a href="#" type="_myself" class="ca">a标签</a>
    <a href="#" type="_blank">a标签</a>

    <div class="a b c d">d1</div>
    <div  class="b c d">d2</div>
    <div  class="c d">d3</div>
    <div  class="d">d4</div>
</body>

2.2.6 通配符

*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能

*{
  color:red;
  font-size:20px;
}

2.2.7 选择器的优先级

在实际开发过程书写页面时，通常为了简便代码的书写，通过选择器快速的对标签进行设置，可是有时在设置时，会出现多个选择器对相同的标签设置不同样式的情况，这个时候就必须根据选择器的优先级进行样式设置

优先级计算方法如下

!important>行内样式>id选择器>类选择器>标签选择器
1000				100 		10 		1

在进行选择器选择时根据使用的选择器计算对应的权重（简略方式），也可以理解为生效范围小的选择器权重大于生效范围大的

注意：上面书写的对应值指的是对应位置的值进制关系不是10 ，权重值类似与0000在进行权重比较时，会从前向后比较如果相同才会继续比较下一位

<link rel="stylesheet" href="../css/wb.css">
<style>

    /* 多个选择器设置相同标签相同样式时 根据权重决定生效样式 */
    /* 解决的是对相同属性样式的设置 */

    /* 标签选择器 */
    /* 权重 1 */
    div{
        height: 200px;
        width: 200px;
        background-color:red;
    }

    /* 类选择器 */
    /* 权重10 */
    .c1{
        background-color: rosybrown;
    }


    /* id选择器 */
    /* 权重100 */
    #i1{
        background-color: seagreen;
    }
    /* 标签选择+id选择 */
    /* 权重101 */
    div#i1{
        background-color: tan;
    }
    /* 权重相同后书写的生效 */
    div#i1{
       background-color: tomato;
    }

    /* 内部样式与外部样式书写权重相同 但是由于一般会在内部样式前引入外部样式*/
    /* 所以在权重相同的情况下 内部样式生效（书写在引用外部样式之后） */

    /* 标签选择器权重1 不能与其他选择器对比 */
    /* 如果需要权重低的标签中设置的属性权重最高可以在属性后书写!important */
    div{
        background-color: violet !important;
    }

</style>


<body>
    <div style="background-color: wheat;" id="i1" class="c1"></div>
</body>

选择器权重明确
1、根据选择器的范围越高权重越低
2、组合选择器进行计算将两个权重相加只不过是简单计算（进制不是10）
3、权重相同以最后书写为主

2.3 CSS盒子模型

盒子模型包括：内容(content)、内边距(padding)、边框(border)、外边距(margin)。
页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际站位，通过F12可以直观的查看到盒子模型。

2.3.1 内容的基础样式

样式名	描述
text-align	行元素水平方向
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-famliy	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

<style>
    div{
        width: 500px;
        background-color:aquamarine;
        text-align: center;
        /* left水平居左  right水平居右 */  
        text-decoration: underline;
        /* 默认none没有下划线  underline使用下划线 */
    }
    p{
        line-height: 20px;
        /* 设置修改行高 */
        font-size: 20px;
        /* 设置修改文字大小 */
        font-weight: 100;
        /* 设置字体宽度 取值为100~900 */
        font-family: "黑体";
        /* 设置文字字体 */
        letter-spacing: 5px;
        /* 设置字符之间间距 */
        word-spacing:10px;
        /* 设置单词之间的间距 */
    }
</style>
<body>
    <div>引言</div>
    <p>
        词曰：hello world i am fine thank you

        试看书林隐处，几多俊逸儒流。虚名薄利不关愁，裁冰及剪雪，谈笑看吴钩。评议前王并后帝，分真伪占据中州，七雄扰扰乱春秋。兴亡如脆柳，身世类虚舟。见成名无数，图名无数，更有那逃名无数。霎时新月下长川，江湖变桑田古路。讶求鱼缘木，拟穷猿择木，又恐是伤弓曲木。不如且覆掌中杯，再听取新声曲度。
    
        诗曰：
    
        纷纷五代乱离间，一旦云开复见天。
    
        草木百年新雨露，车书万里旧江山。
    
        寻常巷陌陈罗绮，几处楼台奏管弦。
    
        人乐太平无事日，莺花无限日高眠。
    </p>
</body>

行高

设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距

p{
  /* 高度 */
  height: 40px;
  /* 设置文本水平方向居中 */
  text-align: center;
  /* 行高设为和高度相同，可让文本在垂直方向居中 */
  line-height: 40px;
  /* 边框粗细为1px，solid实线，颜色为black */
  border: 1px solid black;
}

font字体的复合属性

设置字体大小、颜色、粗细等，简写时要求顺序为加粗、大小、类型

*{
  /* 中间带-的称为复合属性 */
  /* font-size: 18px;
  font-weight: bold;
  font-family: "楷体"; */
  
  /* font: 粗细 大小 类型 */
  font: bold 20px "宋体";
}

2.3.2 border边框

用于设置元素的边框颜色、粗细及样式，也可以单独控制某条边的样式

属性名	描述
border-width	设置边框线宽度
border-style	设置边框线样式
border-color	设置边框线颜色

 <style>
        div{
            height: 200px;
            width: 200px;
             /* 边框样式 需要首先设置 默认为无边框 */
            border-style: double;  /* 双线 */
            border-style: solid;   /* 实线 */
            border-style: dotted;  /* 点线 */
            border-style: dashed;  /* 虚线 */
            border-style: groove;  /* 带有立体效果的线 */

           /* 边框颜色 */
           border-color: yellow;

            /* 边框宽度 */
           border-width: 5px;

           /* 以上其实是边框四个边的通用设置格式 */
           border-top-color: lawngreen;
           border-bottom-color: lemonchiffon;
           
           /* 也提供了对四个边统一快速设置的简化语法 */
           /* 将边框样式 颜色 宽度直接书写（无需考虑位置） */
           border: solid  lemonchiffon 20px;


        }
        div:nth-of-type(1){
            background-color: aquamarine;
        }
        div:nth-of-type(2){
            background-color: brown;
        }
    </style>
    <div></div>
    <div></div>

2.3.4 padding内边距

盒子与内容之间的间距称为内边距，嵌套的两个盒子，以里面的盒子为中心时称为外边距，以外边盒子为中心时称为内边距

属性名	描述
padding:20px 10px 15px 25px;	分别代表上右下左
padding:20px 10px 15px;	分别代表上左右下
padding:20px 10px;	分别代表上下左右
padding:20px;	上下左右

padding在使用时，会将父元素撑开，撑开后会改变元素在页面所占据的位置大小

注意：当使用了内边距之后，宽高减去对应的值，剩下的区域大小仍然能够包裹内容大小，就适合，否则就不适合使用

<style>
    span{
         border: solid black 1px;
         /* 设置内边距 */
         /* padding-left: 10px;
         padding-right: 40px;
         padding-top: 5px;
         padding-bottom: 10px; */

         /* 简化语法 设置上右下左内边距 */
        padding:10px 20px 30px 40px;
        /* 简化语法 设置上 左右 下内边距 */
        padding:10px 20px 30px;
         /* 简化语法 设置上下 左右 内边距 */
        padding:10px 20px;
        /* 简化语法 设置上下左右 内边距 */
        padding:20px;
    }

    div{
        width: 200px;
        height: 200px;
        padding:20px;
        border: solid black 1px;
    }
</style>
<body>
    <span>
        纷纷五代乱离间
    </span>

    <div>

    </div>
</body>

2.3.3 margin外边距

盒子与盒子之间的间距称为外边距，分四个方向（上右下左-顺时针方向）

属性名	描述
margin-left	距离左侧的距离
margin-right	距离右侧的距离
margin-top	距离顶部的距离
margin-bottom	距离底部的距离

注意：当两个相对的元素，一个使用了margin-bottom，另一个使用了margin-top，两者之间的间距取较大值

<style>
    body{
        /* body默认外边距8 但是一般书写时不需要 */
        margin: 0px;
    }
    span{
        border: solid black 1px;
        margin: 10px;
    }
    div{
        border: solid black 1px;
        height: 100px;
        width: 100px;
        margin: 10px;
    }
    div:nth-of-type(2){
        /* 注意：块级同级元素 上下边距取较大值 */
        margin: 20px;
    }

</style>
<body>
   
    <span>s1</span>
    <span>s2</span>
    <div>d1</div>
    <div>d2</div>
</body>

注意：当对父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）

1.不让其作为第一个子元素不合适（添加了空元素有内容时会影响实际的距离）

2.给父元素添加一条边框线不合适（边框线的大小也会影响元素占据的位置大小）

3.使用内边距代替

margin可以设置块元素的水平对齐方式

div{
  margin:0 auto;//让块元素在水平方向居中
}

margin的简写形式

属性名	描述
margin:20px 10px 15px 25px;	分别代表上右下左
margin:20px 10px 15px;	分别代表上左右下
margin:20px 10px;	分别代表上下左右
margin:20px;	上下左右
auto	自适应

注意：margin属性对于行元素而言，margin-left可以使用，上下不生效

2.4 CSS常用样式

2.4.1 background背景

用于设置元素的背景样式，包括背景色、背景图、大小等，背景样式的设置前提是元素有大小

属性名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置
background-origin	设置指定了背景图像的位置区域
background-clip	背景剪裁属性，设置图像从指定位置开始绘制

<style>
    body {
        background-color: aqua;

    }

    div {
        border:solid black  1px;
        background-color: aquamarine;
        height: 300px;
        /* 添加多个背景图片时，不同的背景图像可以用逗号隔开，所有的图片中显示在最顶端的为第一张 */
        background-image: url(../image/pk.gif);
        background-image: url(img_flwr.gif), url(paper.gif);
        /* 设置背景图片不重复 */
        background-repeat: no-repeat;
        /* 设置背景图片x/y重复 */
        /* background-repeat: repeat-y; */

        /* 设置背景图片大小 宽 高  当仅设置宽时高自适应 */
        background-size: 100px;
        /* 一般使用x y 相应位置的预设值进行设置 */
        background-position:center;
        /* 设置背景图片相对浏览器位置操作 */
        /* scroll背景图片随着浏览器滚动 */
        /* fixed 背景图片相对浏览器位置进行固定 */
        background-attachment: fixed;
		
		/* background 简写 */
		/* background: color image repeat attachment position */
		background:#ffffff url('img_tree.png') no-repeat right top;
		/* 多张图片同时设置*/
    	background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    	/* background-origin 属性指定了背景图像的位置区域
    	属性值：
    	content-box 内容区域内可以放置背景图像 
    	padding-box 内边距区域内可以放置背景图像 
    	border-box 边框线区域内可以放置背景图像 */
    	background-origin:content-box;
    	/* background-clip 属性指定了背景从指定位置开始绘制
    	属性值：
    	content-box 内容区域内开始绘制背景图像
    	padding-box 内边距区域内开始绘制背景图像 
    	border-box 边框线区域内开始绘制背景图像 */
    	background-clip: content-box; 
    }
</style>

<body>

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

背景图大小及位置属性都有两个值，不容易区分，建议单独设置

固定背景网页效果实现

<style>
    /* 如果将背景图片定位设置为fixed  背景图片的位置会以当前浏览器窗口进行定位
    但是只有在对应的标签中才会显示
    */
    body{
        margin: 0px;
        height: 100vh;
        width: 100%;
    }
    div{
        height: 100%;
        width: 100%;
        background-attachment: fixed;
    }
    div:nth-of-type(1){
        background-color: blueviolet;
        background-image: url(../image/img-1.jpg);
    }
    div:nth-of-type(2){
        background-color: blue;
        background-image: url(../image/img-2.jpg);
    }

    div:nth-of-type(3){
        background-color: pink;
        background-image: url(../image/img-3.jpg);
    }

    div:nth-of-type(4){
        background-color: yellow;
        background-image: url(../image/img-4.jpg);
    }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

2.4.2 display显示

display用于改变元素的生成类型，从而增加元素的使用方式

属性名	描述
display:none;	隐藏元素
display:block;	将元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

该属性可以修改元素在页面的类型（行级元素、块级元素）

行内元素和块级元素的转换

<style>
    div{
        height: 200px;
        width: 200px;
    }
    div:nth-of-type(1){
        background-color: tomato;
        /* 隐藏元素 使其在页面不可见 */
        display: none;
    }
    div:nth-of-type(2){
        background-color: teal;
        /* 将元素设置为行内元素 */
        display: inline;
    }
    div:nth-of-type(3){
        background-color: red;
    }
    p{
        display: none;
    }
    div:hover~div>p {
        /* 将元素设置为块级元素 */
        display: block;
    }
</style>
<body>
    <div></div>
    <div>1111</div>

    <!-- 鼠标移入下拉框 -->

    <div>
    </div>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</body>

display实现导航栏效果

<ul>
  <li>
    <a href="">首页</a>
  </li>
  <li>
    <a href="">公司简介</a>
  </li>
  <li>
    <a href="">业务方向</a>
  </li>
  <li>
    <a href="">联系方式</a>
  </li>
</ul>

a{
  text-decoration: none;
  color: white;
}
ul{
  list-style: none;
  font-size: 0px;
}

/* 使用inline-block属性后，元素块之间会出现一个间距
方案：将其所在的父元素的font-size设为0，具体的元素字体大小再针对性的设置
*/
ul li{
  display: inline-block;
  width: 120px;
  height: 35px;
  color: white;
  text-align: center;
  line-height: 35px;
  background-color: darkslateblue;
}
ul li{
  font-size: 16px;
}
ul li:hover{
  background-color: #008B8B;
}
ul li:hover a{
  color: #483D8B;
}

2.4.3 visibility可见性

> 控制元素的显示与隐藏

<style>
    div{
        height: 200px;
        width: 200px;
    }

    div:nth-of-type(1){
        background-color: greenyellow;
        /* 将元素隐藏 */
        visibility: hidden;
    }
    div:nth-of-type(2){
        background-color: palevioletred;
    }
</style>
<body>
    <div></div>
    <div></div>
</body>

display属性在隐藏元素时，不占据页面的位置，visibility隐藏后，位置仍然被占据着

2.4.4 float浮动

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

float:left/right

1.浮动后的元素，不论其本身是什么类型的框，都会变成块元素，浮动的元素不会覆盖文本内容

<style>
    div{
        height: 100px;
        width: 100px;
        background-color: burlywood;
    }
    div:nth-of-type(1){
        background-color: peru;
        height: 50px;
        float: left;
    }
    div:nth-of-type(2){
        background-color: yellowgreen;
        height: 50px;
        float: left;
    }
    div:nth-of-type(3){
        background-color: blue;
        height: 50px;
        float: left;
    }
</style>
<body>
   <div>1111</div>
   <div>2222</div>
   <div>3333</div>
   <div>4444</div>
</body>

2.浮动的元素在同一行没有足够的空间显示时，会自动换到下一行

<style>
    div{
        float: left;
        width: 300px;
    }
   
    div:nth-of-type(1){
        background-color: peru;
        height: 800px;
       
    }
    div:nth-of-type(2){
        background-color: yellowgreen;
        height: 400px;
       
    }
    div:nth-of-type(3){
        background-color: blue;
        height: 200px;
    }
    div:nth-of-type(4){
        background-color: turquoise;
        height: 100px;
    }
    div:nth-of-type(5){
        background-color: sandybrown;
        height: 100px;
    }
    div:nth-of-type(6){
        background-color: skyblue;
        height: 100px;
    }

</style>
<body>

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

3.浮动后的元素会遮挡下一个未浮动的元素的区域，但不遮挡内容

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="footer">哈哈</div>

*{
  margin: 0;
}
.header{
  height: 100px;
  background-color: #483D8B;
}
.content{
  /* height: 500px; */
  background-color: #008000;
}
.footer{
  height: 100px;
  background-color: black;
}
.content div{
  float: left;
  width: 33.33%;
  height: 500px;
}
.content .left{
  background-color: #008B8B;
}
.content .center{
  background-color: #A52A2A;
}
.content .right{
  background-color: #B8860B;
}

在这里插入图片描述

清除浮动

语法：clear:left/right/both;

1.给浮动元素所在的父元素设置固定高度（常用，但父元素固定，维护修改不方便）

2.给父元素的末尾添加一个空标签，指定clear属性（不常用，页面中会多出很多空标签，影响浏览器的解析速度）

3.给父元素设置样式overflow，对区域进行剪切处理（不常用，剪切后页面中的内容会丢失）

4.给父元素添加伪类样式（常用方式，推荐）

常用方式（推荐）

 /* 相当于在父元素的末尾添加了一个空的块元素 */
 .clearfix:after{
 display: block;
 clear: both;
 content: ".";
 /* 增强代码的健壮性 */
 height: 0;
 visibility: hidden;
 }

2.4.5 position定位

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行绝对定位

只有在使用定位之后才能通过left、top、right、bottom进行位置的设置

<style>
    body{
        margin: 0px;
    }
    div{
        height: 200px;
        width: 200px;
        background-color: coral;
    }
    div:nth-of-type(1){
        background-color: chartreuse;
        /* 相对于当前浏览器窗口进行定位 最左上为0 0 */
        position:fixed;
        /* 固定定位也会使元素脱离文档流 */
        /* 在使用定位设置后可以使用相应的位置设置 */
        right: 20px;
        top:200px;
    }
    div:nth-of-type(2){
        background-color: darkgray;
        position: relative;
        /* 相对对位 相对于当前元素原位置进行定位 */
        /* 相对定位不会脱离文档流 不会使位置空出 */
        left: 420px;
    }
    div:nth-of-type(2)>span{
        position: relative;
        left: 20px;
    }

    div:nth-of-type(3){
        background-color: darkgreen;
        position: absolute;
        /* 绝对定位会使当前元素脱离文档流让出位置 */
        /* 绝对定位可以看做是特殊的相对定位 */
        /* 相对的是第一个设置定位的父元素的位置 */
        left: 20px;
    }
    div:nth-of-type(3)>span{
        position: absolute;
        left: 20px;
    }
</style>

<body>  
	<div></div>
	<div>
    	<span>11111</span>
	</div>
	<div>
    	<span>22222</span>
	</div>
	<div></div>
	<div></div>
	<div></div>
</body>

堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

<div></div>
<div></div>
<div></div>

div{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
}
div:nth-of-type(1){
  z-index: 1;
  background-color: #008B8B;
}
div:nth-of-type(2){
  z-index: 2;
  background-color: #483D8B;
}
div:nth-of-type(3){
  background-color: #808080;
}

注意：z-index的使用前提是元素必须要有定位属性

2.4.6 圆角效果

控制盒子的四个角的弧度

语法：border-radius

控制的是元素的四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆

<style>
    div{
        height: 400px;
        width: 400px;
        background-color: darkmagenta;
      
    }
    div:nth-of-type(1){
       
        /* 边框圆角 */
        /* 左上圆角 
        border-top-left-radius: 200px;*/
        /* 同时设置四个角弧度 */
        border-radius: 200px;
    }
</style>
<body>
    <div></div>
    <br>
    <div></div>
</body>

绘制其他图形：其他图形

2.4.7 透明效果

透明效果的应用比较广泛，特别是在商城网站中的图片+文字描述

2.4.7.1 背景透明

背景透明只针对背景颜色进行透明

background-color:rgba(x,x,x,x) 透明度在0~1之间

<div>
  <p>五折秒杀秋衣秋裤套装</p>
</div>

div,p{
  margin: 0;
}
div{
  position: relative;
  width: 200px;
  height: 200px;
  color: white;
  margin: 50px auto;
  background-size: cover;
  background-image: url(./timg.jpg);
}
p{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background-color: rgba(0,0,0,0.2);
}

2.4.7.2 整体透明

针对整个元素进行透明，包括该元素的所有子元素

opacity 透明度在0~1之间

<style>
     body{
         margin: 0px;
    }
    div{
        height: 200px;
        width: 200px;
        position: relative;
    }
    div:nth-of-type(1){
        background-color: red;
    }
    div:nth-of-type(2){
        background-color: green;
        /* 设置当前元素透明度 */
        /* 会将当前元素内包含的所有元素设置透明度 */
        opacity: 0.5;
        left: 20px;
    }
    div:nth-of-type(3){
        /* 设置当前背景透明度 */
        /* 不会相应当前元素内容的透明度 */
        background-color: rgba(0, 255, 0, 0.5);
        left: 40px;
    }
</style>
<body>
	<div></div>
	<div><p>大甩卖</p></div>
	<div><p>大甩卖</p></div>
</body>

2.4.8 盒子阴影

对块元素添加阴影效果从而达到视觉效果上的立体感

		div{
			width: 200px;
			height: 200px;
			margin: 50px auto;
			/* 参数一X轴偏移量 参数二Y轴偏移量 参数三阴影模糊程度 
			【参数四阴影扩展半径】 参数五阴影颜色 参数六 inset内阴影 */
			/* 盒阴影 */
            /* 
            border-image: url slice width outset repeat|initial|inherit;
             	slice：图像边界向内偏移
                width：图像边界的宽度
                outset：用于指定在边框外部绘制 border-image-area 的量
                repeat|initial|inherit：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）
             */
            box-shadow: 10px 10px 5px #999;
		}

2.4.9 文本阴影

对文本添加阴影从而达到视觉效果上的立体感

<style>
span{
         /* 用过设置对应的偏移量展示对应的阴影效果 */
         /* 可以通过,分隔设置多个阴影样式 */
       text-shadow: 0px -2px 2px yellow,-1px -2px 2px orange,1px -2px 2px red ,1px -3px 5px red ;
    }
</style>
<body>
	<span>这是一句话</span>
</body>

2.4.10 渐变

线性渐变（linear-gradient）- 向下/向上/向左/向右/对角方向
径向渐变（radial-gradient）- 由它们的中心定义

线性渐变相关属性：background-image

2.4.10.1 线性渐变

从上到下(默认情况下)

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：书写预定义方向(to bottom、to top、to right、to left、to bottom right，等等)。to 渐变的最后方向

从顶部开始的线性渐变，从上到下的颜色渐变

		<!-- 起点是红色，慢慢过渡到蓝色 -->
		<!-- 从上 到 下渐变 -->
	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: linear-gradient(#e66465, #9198e5);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

从左到右

		<!-- 起点是红色，慢慢过渡到黄色 -->
		<!-- 从坐 到 右渐变 -->
	<style>
		#grad {
  			height: 200px;
  			background-image: linear-gradient(to right, red , yellow);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

对角

		<!-- 起点是红色，慢慢过渡到黄色 -->
		<!-- 从左上 到  右下渐变 -->
	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: linear-gradient(to bottom right, red, yellow);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

使用角度

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);
angle：直接书写具体的角度(角度是指水平线和渐变线之间的角度，逆时针方向计算)
0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

		<!-- 起点是红色，慢慢过渡到黄色 -->
	<style>
		
		#grad1 {
    		height: 200px;
    		/* X deg 表示：X为颜色将渐变到的方位 */
    		/* 0deg 表示：从下到上的渐变 */
   	 		background-image: linear-gradient(0deg, red, yellow);
			/* 90deg 表示：从左到右的渐变 */
   	 		background-image: linear-gradient(90deg, red, yellow);
			/* 180deg 表示：从上到下的渐变 */
   	 		background-image: linear-gradient(180deg, red, yellow);
			/* -90deg 表示：从右到左的渐变 */
   	 		background-image: linear-gradient(-90deg, red, yellow);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

使用多个颜色节点

	<style>
		#grad1 {
    		height: 200px;
    		/* 从左到右的 红橙黄绿蓝靛紫七色渐变*/
   	 		background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

使用透明度

		<!-- 起点是rgba(255,0,0,0)，慢慢过渡到rgba(255,0,0,1) -->
	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

重复的线性渐变

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

2.4.10.2 径向渐变

颜色节点均匀分布(默认情况下)

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: radial-gradient(red, yellow, green);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

颜色节点不均匀分布

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: radial-gradient(red 5%, yellow 15%, green 60%);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

设置形状

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape ：circle 圆形、wllipse 椭圆形

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: radial-gradient(circle, red, yellow, green);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

不同尺寸大小关键字的使用

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
size：closest-side、farthest-side、closest-corner、farthest-corner(默认)

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
   	 		background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); 
   	 		background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black); 
   	 		background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); 
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

重复的径向渐变

	<style>
		#grad1 {
    		height: 200px;
   	 		background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
		}
	</style>
	<body>
		<div id="grad1"></div>
	</body>

2.4.11 transform转换

Transform属性应用于元素的2D或3D转换
transform(2D)、transform(3D)

2.4.11.1 2D转换

translate()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素 */
	transform:translate(50px,100px);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

rotate()

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* rotate值（30deg）元素顺时针旋转30度。 */
	transform: rotate(30deg);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

scale()

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 */
	transform: scale(2,3);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

skew()

扭曲元素的形状，将其上边缘向一个方向滑动，底部边缘向相反方向滑动
语法： transform:skew( [,]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度 */
	transform: skew(30deg,20deg);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

matrix()

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素 */
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

2D转换方法

2.4.11.2 3D转换

rotateX()

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* rotateX(120deg) 绕X轴旋转120度 */
	transform: rotateX(120deg);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

rotateY()

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	/* rotateY(130deg) 绕Y轴旋转130度 */
	transform: rotateY(130deg);
}
</style>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>

3D转换方法

2.4.12 transition过渡

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	/* 过渡时间2秒 */
	transition:width 2s;
	/* 添加样式的变换效果，添加的属性由逗号分隔 */
	/* 添加宽、高、转换的过渡效果 */
 	transition: width 2s, height 2s, transform 2s;
}

div:hover
{
	width:300px;
	height: 200px;
	transform: rotate(180deg);
}
</style>
<body>
<div></div>
</body>

2.4.13 @keyframes动画

@keyframes 规则

@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长(如果省略的持续时间，动画将无法运行，因为默认值是0。
)

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	/* 将动画捆绑到元素上，时长为5秒 */
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
/* 设置动画 */
@keyframes myfirst
{
	/* 关键词 "from" 和 "to"，等同于 0% 和 100% */
	/* 0% 是动画的开始，100% 是动画的完成 */
	from {background:red;}
	to {background:yellow;}
}

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
</style>
<body>
<div></div>
</body>

2.4.14 多列

在这里插入图片描述

2.4.15 弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法：flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法：justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start：
  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
- flex-end：
  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
- center：
  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
- space-between：
  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
- space-around：
  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法：align-items: flex-start | flex-end | center | baseline | stretch
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex-wrap
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
- nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
align-content
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
- stretch - 默认。各行将会伸展以占用剩余的空间。
- flex-start - 各行向弹性盒容器的起始位置堆叠。
- flex-end - 各行向弹性盒容器的结束位置堆叠。
- center -各行向弹性盒容器的中间位置堆叠。
- space-between -各行在弹性盒容器中平均分布。
- space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
order

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.second {
    -webkit-order: -1;
    /* 数值小的排在前面 */
    order: -1;
}
</style>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item second">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>

align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法：align-self: auto | flex-start | flex-end | center | baseline | stretch
- auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex
flex 属性用于指定弹性子元素如何分配空间。
语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
- auto: 计算值为 1 1 auto
- initial: 计算值为 0 1 auto
- none：计算值为 0 0 auto
- inherit：从父元素继承
  [ flex-grow ]：定义弹性盒子元素的扩展比率。
  [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  [ flex-basis ]：定义弹性盒子元素的默认基准值。

在这里插入图片描述

2.4.16 响应式效果（了解）

早期页面的开发，需要有前端人员、Android工程师和IOS工程师，因为PC端和移动端的屏幕大小差别比较大，需要针对PC端和移动端分别开发整套项目；从H5出现之后，前端人员在开发PC端可以通过技术奖PC端的页面在IPAD和移动端上都进行自适应，因此前端就变得更加重要了。

自适应方式两种：响应式、弹性盒子；目前基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作

2.4.16.1 手机屏幕的适应

H5的出现可以让PC端的应用直接在手机端进行等比例使用，需要设置其视图模式

<meta name="viewport" content="width=device-width, initial-scale=1">

2.4.16.2 页面自适应

对网页中的元素的大小，根据电脑屏幕的大小进行动态设置，从而达到一种响应式的效果

@media (max-width:900px) {
  div{
    width: 25%;
  }
}
@media (max-width:900px) and (min-width:720px) {
  div{
    width: 50%;
  }
}
@media (max-width:720px) {
  div{
    width: 100%;
  }
}

每日一点点进步
不进则退

璃尔 °

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
11
评论
HTML和CSS

前端一、HTML1.1 Web基础1.1.1 概念1.1.2 软件架构1.1.2.1 C/S架构1.1.2.2 B/S架构1.2 HTML基础1.2.1 概念1.2.2 基本结构1.3 开发工具1.4 常用标签二、CSS三、JavaScript一、HTML1.1 Web基础1.1.1 概念JavaWeb: 使用Java语言开发基于互联网的项目Web是一种分布式的运用框架。1.1.2 软件架构1.1.2.1 C/S架构C/S：Client / Server，客户端 / 服务器端。在
复制链接

扫一扫