投稿
  1. 首页
  2. html-js-css

JavaWeb从入学到入土

树虎 • 2022-6-10 • html-js-css • 阅读 152

JavaWeb从入学到入土,第1张

JavaWeb 1. HTML 1.1 基本语法

注释

<!-注释-->
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>



body>
html>

标签

开始和结束标签

自闭合标签

 <br/>
 换行
 <hr/>
水平分割线

标签的嵌套

<h1><u>文本u>h1>

块级元素:在页面中以块的形式展现，自己独占一行，后面的内容会自动换行。

行内元素:在页面中以行的形式展现，不会换行。 <

div和span

:是一个通用的内容容器，没有特殊语义。一般用来对其它元素进行分组，用于样式化相关的需求。

:是一个通用的行内容器，没有特殊语义。一般被用来编织元素以达到某种样式。

和 标签核心作用是布局页面 1.2 HTML的属性 定义格式 属性名=属性值 属性的规范 同一个标签中属性的名称必须唯一不区分大小写，建议使用小写属性值可以使用单引号或双引号括起来,建议使用双引号 常用属性 class:定义元素的类名，用来选择和访问1特定的元素id:定义元素的唯一标识，在整个文档中必须是唯一的name:定义1元素的名称，一般用于表单数据提交到服务器 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div class="cls">第一个1divdiv>
<div class="cls">第二个1divdiv>
<div id="d1">第三个div>
<div id="d2">第四个div>
<div style="background-color:red">第五个div>
body>
html>
1.3 特殊字符 



    
    Title


本网站有   最终解释权


本网站有    最终解释权
1.4 注释

html的注释

vscode：CTRL+/

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题title>
head>
<body>
    
    
    <strong>文字要变粗strong>
body>
html>
1.5 标签 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

标签关系

父子关系（嵌套关系）兄弟关系（并列关系） 1.5.1 标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签

<h1>
    1级标题
h1>
<h2>
    2级标题
h2>

vs code可以直接敲h1，不需要敲<>

1.5.2 段落标签 在新闻和文章的页面中，用于分段显示代码:

我是一段文字

特点： 段落之间存在间隙独占一行 1.5.3 换行标签 场景:让文字强制换行显示代码
语义:换行特点:单标签让文字强制换行 1.5.4 水平分割线 场景:分割不同主题内容的水平线代码:
语义:主题的分割转换特点:
单标签
在页面中显示一条水平线 1.5.5 文本格化标签

场景:需要让文字加粗、下划线、倾斜、删除线等效果

代码:

标签说明标签说明
b加粗strong加粗
u下划线ins下划线
i倾斜em倾斜
s删除线del删除线

语义:突出重要性的强调语境（用右边单词）

1.5.6 图片标签

场景:在网页中显示图片

代码:

特点:

单标签img标签需要展示对应的效果，需要借助标签的属性进行设置标签名与属性之间必须以空格隔开属性之间没有顺序之分

属性名: alt

属性值:替换文本

当图片加载失败时，才显示alt的文本当图片加载成功时，不会显示alt的文本 
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>Documenttitle>
head>
<body>
    <b>加粗b>
    <br>
    <strong>加粗strong>
    <br>
    <u>下划线u>
    <br>
    <ins>下划线ins>
    <br>
    <i>倾斜i>
    <br>
    <em>倾斜em>
    <br>
    <s>删除线s>
    <br>
    <del>删除线del>
    <br>
    <img src="./10327v.gif" alt="替换文本" >
    
body>
html>

图片标签的title属性

属性名: title

属性值:提示文本

当鼠标悬停时，才显示的文本

注意点: title属性不仅仅可以用于图片标签，还可以用于其他标签

width和height属性

属性名: width和height

属性值:宽度和高度（数字)

注意点:

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形)如果同时设置了width和height两个，若设置不当此时图片可能会变形 

<img src="./10327.gif" alt="替换文本" title="title效果" width="100" height="200">
1.5.7 路径

绝对路径

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>Documenttitle>
head>
<body>
    <img src="D:\pic\OIP-C.jpg" alt="显示不出">
body>
html>

相对路径

相对路径:从当前文件开始出发找目标文件的过程（当前文件=HTML所在的文件夹）

相对路径分类:

同级目录

<img src="目标图片.gif" alt="">
<img src="./目标图片.gif" alt="">

下级目录

<img src="img/目标图片.gif" alt="">

上级目录

<img src="../10327.gif" alt="">
1.5.8 音频标签

场景:在页面中插入音频
代码:常见属性:
属性名
功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持)
loop 循环播放
注意点

音频标签目前只支持三种格式：MP3，wav,ogg

1.5.9 视频标签

src 音频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放)
loop 循环播放

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>Documenttitle>
head>
<body>
    <video src="视频.mp4" controls autoplay muted>video>
    
body>
html>

视频标签目前只支持三种格式：MP4，webm,ogg

1.5.a 链接标签

场景:点击之后，从一个页面跳转到另一个页面

称呼:a标签、超链接、锚链接

代码: 超链接

特点:

双标签，内部可以包裹内容如果需要a标签点击之后去指定页面，需要设置a标签的href属性特点: 
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>Documenttitle>
head>
<body>
    
    <a href="http://www.baidu.com">跳转到百度a>
body>
html>

属性名: target
属性值:目标网页的打开形式
取值
效果
_self 默认值,在当前窗口中跳转（覆盖原网页)
_blank 在新窗口中跳转（保留原网页)

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>Documenttitle>
head>
<body>
    
    <a href="http://www.baidu.com" target="_blank">跳转到百度a>
body>
html>
1.5.b 列表标签 场景:在网页中按照行展示关联性的内容，如:新闻列表、排行榜、账单等特点:按照行的方式，整齐显示内容种类:无序列表、有序列表、自定义列表

无序列表

场景:在网页中表示一组无顺序之分的列表，如:新闻列表。

标签组成:

标签名说明
ul表示无序列表的整体,用于包裹li标签
li表示无序列表的每一项，用于包含每一行的内容

显示特点:
列表的每一项前默认显示圆点标识

注意点:
ul标签中只允许包含li标签

li标签可以包含任意内容

有序列表

场景:在网页中表示一组有顺序之分的列表，如:排行榜。

标签组成:

标签名说明
ol表示有序列表的整体,用于包裹li标签
li表示有序列表的每一项，用于包含每一行的内容

显示特点:
列表的每一项前默认显示序号标识

注意点:
ol标签中只允许包含li标签

li标签可以包含任意内容

自定义列表

场景:在网页的底部导航中通常会使用自定义列表实现。

标签组成:

标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

显示特点:

dd前会默认显示缩进效果

注意点:
dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

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>Documenttitle>
head>
<body>
    <ul>
        无序列表
        <strong><li>水果标签li>strong>
        <li>榴莲li>
        <li>香蕉li>
        <li>苹果li>
    ul>
    <ol>
        有序列表
        <li>第一名li>
        <li>第二名li>
        <li>第三名li>
    ol>
    <dl>
        <dt>帮助中心dt>
        <dd>账户管理dd>
        <dd>购物指南dd>
    dl>
html>
1.5.c 表格标签

场景:在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表

基本标签:

标签名说明
table表格整体。可用于包裹多个tr
tr表格每行，可用于包惠td
td表格单元格，可用于包裹内容

注意点:
标签的嵌套关系: table > tr > td

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>Documenttitle>
head>
<body>
    
    <table border="2" width="500" height="1l00">
        <tr>
            <td>姓名td>
            <td>成绩td>
            <td>评语td>
        tr>
        <tr>
            <td>sbtd>
            <td>100td>
            <td>sbtd>
        tr>
        <tr>
            <td>傻逼td>
            <td>90td>
            <td>sbtd>
        tr>
    table>
body>
html>

表格属性

场景:设置表格基本展示效果

常见相关属性:

属性名属性值效果
border边框宽度
width表格宽度
height表格高度

注意点:

实际开发时针对于样式效果推荐用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>Documenttitle>
head>
<body>
    
    <table border="2" width="500" height="1l00">
        <tr>
            <td>姓名td>
            <td>成绩td>
            <td>评语td>
        tr>
        <tr>
            <td>sbtd>
            <td>100td>
            <td>sbtd>
        tr>
        <tr>
            <td>傻逼td>
            <td>90td>
            <td>sbtd>
        tr>
    table>
body>
html>

表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

其他标签:

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点:
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)

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>Documenttitle>
head>
<body>
    <table border="1">
        <caption><strong>学生成绩单strong>caption>
        <tr>
            <th>姓名th>
            <th>成绩th>
            <th>评语th>
        tr>
         <tr>
            <td>sbtd>
            <td>100td>
            <td>sbtd>
        tr>
        <tr>
            <td>sbtd>
            <td>100td>
            <td>sbtd>
        tr>
        <tr>
            <td>sbtd>
            <td>100td>
            <td>sbtd>
        tr>
        
    table>
body>
html>

表格的结构标签

场景:让表格的内容结构分组，突出表格的不同部分（头部、主体、底部)，使语义更加清晰

结构标签:

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

注意点

表格结构标签内部用于包裹tr标签

表格的结构标签可以省略

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>Documenttitle>
head>
<body>
    <table border="1">
        <caption><strong>学生成绩单strong>caption>
        <thead>
            <tr>
                <th>姓名th>
                <th>成绩th>
                <th>评语th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>sbtd>
                <td>100td>
                <td>sbtd>
            tr>
            <tr>
                <td>sbtd>
                <td>100td>
                <td>sbtd>
            tr>
            <tr>
                <td>sbtd>
                <td>100td>
                <td>sbtd>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td>12td>
                <td>13td>
                <td>14td>
            tr>
        tfoot>
    table>
body>
html>

合并单元格

场景：将水平或垂直多个单元格合并成应该单元格

合并单元格步骤:

明确合并哪几个单元格

通过左上原则，确定保留谁删除谁

上下合并一只保留最上的，删除其他

左右合并一只保留最左的。删除其他

给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan合并单元格的个数跨列合井，将多列的单元格水平合并

注意点:
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨: thead、tbody,tfoot)

1.6 表单标签

应用场景：网页登陆页面与搜索功能

1.6.1 input系列标签

场景:在网页中显示收集用户信息的表单效果，如:登录页、注册页

标签名: input

input标签可以通过type属性值的不同，展示不同效果

type属性值:

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于之后上传文件
inputsubmit提交按钮，用于提交
inputreset重置按钮,用于重置
inputbutton普通按钮,默认无功能,之后配合js添加功能
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>Documenttitle>
head>
<body>
    
    文本框：<input type="text">
    <br>
    
    密码框: <input type="password">
    <br>
    单选框<input type="radio">
    <br>
    多选框<input type="checkbox">
    <br>
    文件选择上传<input type="file">
    <br>
    提交按钮<input type="submit">
    <br>
    重置按钮<input type="reset" >
    <br>
    普通按钮<input type="button">
body>
html>

input系列标签-文本框

场景:在网页中显示输入单行文本的表单控件

type属性值: text

常用属性:

属性名说明
placeholder占位符,提示用户输入内容的文本
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>Documenttitle>
head>
<body>
    
    文本框：<input type="text" placeholder="请输入用户名">
    <br>
    
    密码框: <input type="password" placeholder="密码">
    <br>
    单选框<input type="radio" placeholder="选择">
    <br>
    多选框<input type="checkbox">
    <br>
    文件选择上传<input type="file">
    <br>
    提交按钮<input type="submit">
    <br>
    重置按钮<input type="reset" >
    <br>
    普通按钮<input type="button">
body>
html>

input系列标签-单选框

场景:在网页中显示多选一的单选表单控件

type属性值: radio

常用属性:

属性名说明
name分组,有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked默认选中

注意点:

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input系列标签-文件选择

场景:在网页中显示文件选择的表单控件type

属性值: file

常用属性:

属性名说明
multiple多文件选择
文件选择上传<input type="file">
多文件上传<input type="file" multiple>

input系列标签-按钮

场景:在网页中显示不同功能的按钮表单控件

type属性值:

标签名type属性值说明
inputsubmit提交按钮，点击之后提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,之后配合js添加功能

注意点:

如果需要实现以上按钮功能，需要配合form标签使用form使用方法使用

form标签把表单标签一起包裹起来即可

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>Documenttitle>
head>
<body>
    <form action="">
        用户名：<input type="text">
        <br>
        <br>
        密码：<input type="password">
        <br>
        <br>
        
        <input type="submit">
        
        <input type="reset" >
        
        <input type="button" value="普通按钮"> 
    form>
body>
html>
1.6.2 button按钮标签

场景:在网页中显示用户点击的按钮

标签名: button

type属性值(同input的按钮系列):

标签名type属性值说明
inputsubmit提交按钮，点击之后提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,之后配合js添加功能

注意点:

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容:文字、图片等

1.6.3 select下拉菜单标签

场景:在网页中提供多个选择项的下拉菜单表单控件

标签组成:

select标签:下拉菜单的整体

option标签:下拉菜单的每一项

常见属性:

selected:下拉菜单的默认选中

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>Documenttitle>
head>
<body>
    <select>
        <option >北京option>
        <option >上海option>
        <option >广州option>
        <option selected>成都option>
    select>
body>
html>
1.6.4 textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件

标签名: textarea

常见属性:

cols:规定了文本域内可见宽度rows:规定了文本域内可见行数

注意点:

右下角可以拖拽改变大小实际开发时针对于样式效果推荐用CSS设置 1.6.5 label标签 场景:常用于绑定内容与表单标签的关系标签名: label使用方法①: 使用label标签把内容(如:文本)包裹起来在表单标签上添加id属性在label标签的for属性中设置对应的id属性值 使用方法②: 直接使用label标签把内容(如:文本)和表单标签一起包裹起来需要把label标签的for属性删除即可 
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>Documenttitle>
head>
<body>
    性别：
    <input type="radio" name="gender" id="boy"><label for="boy">男label>
    <label ><input type="radio" name="gender" >女label>
body>
html>
1.7 语义化标签 1.7.1 没有语义的布局标签div和span

场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签:一行只显示一个(独占一行)

span标签:一行可以显示多个

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>Documenttitle>
head>
<body>
    <div>divvdiv>
    <div>lkqediv>
    <span>spanspan>
    <span>spanspan>
body>
html>
1.7.2 有语义的布局标签

场景在HTML5新版本中推出了一些有语义的布局标签供开发者使用（手机端网页开发使用）

标签：

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边框
sectior网页区块
article网页文章

注意点:

以上标签显示特点和div一致，但是比div多了不同的语义

1.8 字符实体

常见字符实体

场景:在网页中展示特殊符号效果时，需要使用字符实体替代结构:&英文;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rt4bp0wA-1653121646199)(C:\Users\xiaosu\AppData\Roaming\Typora\typora-user-images\image-20220414155655351.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>Documenttitle>
head>
<body>
    这个是HTML文件，现在要学        实体字符
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>Documenttitle>
head>
<body>
    <table border="1" width="500" height="300">
        <caption><h1>优秀学生信息表格h1>caption>
        <tr>
            <th>年纪th>
            <th>姓名th>
            <th>学号th>
            <th>班级th>
        tr>
        <tr>
            <th rowspan="2">高三th>
            <th>汉堡th>
            <th>112th>
            <th>1th>
        tr>
        <tr>
            <th>汉堡阁th>
            <th>1120th>
            <th>2th>
        tr>
        <tr>
            <th>评语th>
            <th colspan="3">sbsbth>
        tr>
    table>
body>
html>
2. css

css:层叠样式表(Cascading style sheets)

css语法规则：

css一般写在style标签中,style标签一般写在head标签里面，title标签下面

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>Documenttitle>
    <style>
        /* css注释 */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p{
            /* 文字颜色 */
            color:brown;
            /* 字变大 px:像素*/
            font-size: 30px;
            /* 背景颜色 */
            background-color: blueviolet;
            width: 400px;
            height: 500px;
        }
    style>
head>
<body>  
    <p>这个是p标签p>
body>
html>

css引入方式

内嵌式: CSS写在style标签中

提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式:CSS写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

行内式: CSS写在标签的style属性中

提示:基础班不推荐使用，之后会配合js使用
引入方式书写位置作用范围使用场景
内嵌式css写在style标签中当前位置小案例
外联式css写在单独的css文件中，通过link标签引入多个位置项目中
行内式css写在标签的style属性中当前标签配合js使用
2.1 基础选择器 2.1.1 标签选择器 结构:标签名{ 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>Documenttitle>
    
    <style>
        /* 标签选择器就是以标签签名命名的选择器 */
        p{
            color: rgb(255, 6, 6);
        }
        /* 标签选择器，选中所有的这个标签都生效 */
        
    style>
head>
<body>
    <p>ppppppppppppp>
    <p>11111111111p>
    <p>22222222p>
body>
html>
2.1.2 类选择器 结构: .类名{ css属性名:属性值;}作用:通过类名，找到页面中所有带有这个类名的标签，设置样式注意点: 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头一个标签可以同时有多个类名，类名之间以空格隔开类名可以重复，一个类选择器可以同时选中多个标签 
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>Documenttitle>
    <style>
        .st{
            color:red;
        }
        .pp{
            color: rgb(0, 243, 24);
        }
        .size{
            font-size: 66px;
        }
    style>
head>
<body>
    
    <div class="st size" >22222222222222div>
    <p class="pp">111111111111p>
body>
html>
2.1.3 id选择器

结构:#id属性值{ css属性名:属性值;}

作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点:

所有标签上都有id属性id属性值类似于身份z号码，在一个页面中是唯一的，不可重复的!一个标签上只能有一个id属性值一个id选择器只能选中一个标签 
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>Documenttitle>
    <style>
        /* 定义id选择器 */
        #aa{
            color: blue;
            font-size: 90px;
        }
    style>
head>
<body>
    <p id="aa">1111111111111p>
    <p>
        2222222222222222
    p>
body>
html>
2.1.4 通配符选择器 结构:* { css属性名:属性值;}作用:找到页面中所有的标签，设置样式注意点: 开发中使用极少，只会在极特殊情况下才会用到在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解) 
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>Documenttitle>
    <style>
        *{
            color: brown;
            font-size: 30px;
        }
    style>
head>
<body>
    <p>1111111111p>
    <div>11222222222div>
    <span>3333333333333333span>
body>
html>
2.2 字体和文本样式 2.2.1 字体大小

属性名: font-size

取值:数字+px

注意点:

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

2.2.2 字体粗细 属性名:font-weight取值:关键字:
正常 normal
加粗 bold纯数字:100~900的整百数:
正常 400
加粗 700注意点:不是所有字体都提供了九种粗细，因此部分取值页面中无变化实际开发中以:正常、加粗两种取值使用最多。 2.2.3 字体样式（是否倾斜） 属性名:font-style取值: 正常（默认值) : normal倾斜: italic 
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>Documenttitle>
    <style>
        /* italic倾斜 */
        /* normal正常 */
        div{
            font-style: italic;
        }
        em{
        font-style:normal;    
        }
    style>
head>
<body>
    <div>11111111111div>
    <h1>222222222h1>
    <em>333333333333em>
body>
html>
2.2.4 字体系列 属性名: font-family常见取值:具体字体1,具体字体2,具体字体3,具体字体4…字体系列具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…字体系列: sans-serif、serif、monospace等…渲染规则: 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体如果都不支持，此时会根据 *** 作系统，显示最后字体系列的默认字体 注意点: 如果字体名称中存在多个单词，推荐使用引号包裹最后一项字体系列不需要引号包裹网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

无衬线字体(sans-serif)

特点:文字笔画粗细均匀，并且首尾无装饰场景:网页中大多采用无衬线字体常见该系列字体:黑体、Arial

衬线字体(serif)

特点:文字笔画粗细不均，并且首尾有笔锋装饰场景:报刊书籍中应用广泛常见该系列字体:宋体、Times New Roman

等宽字体(monospace)

特点:每个字母或文字的宽度相等场景:一般用于程序代码编写，有利于代码的阅读和编写常见该系列字体:Consolas、fira code 
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>Documenttitle>
    <style>
        /* win网页更倾向微软雅黑 */
        /* mac则是苹方 */
        div{
            font-family: 宋体;
            /* 如果用户没有微软雅黑,就显示黑体,
            两者都没有则显示电脑中有的无衬线字体类别 */
            font-family: 微软雅黑,黑体,sans-serif;
        }
    style>
head>
<body>
    
    <div>这个是一个div标签div>
body>
html>
2.2.5 拓展

样式层叠

即样式可以一层一层的层叠覆盖，当一个标签设置了多个样式，相同样式的按最后一个显示。

2.2.6 字体font相关属性的连写

属性名: font(复合属性)

取值:

font : style weight size family;

省略要求:

只能省略前两个，如果省略了相当于设置了默认值

注意点:

如果需要同时设置单独和连写形式要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面 
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>Documenttitle>
    <style>
        /* font : style weight size family; */
        p{
          font: italic 700 66px 宋体;  
          /* 一个属性冒号后面书写多个值的写法--复合写法 */
          font: 40px 微软雅黑;
        }
    style>
head>
<body>
    <p>这是p标签p>
body>
html>
2.2.7 文本样式

文本缩进

属性名：text_indent

取值：

数字+px数字+em（推荐：1em =当前标签font-size的大小） 
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>Documenttitle>
    <style>
        p{
            /* 首行缩进2个字符大小 */
            /* 默认字号为16px */
            text-indent: 32px; 
            /* em:一个字的大小 */
            text-indent: 2em;
        }
    style>
head>
<body>
    <p>11111111111111111111111111111111111
        1111111111111111111111111111111111
        1111111111111111111111111111111111
        1111111111111111111111111111111111
        111111111111111111111111111111111
        1111111111111111111111111111111p>
body>
html>

文本水平对齐方式

属性名 text-align

取值:

属性值效果
left左对齐
center居中对齐
right右对齐

注意点:

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

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>Documenttitle>
    <style>
        h1{
            text-align: center;
        }
    style>
head>
<body>
    <h1>新闻标题h1>
body>
html>

text-align : center 能让哪些元素水平居中?

文本span标签、a标签input标签、img标签

注意点:

如果需要让以上元素水平居中,text-align : 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>Documenttitle>
    <style>
        h1{
            text-align: center;
        }
        body{
            text-align: center;
        }
    style>
head>
<body>
    <h1>新闻标题h1>
    <img src="../10327.gif" alt="">
body>
html>

文本修饰

属性名text-decoration

取值:

属性值效果
underline下划线（常用）
line-through上出现（不常用）
overline上划线（几乎不用）
none无装饰线（常用）

注意点:

开发中会使用text-decoration : none;清除a标签默认的下划线

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>Documenttitle>
    <style>
        div{
            text-decoration: underline;
        }
        p{
            text-decoration: line-through;
        }
        h2{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    style>
head>
<body>
    <div>divdiv>
    <p>pppppppppp>
    <h2>4444444h2>
    <a href="https://cn.bing.com/">超链接a>
body>
html>

行高

作用:控制一行的上下行间距

属性名: line-height

取值:

数字+px
倍数（当前标签font-size的倍数)

应用:
让单行文本垂直居中可以设置line-height :文字父元素高度

网页精准布局时，会设置line-height : 1可以取消上下间距

行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题

font : style weight size/line-height family ;

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>Documenttitle>
    <style>
        p{
            line-height: 50px;
            /* 自己字号的1.5倍 */
            line-height: 1.5;
            font: italic 700 66px/2 宋体;
        }
    style>
head>
<body>
    <p>1111111111123
        333333333333
        333333333333
        333333333333
        333333333333
        455555555555
        555555555555
        555555555555
        555555555555
        5555555555555
        55555555555555p>
body>
html>
2.3 选择器进阶 2.3.1 复合选择器

后代选择器

作用:根据 HTML标签的嵌套关系，选择父元素后代中满足条件的元素

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

结果:

在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式

注意点:

后代包括:儿子、孙子、重孙子…后代选择器中，选择器与选择器之前通过空格隔开 
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>Documenttitle>
    <style>
        /* 找到div儿子p设置文字颜色为蓝色 */
        div p{
            color: darkgreen;
        }
    style>
head>
<body>
    <p>这是一个p标签p>
    <div>
        <p>这个是div儿子标签p>
    div>
body>
html>

子代选择器

作用:根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

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

结果:

在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

注意点:

子代只包括:儿子子代选择器中，选择器与选择器之前通过>隔开 
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>Documenttitle>
    <style>
        /* 空格隔开的的是后代，儿子，孙子等 */
        /* div a{
            color:rgb(12, 92, 162);
        } */
        /* 只选择儿子 */
        div>a{
            color: red;
        }
    style>
head>
<body>
    <div>
        父级
        <a href="">这是div里面的a标签a>
        <p>
            <a href="">这是div里面的a标签里面p标签里面的a标签a>
        p>
    div>
body>
html>
2.3.2 并集选择器

作用:同时选择多组标签，设置相同的样式

选择器语法:选择器1，选择器2{ css }

结果:

找到选择器1和选择器2选中的标签，设置样式

注意点:

并集选择器中的每组选择器之间通过,分隔并集选择器中的每组选择器可以是基础选择器或者复合选择器并集选择器中的每组选择器通常一行写一个，提高代码的可读性 
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>Documenttitle>
    <style>
        div,p,span{
            color: rgb(255, 0, 0);
        }
    style>
head>
<body>
    <p>ppppp>
    <div>2222222222div>
    <span>33333span>
    <h1>333333333333h1>
body>
html>
2.3.3 交集选择器

作用:选中页面中同时满足多个选择器的标签

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

结果:

(既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点:

交集选择器中的选择器之间是紧挨着的，没有东西分隔交集选择器中如果有标签选择器，标签选择器必须写在最前面 
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>Documenttitle>
    <style>
        p.box{
            color: red;
        }
    style>
head>
<body>
    
    <p class="box">2222222222222p>
    <p>3333333333333p>
    <div class="box">44444444444444div>
body>
html>
2.3.4 hover伪类选择器

作用:选中鼠标悬停在元素上的状态，设置样式

选择器语法:选择器:hover { 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>Documenttitle>
    <style>
        /* 悬停文字是红色 */
        a:hover{
            color: red;
            background-color: gold;
        }
        div:hover{
            color: darkgreen;
        }
    style>
head>
<body>
    <a href="#">这个是超链接a>
    
    <div>divdiv>
body>
html>
2.4 emmet语法

作用：简写语法，快速生成代码

语法：

记忆示例效果
标签名div
类选择器.red
id选择器#one
交集选择器p.red#one

子代选择器ul>li

内部文本ul>li(我是li的内容) 我是li的内容
创建多个ul>li*3
2.5 背景相关属性 2.5.1 背景颜色

属性名: background-color (bgc)

属性值:

颜色取值:关键字、rgb表示法、rgba表示法、十六进制…

注意点:

背景颜色默认值是透明: rgba(0,0,0,0). transparent背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色 
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>Documenttitle>
    <style>
        div{
            background-color: rgb(110, 10, 10);
        }
    style>
head>
<body>
    <div>sdgsffdiv>
body>
html>
2.5.2 背景图片

属性名:background-image (bgi)

属性值: background-image: url(‘图片的路径’);

注意点:

背景图片中url中可以省略引号背景图片默认是在水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的 2.5.3 背景平铺

属性名: background-repeat (bgr)

属性值:

取值效果
repeat（默认值）水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿着水平方向（x轴）平铺
repeat-y沿着垂直方向（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>Documenttitle>
    <style>
        div{
            width: 800px;
            height: 200px;
            background-color: rgb(224, 238, 103);
            background-image: url(../10327.gif);
            background-repeat: no-repeat;
        }
    style>
head>
<body>
    <div>sdgsffdiv>
body>
html>
2.5.4 背景位置

属性名：background-position(bgp)

属性值：background-position:水平方向位置 垂直方向位置；

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

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>Documenttitle>
    <style>
        div{
            width: 800px;
            height: 200px;
            background-color: rgb(224, 238, 103);
            background-image: url(../10327.gif);
            background-repeat: no-repeat;
            /* background-position:right bottom; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px 100px;
            /* 背景色和背景图都只显示在盒子里面 */
        }
    style>
head>
<body>
    <div>sdgsffdiv>
body>
html>
2.5.5 属性相关属性连写

属性名: background (bg)

属性值:

单个属性值的合写，取值之间以空格隔开

书写顺序:

推荐: background: color image repeat position

省略问题:

可以按照需求省略

特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写

background: url)

注意点

如果需要设置单独的样式和连写要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面 
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>Documenttitle>
    <style>
        /* 1. 独占一行（一行只能显示一个)
        2. 宽度默认是父元素的宽度，高度默认由内容撑开
        3. 可以设置宽高 */
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    style>
head>
<body>
    <div>11111111div>
    <div>222222222222div>
body>
html>
2.5.6 img标签和背景图片的区别

需求:需要在网页中展示一张图片的效果?

方法一:直接写上img标签即可

img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二:div标签＋背景图片

需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签 2.6 元素显示模式

1.块级元素

2.行内元素

3.行内块元素

4.元素显示模式转换

2.6.1 块级元素

显示特点:

独占一行（一行只能显示一个)宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高代表标签: div、p、h系列、ul、 li、dl、dt、dd、 form.header、nav、footer… 
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>Documenttitle>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    style>
head>
<body>
    <div>11111111div>
    <div>222222222222div>
body>
html>
2.6.2 行内元素

显示特点:

一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高

代表标签:

a、 span . b、 u. i、 s. strong、ins、em、del… 
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>Documenttitle>
    <style>
        /* 1. 一行可以显示多个
        2. 宽度和高度默认由内容撑开
        3. 不可以设置宽高 */
        span{
            width: 300px;
            height: 300px;
            background-color: brown;
        }
    style>
head>
<body>
    <span>1111111span>
    <span>2222222222span>
body>
html>
2.6.3 行内块元素

显示特点:

一行可以显示多个可以设置宽高

代表标签:

input、textarea、button、select…特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline 
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>Documenttitle>
    <style>
        /* 1. 一行可以显示多个
        2. 可以设置宽高 */
        img{
            width: 300px;
            height: 200px;
        }
    style>
head>
<body>
    <img src="../10327.gif" alt="">
    <img src="../10327.gif" alt="">
body>
html>
2.6.4 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性效果使用频率
display:block转换成块级元素较多
display:inline-block转换成行内块元素较多
display:inline转换成行内元素极少
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>Documenttitle>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: bisque;
            /* 转换成行内块 */
            /* display: inline-block; */
            /* 行内 */
            display: inline;
        }
    style>
head>
<body>
    <div>11111111111div>
    <div>2222222222222div>
body>
html>
2.7 拓展 块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等… 但是:p标签中不要嵌套div、 p、h等块级元素 a标签内部可以嵌套任意元素 但是:a标签不能嵌套a标签 2.8 CSS特性 2.8.1 继承性

特性:子元素有默认继承父元素样式的特点（子承父业)

可以继承的常见属性(文字控制属性都可以继承)

colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height…

注意点:

可以通过调试工具判断样式是否可以继承

如果元素有浏览器默认样式，此时继承性依然存在，

a标签的color会继承失效h系列标签的font-size会继承失效 
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>Documenttitle>
    <style>
        /* 文字控制属性都可以继承,不是控制文字的都不能继承 */
        div{
            color: red;
            font-size: 30px;
            height: 300px;
        }
        a{
            color: red;
        }
    style>
head>
<body>
    <div>
        2222222222
        <p>1111111111111p>
    div>
    <div>
        注意事项
        <a href="#">超链接a>
        <h1>222222222h1>
    div>
body>
html>
2.8.2 层叠性 特性: 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效 注意点: 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果 
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>Documenttitle>
    <style>
        div{
            color: red;
            color: green;
        }
        .box{
            font-size: 30px;
        }
    style>
head>
<body>
    <div>文字div>
body>
html>
2.8.3 优先级 特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式优先级公式: 继承<通配符选择器<标签选择器<类选择器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>Documenttitle> <style> #box{ color:blue } .box{ color: orange; } body{ color: red; } div{ color: rgb(16, 198, 16) !important; } /* !timportant不要给维承的添加,自己有样式无法维承父级样式 */ style> head> <body> <div class="box" id="box" style="color: indianred;">测试div> body> html>

权重叠加计算

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

权重叠加计算公式:(每一级之间不存在进位)

比较规则

先比较第一级数字，如果比较出来了，之后的统统不看如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看……如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)

注意点: !important如果不是继承，则权重最高，天下第一!

2.9 盒子模型 盒子的概念 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子 盒子模型 CSS 中规定每个盒子分别由:**内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域（margin)**构成，这就是盒子模型 记忆:可以联想现实中的包装盒 2.9.1 内容的宽度和高度

作用:利用width 和height属性默认设置是盒子内容区域的大小

属性: width / height

常见取值:数字+px

2.9.2 边框(bordre)

属性名:border

属性值:单个取值的连写，取值之间以空格隔开

如: border : 10px solid red;

快捷键:bd + tab

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>Documenttitle>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            /* solid实线 */
            /* border: 1px solid red; */
            /* dashed虚线 */
            /* border: 1px dashed #000; */
            /* dotted点线 */
            border: 1px dotted #000;
            /* 内边距 */
            padding: 20px;
            /* 外边距 */
            margin: 20px;
            
        }
    style>
head>
<body>
    <div>内容div>
    <div>内容div>
body>
html>
2.9.3 边框 - 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名: border-方位名词

属性值:连写的取值

2.9.4 边框 - 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果

单个属性:

作用属性名属性值
边框粗细border-width数字+px
边框样式border-style实线solid,dashed虚线,dotted点线
边框颜色border-color颜色取值
2.9.5 盒子实际大小初级计算公式

需求:盒予足st 400*400.背景绿色，边框10px实线黑色，如何完成?

盒子实际大小初级计算公式:

解决:当盒子被border撑大后，如何满足需求?

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>Documenttitle>
    <style>
        div{
            /* 盒子尺寸=width/height+边框线 */
            /* border会撑大盒子尺寸 */
            width: 380px;
            height: 380px;
            background-color: #f1939c;
            border-color: green;
            border: 10px solid #000;
        }
    style>
head>
<body>
    <div>
        div
    div>
body>
html>
2.9.6 内边距(padding) 
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>Documenttitle>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgb(147, 82, 82);
            /* 添加了4个方向的内边距 */
            padding: 50px;
            /* padding属性可以当作复合属性使用，
            表示可以单独设置某个方向的内边距 */
            /* padding最多取4个值 */

            /* 4个值分别对应上右下左 */
            /* padding: 10px 20px 30px 40px; */
            /* padding: 10px 20px 30px ; */
            padding: 10px 20px ;
            /* 缺失的和对面一样取值 */

        }
    style>
head>
<body>
    <div>divdiv>
body>
html>
2.9.7 css3盒模型（自动内减） 需求:盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成?给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大?解决方法①∶手动内减 *** 作:自己计算多余大小，手动在内容中减去缺点:项目中计算量太大，很麻烦 解决方法②∶自动内减 *** 作:给盒子设置属性box-sizing : border-box;即可优点:浏览器会自动计算多余大小，自动在内容中减去 
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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(20, 20, 20);
            border: 20px solid red;
            padding: 20px;
            /* 变成css3的盒子模型，
            优点加了border和padding不需要手动减法 */
            
            box-sizing: border-box;
        }
    style>
head>
<body>
    <div>divdiv>
body>
html>
2.9.8 外边距(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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(36, 227, 18);
            margin: 50px;
            margin-left: 100px;
        }
    style>
head>
<body>
    <div>divdiv>
body>
html>
2.9.9 清除默认的内外边距 场景:浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置 比如: body标签默认有margin: 8px比如:p标签默认有上下的margin比如: ul标签默认由上下的margin和padding-left······ 解决方法: 
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>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
    <p>pppppppppp>
    <p>pppppppppp>
    <h1>111111h1>
    <ul>
        <li>2222222222li>
    ul>
body>
html>
2.9.a 版心居中 
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>Documenttitle>
    <style>
        div{
            width: 1000px;
            height: 300px;
            background-color: rgb(206, 35, 64);
            margin: 0 auto;
        }
    style>
head>
<body>
    
    
    <div>版心居中div>
body>
html>
2.9.b 外边距问题

1.外边距折叠现象

场景垂直布局的块级元素上下的margin会合并结果:最终两者距离为margin的最大值解决方法:避免就好 只给其中一个盒子设置margin即可

当编写one时，图像为下图：

添加two之后没有变化

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(193, 227, 27, 0.771);
        }
        .one{
            margin-bottom: 50px;
        }
        .two{
            margin-bottom: 50px;
        }

    style>
head>
<body>
    <div class="one">11div>
    <div class="two">22div>
body>
html>

2. 塌陷问题

场景互相嵌套的块级元素，子元素的margin-top 会作用在父元素上结果:导致父元素一起往下移动解决方法: 给父元素设置border-top 或者padding-top (分隔父子元素的margin-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>Documenttitle>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* overflow: hidden; */
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: rgb(47, 18, 239);
            /* margin-top: 50px; */
            display: inline-block;
        }

    style>
head>
<body>
    <div class="father">
        <div class="son">sondiv>
    div>
body>
html>
2.9.c 行内元素的内外边距的问题

解决方法：

转换模式加行高 
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>Documenttitle>
    <style>
        span{
            /* margin: 100px; */
            /* padding: 100px; */
            line-height: 100px;
        }
    style>
head>
<body>
    

    
        
        

    <span>spanspan>
    <span>spanspan>
body>
html>
2.10 选择器 2.10.1 结构伪类选择器

目标:能够使用结构伪类选择器在HTML中定位元素

作用与优势: 作用:根据元素在HTML中的结构关系查找元素优势:减少对于HTML中类的依赖，有利于保持代码整洁场景:常用于查找某父级选择器中的子元素 选择器
选择器说明
E:first-chaild{}匹配父元素中第一个子元素，并且是E元素
E:last-chaild{}匹配父元素中最后一个子元素，并且是E元素
E:nth-chaild(n){}匹配父元素中第n个子元素，并且是E元素
E:nth-last-chaild(n){}匹配父元素中倒数第n个子元素，并且是E元素
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>Documenttitle>
    <style>
        /* 选中第一个 */
        li:first-child{
            background-color: green;
        }

        /* 最后一个 */
        li:last-child{
            background-color: pink;
        }
        li:nth-child(3){
            background-color: black;
        }
    style>
head>
<body>
    
    <ul>
        <li>这个是第1个lili>
        <li>这个是第2个lili>
        <li>这个是第3个lili>
        <li>这个是第4个lili>
        <li>这个是第5个lili>
        <li>这个是第6个lili>
        <li>这个是第7个lili>
        <li>这个是第8个lili>
    ul>
body>
html>

n的注意点:

n为: 0、1、2、3、4、5、6.

通过n可以组成常见公式

功能公式
偶数2n，even
奇数2n+1、2n-1、odd
找到前5个-n+5
找到从第5个往后n+5
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>Documenttitle>
head>
<style>
    /* 取偶数 */
    /* li:nth-child(2n){
        background-color: green;
    } */
    /* 取奇数 */
    /* li:nth-child(2n-1){
        background-color: green;
    } */
    li:nth-child(4n){
        background-color: green;
    }
style>
<body>
    <ul>
        <li>这个是第1个lili>
        <li>这个是第2个lili>
        <li>这个是第3个lili>
        <li>这个是第4个lili>
        <li>这个是第5个lili>
        <li>这个是第6个lili>
        <li>这个是第7个lili>
        <li>这个是第8个lili>
    ul>
body>
html>
2.10.2 伪元素

目标:能够使用伪元素在网页中创建内容

伪元素:一般页面中的非主体内容可以使用伪元素

区别:

元素:HTML设置的标签伪元素:由CSS模拟出的标签效果

种类:

伪元素作用
:: before在父元素内容的最前添加一个伪元素
: : after在父元素内容的最后添加一个伪元素

注意点:

必须设置content属性才能生效伪元素默认是行内元素 
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>Documenttitle>
    <style>
        .father{

            width: 300px;
            height: 300px;
            background-color: pink;
    }
    .father::before{
        /* 内容 */
        content: "老鼠";
        color: green;
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 默认宽高不生效 */
        /* 要转换为行内才生效 */
        display:block ;
    }
    .father::after{
        content: "大米";
    }
    style>
head>
<body>
    
        
        <div class="father">爱div>
body>
html>
2.11 网页布局 2.11.1 标准流 标准流:又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素常见标准流排版规则: 块级元素:从上往下，垂直布局，独占一行行内元素或行内块元素:从左往右，水平布局，空间不够自动折行 2.11.2 浮动（重点）

浮动的作用

早期的作用:图文环绕

现在的作用:网页布局（块标签完美的在一行排列显示）

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>Documenttitle>
    <style>
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    style>
head>
<body>
    
    <div class="one">onediv>
    <div class="two">twodiv>
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>Documenttitle>
    <style>
        /* img{
            float: left;
        } */
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: skyblue;
            float: right;
        }
    style>
head>
<body>
    
    <div class="one">onediv>
    <div class="two">twodiv>
body>
html>

浮动特点

浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置 相当于从地面飘到空中 浮动元素比标准流高半级，可以覆盖标准流中的元素浮动找浮动，下一个浮动元素会在上一个浮动元素的后面左右浮动浮动元素有特殊的显示效果 一行可以显示多个

注意点：

浮动的元素不能通过text-align:center或者margin:0 auto

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>Documenttitle>
    <style>
        /* 浮动的标签顶对齐 */
        /* 浮动：在一行排列，宽高生效--------浮动之后的标签
        具备行内块的特点 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
            /* 因为有浮动，不能生效----盒子无法水平居中 */
            margin:0 auto;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    style>
head>
<body>
    <div class="one">onediv>
    <div class="two">twodiv>
    <div class="three">threediv>

body>
html>
2.11.3 css属性顺序

css书写顺序：浏览器执行更高

定位浮动/display盒子模型：margin,border,padding,宽高背景色文字样式 2.11.4 清除浮动 含义:清除浮动带来的影响 影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素 原因: 子元素浮动后脱标→不占位置 目的: 需要父元素有高度，从而不影响其他网页元素的布局

受影响的情况

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>Documenttitle>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    style>
head>
<body>
    
    <div class="top">
        <div class="left">div>
        <div class="right">div>
    div>
    <div class="bottom">div>
body>
html>

清除浮动方法

直接设置父元素的高度

特点:

优点:简单粗暴，方便缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

额外标签法

*** 作:

在父元素内容的最后添加一个块级元素给添加的块级元素设置clear:both

特点:

缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

当伪元素清除法(与额外标签法原理相同)

*** 作:用伪元素替代了额外标签

基本写法

.clearfix::after{
            content: "";
            display: block;
            clear: both;
			}


.clearfix::after{
            content: "";
            display: block;
            clear: both;
            /* 补充代码：在网页中看不见的伪元素 */
            height: 0;
            visibility: 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>Documenttitle>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素清除浮动 */
        .clearfix::after{
            content: "";
            /* 伪元素没有contcent伪元素就不会生效 */
            display: block;
            /* 因为伪元素添加的行内元素，要求是块元素 */
            clear: both;
            /* 补充代码：在网页中看不见的伪元素 目的为保持兼容性*/
            height: 0;
            visibility: hidden;
        }
    style>
head>
<body>
    
    <div class="top clearfix">
        <div class="left">div>
        <div class="right">div>
        
    div>
    <div class="bottom">div>
body>
html>

双伪元素清除法

*** 作

        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }

特点

优点：项目中使用，直接给标签加类即可清除浮动 
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>Documenttitle>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        /* .clearfix::before作用：解决外边距塌陷问题 
        外边距塌陷：父子级标签，都是块级，
        子级加margin会影响父级的位置*/
        .clearfix::before,
        .clearfix::after{
            content: "";
            /* 转换为表格的形式，table解决外边距塌陷问题 */
            display: table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after{
            clear: both;
        }
    style>
head>
<body>
    
    <div class="top clearfix">
        <div class="left">div>
        <div class="right">div>
    div>
    <div class="bottom">div>
body>
html>

给父元素设置overflow: hidden

*** 作

直接给父元素设置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>Documenttitle>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    style>
head>
<body>
    
    <div class="top">
        <div class="left">div>
        <div class="right">div>
    div>
    <div class="bottom">div>
body>
html>
2.11.5 定位 1. 定位的基本介绍

网页常见的布局

标准流 块级元素独占一行→垂直布局行内元素/行内块元素一行显示多个→水平布局 浮动 可以让原本垂直布局的块级元素变成水平布局 定位 可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况

定位的常见应用场景

可以解决盒子与盒子之间的层叠问题 定位之后的元素层级最高，可以层叠在其他盒子上面 可以让盒子始终固定在屏幕中的某个位置 2. 定位的基本使用

使用步骤

设置定位方式

属性名：position

常见属性值

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个)

方向属性名属性值含义
水平left数字+px距离左边的距离
水平right数字+px距离右边的距离
垂直top数字+px距离上边的距离
垂直bottom数字+px距离下边的距离

静态定位

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>Documenttitle>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
            /* 静态定位，默认值，标准流 */
            position: static;
             left: 100px; /*无效果 */
            top: 200px;  /*无效果 */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <div class="box">boxdiv>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>

body>
html>
3. 相对定位 介绍:自恋型定位，相对于自己之前的位置进行移动代码:position : relative;特点: 需要配合方位属性实现移动 (改变位置参照自己原来的位置)相对于自己原来位置进行移动在页面中占位置→没有脱标准流 (占有原来的位置)仍然具有标签原有的显示特点 应用场景: 配合绝对定位组CP(子绝父相)用于小范围的移动 
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>Documenttitle>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
            /* 静态定位，默认值，标准流 */
            position: relative;
            left: 100px;
            top: 200px;
            /* 
            相对定位的特点
            1. 占有原来的位置
            2.仍然具有标签原有的显示特点 
            3.改变位置参照自己原来的位置*/

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <div class="box">boxdiv>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>

body>
html>

注意：

定位中当同时写了左右时，生效左，水平则上以left为准定位中当同时写了上下时，生效上，垂直则上以top为准当写了左右上下等方位，注释掉，则显示原本标准流时位置 4. 绝对定位

介绍:拼爹型定位，相对于非静态定位的父元素进行定位移动

代码: position: absolute;

特点:

需要配合方位属性实现移动默认相对于浏览器可视区域进行移动在页面中不占位置→已经脱标

应用场景:

配合绝对定位组CP(子绝父相)

情况：父级无定位

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>Documenttitle>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
            /* 绝对定位：
                    先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位;
                    有父级，但父级没有定位，以浏览器窗口为参照为进行定位
             */
             position: absolute;  /* poa */
             /* left: 50px; */
             left: 0px;
             top: 0px;

             /* 特点：
             1. 脱标的，不占位置的
             2.改变标签的显示模式特点：
             具体行内特点（在一行共存，宽高生效）
             */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <div class="box">boxdiv>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>

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>Documenttitle>
    <style>
        .box{
            /* 1.绝对定位的盒子不能使用左右margin auto居中 */ 
            position: absolute;
            /* 标准流居中 */
            /* margin: 0 auto; */
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box">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">
    <title>Documenttitle>
    <style>
        .box{
            /* 1.绝对定位的盒子不能使用左右margin auto居中 */ 
            position: absolute;
            /* 标准流居中 */
            /* margin: 0 auto; */
            left: 50%;
            /* margin-left: -150px; */
            top: 50%;
            /* margin-top: -150px; */
            /* 位移：自己宽高的一半 */
            transform: translate(-50%,-50%);
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>
5. 子绝父相

情况：有父级定位（父级(广义上的定位)一般使用相对定位即：position: relative;），子级一般使用绝对定位

绝对定位查找父级方式：就近找定位的父级， 如果逐层查找不到这样的父级，就以浏览器窗口为参考进行定位。

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>Documenttitle>
    <style>
        .father{
            position: relative;

            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            /* position: relative; */
            /* position: absolute; */

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
            position: absolute;
            /* left: 100px;
            top:100px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
        /* 绝对定位查找父级方式：就近找定位的父级，
        如果逐层查找不到这样的父级，
        就以浏览器窗口为参考进行定位 */
    style>
head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun">div>
        div>
    div>
body>
html>
6. 固定定位

介绍:死心眼型定位，相对于浏览器进行定位移动

代码: position : fixed ;

特点:

需要配合方位属性实现移动相对于浏览器可视区域进行移动在页面中不占位置→已经脱标

应用场景:

让盒子固定在屏幕中的某个位置 
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>Documenttitle>
    <style>
        /* css书写：1.定位/浮动/display/;
        2. 盒子模型；3.文字属性 */
        .box{
            position: fixed;
            left: 0;
            top: 0;
            /* 
            1.脱标--不占位置
            2.改变位置参考浏览器窗口
            3.具备行内块特点
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <div class="box">boxdiv>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位p>
body>
html>
7. 元素的层级关系

不同布局方式元素的层级关系:

标准流<浮动<定位

不同定位之间的层级关系:

相对、绝对、固定默认层级相同此时HTML中写在下面的元素层级更高，会覆盖上面的元素

调整层级关系

z-index:整数;取值越大，显示顺序越靠上z-index的默认值是0z-index必须配合定位一起用 
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>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;
            z-index: 1;
        }
        .two{
            position: absolute;
            left: 50px;
            top: 40px;
            background-color: skyblue;
        }
        /* 默认情况下，定位的盒子，后来者居上
        z-index:整数;取值越大，显示顺序越靠上 
        z-index的默认值是0
        z-index必须配合定位一起用
        */
    style>
head>
<body>
    <div class="one">onediv>
    <div class="two">twodiv>
body>
html>
2.12 装饰 2.12.1 认识基线

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

行内和行内块浏览器默认按照文字解析

文字对齐问题

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

问题:当图片和文字在一行中显示时，其实底部不是对齐的

2.12.2 垂直对齐方式

属性名: vertical-align

属性值:

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐
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>Documenttitle>
    <style>
        /* 浏览器遇到行内和行内块当作文字处理，
        默认字体是按照基线对齐的 */
        input{
            height: 50px;
            box-sizing: border-box;

            vertical-align: middle;
        }
    style>
head>
<body>
    <input type="text"><input type="button" value="搜索">
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>Documenttitle>
    <style>
        .father{
            width: 400px;
            background-color: pink;
        }
        img{
            /* 解决方案一 */
            /* vertical-align: middle; */
            display: block;
        }
    style>
head>
<body>
    <div class="father">
        <img src="./10327.gif" alt="">
    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">
    <title>Documenttitle>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: pink;
            line-height: 400px;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
        
    style>
head>
<body>
    <div class="father">
        <img src="./10327.gif" alt="">
    div>
body>
html>
2.12.3 光标类型

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

属性名: cursor

常见属性值:

属性值效果
default默认值。通常是箭头
pointer小手效果，提示用户可以点击
text工字型，提示用户可以选择文字
move十字光标，提示用户可以移动
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>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 手型 */
            /* cursor: pointer; */
            /* cursor: text;
            cursor: move; */

        }
    style>
head>
<body>
    <div>
        div
    div>
body>
html>
2.12.4 边框圆角

场景:让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名: border-radius

常见取值:数字+px、百分比

原理:

赋值规则:从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

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>Documenttitle>
    <style>
        .box{
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值：表示4个角是相同的 */
            /* border-radius: 10px; */
            /* border-radius: 10px 20px 30px 40px; */
            /* 4值：左上，右上，右下，左下，从左上顺时针转一圈 */

            border-radius: 10px 40px 80px;
            /* 没有值则和对角一样 */
        }

    style>
head>
<body>
    <div class="box">div>
body>
html>

画一个正圆

盒子必须是正方形设置边框圆角为盒子宽高的一半border-radius:50%

胶囊按钮

盒子要求是长方形设置→border-radius:盒子高度的一半 
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>Documenttitle>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: green;

            border-radius: 50%;
        }
        .two{
            width: 200px;
            height: 100px;
            background-color: pink;

            border-radius: 70px;
        }

    style>
head>
<body>
    <div class="one">div>
    <div class="two">div>
body>
html>
2.12.5 overfiow溢出部分显示效果

溢出部分:指的是盒子内容部分所超出盒子范围的区域

场景︰控制内容溢出部分的显示效果，如:显示、隐藏、滚动条…

属性名: overflow

常见属性值:

属性值效果
visible默认值,溢出部分可见
hidden溢出部分隐藏
scroll无论是否溢出。都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条
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>Documenttitle>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 溢出部分隐藏 */
            /* overflow: hidden; */

            /* 无论是否溢出。都显示滚动条 */
            /* overflow: scroll; */

            /*  根据是否溢出，自动显示或隐藏滚动条*/
            overflow: auto;
        }
    style>
head>
<body>
    <div class="box">我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div
    div>
body>
html>
2.12.6 元素本身隐藏

场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏

常见属性:

visibility: hiddendisplay: none 
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>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            /* 占位的隐藏，工作中不经常使用 */
            /* visibility: hidden; */

            /* 不占位的隐藏 */
            display: none;
            background-color: pink;
        }
        .two{
            background-color: green;
        }
        

    style>
head>
<body>
    <div class="one">div>
    <div class="two">div>
body>
html>
2.12.7 元素的整体透明度

场景:让某元素整体（包括内容)一起变透明

属性名: opacity

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

1:表示完全不透明0:表示完全透明

注意点:

opacity会让元素整体透明，包括里面的内容，如:文字、子元素等… 
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>Documenttitle>
    <style>
        div{
           width: 400px;
           height: 400px;

            background-color: green;

            opacity: 0.5;
        }
    style>
head>
<body>
    <div>
        <img src="./10327.gif" alt="">

    div>
body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296154.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
树虎 树虎 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存