html基础知识

Html可以大小写  xhtml只能用小写

Html可以不用结束 xhtml必须有结束标签

<H1>这是html大写</H1>；<h1>这是小写的html</h1>；<h1>这是html；<h1>这是xhtml</h1>

Xhtml就是html的严格版

99%的语言都是写在body里面

学习html其实就是学习一堆的标签语言

标签：<div></div><p></p>等

属性：id=”name” id是属性名  name是属性值 也可以叫键值

元素：<div id=”name”>这是姓名</div>

开始标签+属性名+属性值+标签中的内容+结束标签=完整的标签语言=一个元素

<div class=”nav”></div>这一标签相当于一个容器 代表着在网页上的某一个地方 没有什么特殊含义  也没有什么语义

Class=”nav”就是给这个div起了一个名字叫nav  class跟上面的id一样都是一个属性值

不同的是id只能有一个属性值  class可以有很多属性值

<h1></h1>是一个标题的标签语言  h后面的数字越大 标题的就越小 通常用于做一个网页的logo  它是一个独立标签  只能自己独占一行 在它后面在写别的标签语言就会自动换行

<hr>是一个横线标签 用来段落的间隔 是一个单标签：意思就是没有结束标签  <hr />后面是有一个斜杠 可以写也可以不写 建议刚开始练习的时候都写上 到后面css都很少用到hr标签

<p></p>标签是一个独立标签 它一般是用来写段落

文本字体样式标签：

b标签是字体加粗的

Strong标签是让字体加粗的

i标签是让字体变倾斜

em标签是让字体变倾斜

u标签是让字体下面出现下划线

s标签是让字体中出现划线

del标签是让字体中出现划线 跟s标签一样

Ins标签是让字体下面出现下划线

div标签和span标签的区别：

div标签是一个独立标签

Span标签是一个并排标签 不可以使文字处于一行

Span标签可以使文字处于一行

Img标签：

Img也是一个并排的标签 但是比较特殊 我们可以把div标签比喻为男性 span标签为女性

img就是属于一个人妖标签 慢慢解释

<img src=”./img.jpg” alt=”” title=””>

Img是一个添加图片的标签 src是source的缩写 src中写的是图片所在的路径 alt中所写的是在你图片加载不出来的前提下 显示出来的一段文字 写什么都可以

src中一个点代表的是在你这个文件所处的目录下找到另一个同级的目录

Src中两个点代表的是在你这个文件所处的上一级目录中找到你所需要的资源

title中写的是当你鼠标放在图片上所出现的一段文字的内容

a标签：

<a href=”” target=””></a>

a标签是一个超链接标签 点击一下会跳转到新的页面

a标签和span标签一样都是女标签

href中写的是我们所需要跳转的链接

Target有目标的意思：

_self 在当前的选项卡跳转你所输入的网页

_blank 打开一个新的选项卡跳转进入你所输入的网页

#是一个锚点 意思就是空连接

锚链接：

就是在一个标签中给这个标签起一个名字 然后在a标签的href中输入你给标签起的名字 就会实现在你写的页面中进行跳转

<a href=”#haha”>跳转的内容</a>

<p class=”haha”>这是跳转后所看到的内容</p>

列表：

列表有三种：

自定义列表dl+dt+dd

自定义列表中的dl是一个包裹 就是自定义列表标签都在dl里面写

dt是自定义的一个小标题

dd是用来写内容的

有序列表ol+li

ol还有一个属性值叫type 属性值有：1 a A i I   他的初始值是1 2 3

ol  li是男标签 独占一行

无序列表ul+li

ul默认的属性是一个圆点

ul  li是一个男标签

无序列表和有序列表都可以用style=”list-style:none;”这个属性

style=”list-style:none;”是写在包裹标签中的

style=”list-style:none;”我理解的意思就是在html中的意思就是去除列表中前面的标记

     <ol >

         <li>江苏新增本土病例1例</li>

         <li>多地降雨量破历史极值</li>

         <li>"板蓝根大王"徐镜人逝世</li>

         <li>台湾学者邱毅在厦门接种科兴疫苗</li>

     </ol>

     <ol>

        <li>江苏新增本土病例1例</li>

        <li>多地降雨量破历史极值</li>

        <li>"板蓝根大王"徐镜人逝世</li>

        <li>台湾学者邱毅在厦门接种科兴疫苗</li>

    </ol>

     <h2>无序列表的使用</h2>

     <ul style="list-style: none;">

         <li>逆天邪神</li>

         <li>万古神帝</li>

         <li>武炼巅峰</li>

         <li>伏天氏</li>

         <li>剑来</li>

         <li>大奉打更人</li>

     </ul>

     <ul style="list-style: none;">

        <li>逆天邪神</li>

        <li>万古神帝</li>

        <li>武炼巅峰</li>

        <li>伏天氏</li>

        <li>剑来</li>

        <li>大奉打更人</li>

    </ul>

上述代码可以加入到body里面进行实验

表格：

在没有css的时候 都是用表格来布局的

表格的标签是  table

行标签是  tr

每一个表格是用 td

如果我们想让单元格合并  就要用到 rowspan和colspan

rowspan 表示跨行 后面的属性值是多少就是跨几行  在跨行的同时还要在从后面的属性中删除几个 删除的数量是你跨几个删除几个

Colspan 表示跨列  后面的属性值是多少就是跨几列  在跨列的同时也要从后面的属性中删除几个 删除的数量是你跨几个删除几个

ecllspace 是单元格之间的间隙

align 有位置的意思 center 居中

这两个属性都是搭配style属性使用的

<table border="1" cellspacing="0" width="600" height="300" align="center">

        <tr>

            <th>时间</th>

            <th>周一</th>

            <th>周二</th>

            <th>周三</th>

            <th>周四</th>

            <th>周五</th>

            <!-- th自带一个内容居中的属性 -->

        </tr>

        <tr align="center">

            <td rowspan="2">上午</td>

            <td>语文</td>

            <td>语文</td>

            <td>语文</td>

            <td>语文</td>

            <td>语文</td>

        </tr>

        <tr align="center">

            <!-- <td>上午2</td> -->

            <td>数学</td>

            <td>数学</td>

            <td>数学</td>

            <td>数学</td>

            <td>数学</td>

        </tr>

        <tr align="center">

            <td rowspan="2">下午</td>

            <td>体育</td>

            <td>体育</td>

            <td>体育</td>

            <td>体育</td>

            <td>体育</td>

        </tr>

        <tr align="center">

            <!-- <td>下午2</td> -->

            <td>音乐</td>

            <td>音乐</td>

            <td>音乐</td>

            <td>音乐</td>

            <td>音乐</td>

        </tr>

        <tr align="center">

            <td>晚上</td>

            <td colspan="5">自习</td>

            <!-- <td>自习</td>

            <td>自习</td>

            <td>自习</td>

            <td>自习</td> -->

        </tr>

</table

可以参考上面的代码进行练习 同样也是放在body里面

表单：

form 是表单标签，属性有以下几个

action 表示收集完数据后，将数据提交的服务器地址

method 表示以什么形式提交给服务器 GET就是一种形式请求

<form action="http://www.baidu.com" method="GET">

        <!-- 人妖标签 1.img 2.input -->

        <!-- label标签 他会绑定input 帮助我们获取焦点-->

        <!-- input标签中的属性：

                1.type 类型

                2.placeholder 提示语

        -->

        <ul>

            <li> <label for="phone">手机号:</label> <input type="text" id="phone" placeholder="输入手机号"></li>

            <!-- type类型为text 表示一个普通的文本框 -->

            <li><label for="password">创建密码:</label><input type="password" name="" id="password"></li>

            <!-- type类型为password 表示一个密码框 -->

            <li> <label for="uname">姓名:</label><input type="text" name="" id="uname"></li>

            <li><label for="idNum">身份证号:</label><input type="number" name="" id="idNum"></li>

            <!-- type类型为number 表示一个数字输入框 -->

            <!-- 单选框 -->

            <!-- radio 收单机的意思 那么在这里表示单选

                 必须要求同一类型的单选选项name名相同

                 有checked 会被默认选中

            -->

            <li>

                <label for="sex">性别</label>

                <input type="radio" name="sex" id="" checked>男

                <input type="radio" name="sex" id="" >女

            </li>

            <li>

                <label for="">生日</label>

                <!-- 下拉菜单  select+option使用(切记) -->

                <!-- option中的value值是当我们提交表单的时候提交的 -->

                <!-- 我们看到的 页面上展示出来的  是标签包裹的内容 -->

                <select name="" id="">

                    <option value="1990">1990</option>

                    <option value="1991">1991</option>

                    <option value="1992">1992</option>

                    <option value="1993">1993</option>

                    <option value="1994">1994</option>

                    <option value="1995">1995</option>

                    <option value="1996">1996</option>

                    <option value="1997">1997</option>

                    <option value="1998">1998</option>

                    <option value="1999">1999</option>

                    <option value="2000">2000</option>

                </select>年

                <select name="" id="">

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                    <option value="4">4</option>

                    <option value="5">5</option>

                    <option value="6">6</option>

                    <option value="7">7</option>

                    <option value="8">8</option>

                    <option value="9">9</option>

                    <option value="10">10</option>

                    <option value="11">11</option>

                    <option value="12">12</option>

                </select>月

                <select name="" id="">

                    <option value="1">1</option>

                    <option value="2">2</option>

                    <option value="3">3</option>

                    <option value="4">4</option>

                </select>日

            </li>

            <li>

                <label for="">我现在</label>

                <input type="radio" name="now" checked>在工作

                <input type="radio" name="now">在上学

                <input type="radio" name="now">其他

            </li>

            <li>

                <label for="">居住地</label>

                <select name="" id="">

                    <option value="henansheng">河南省</option>

                    <option value="hebeisheng">河北省</option>

                </select>

            </li>

            <!-- 多选

                    checkbox

            -->

            <li>

                <label for="">爱好</label>

                <input type="checkbox">打篮球

                <input type="checkbox">打网球

                <input type="checkbox">上网

                <input type="checkbox">跳舞

            </li>

            <li>

                <label for="">自我介绍</label>

                <!-- textarea标签 表示文本区域 -->

                <textarea cols="30" rows="10"></textarea>

            </li>

            <input type="button" value="提交">

        </ul>

    </form>

Css:

行内样式：

它的优先级最高 除了！Important

行内样式就是写在每一个标签里面的样式

属性名叫做 style

<body style="text-align: center;">

    <h2 style="font-size: 28px;color: orange;">柳枝词</h2>

    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">亭亭画舸系春潭</p>

    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">直到行人酒半酣</p>

    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">不管烟波与风雨</p>

    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">载将离恨过江南</p>

</body>

font-size意思是字体大小

text-align意思就是文本所在位置

color是用来更改字体的颜色

text-shadow 我的理解为字体阴影

外部样式：

重新创建一个文件名字为xxx.css

然后在html中head标签里面写上<link rel=”stylesheet” href=”这里写你创建的css文件”>

然后把css写在你所创建的xxx.css中 切记 在你所创作的css文件中不用再写<style></style>标签

内嵌样式和常用的选择器：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /* 通配符选择器 全选 */

         /* *{} 通配符选择器  全选 */

        *{

            color: red;

            /* color指的是文本中文字的颜色 */

            /* 这种选择器常用于清除内外边距

                *{

                    margin:0;

                    padding:0;

                }

            */

        }

        /* 标签选择器 */

        /* 直接标签名{} 前面什么都不要加 */

        p{

            /* font-size 是指的字体大小 */

           font-size: 40px; 

        }

        /* 类选择器 */

        /* .类名{} 切记前面是.*/

        /* 类名是什么

            类名是class后面的属性值

        */

        .item{

            /* font-style 表示文本的样式 italic 表示 斜体 */

            /* font-style: italic; */

       }

        li.item{

            /* 选中li标签里面类名为item的元素 */

            font-style: italic;

        }

        /* id选择器 */

        /* #id名{}  id名是属性id的属性值 */

        #box{

            font-weight:bold;

        }

    </style>

</head>

一般情况 写样式不写id选择器 当我们写js的时候 使用id选择器比较多

关系选择器： 

   <style>
    /* 后代选择器 */
    /* 它不仅仅是选中儿子  而是选中当前这个标签包裹住所有我们选中类名的标签 */
    /* .father .son */
    .father .son{
        color: skyblue;
    }
    .father .grandson{
        color: red;
    }
    /* 后代选择器end */

    /* 儿子选择器 */
    /* .father>.son 中间用>连接 */
    .father1>.son1{
        color: skyblue;
    }
    .father1>.grandson1{
        color: red;
    }
    /* 儿子选择器end */

    /* 兄弟选择器 */
    /* 选中的是某个元素后面紧挨着的那个元素 */
    /* div+p{} 表示选中div后面紧挨的p标签 */
    div+p{
        color: skyblue;
    }
    div+span{
        color: tomato;
    }
    span+p{
        color: yellow;
    }

    /* 选中后面N个兄弟 */
    .brother~p{
        color: red;
    }
    </style>

以.开头的是类选择器

前面什么都没有的是标签选择器

*是通配符选择器

#是id选择器

后代选择器：.father .son中间用空格隔开

儿子选择器：.father>.son中间用大于号隔开

兄弟选择器：div+p中间用加号隔开

选中n个兄弟：.brother~p中间用波浪线隔开

  <!-- 后代选择器start -->
    <h2>后代选择器</h2>
    <div class="father">
        这是爸爸
        <div class="son">
            这是儿子
            <div class="grandson">
                这是孙子
            </div>
        </div>
        <div class="grandson">
            这是个异类
        </div>
    </div>
    <!-- 后代选择器 end -->
    <hr>
    <!-- 儿子选择器 -->
    <h2>儿子选择器</h2>
    <div class="father1">
        这是father
        <div class="son1">
            这是son
            <div class="grandson1">这是grandson</div>
        </div>
        <div class="grandson1">
            这是异类
        </div>
    </div>
    <hr>
    <h2>兄弟选择器</h2>
    <div>这是div （这是大哥）</div>
    <p> 这是p标签(这是二哥)</p>
    <span> 这是span标签(这是三哥)</span>
    <p>这是p标签 (这是四哥)</p>

    <hr>
    <h2>这是选中后面N个兄弟</h2>
    <div class="brother">
        这是大哥
    </div>
    <p>这是小弟</p>
    <p>这是小弟</p>
    <span>这是小小弟</span>
    <p>这是小弟</p>
    <p>这是小弟</p>
    <p>这是小弟</p>
    <p>这是小弟</p>

联合选择器：

<head>
    <meta charset="UTF-8">
    <title>联合选择器</title>
    <style>
        /* 并集选择器 联合选择器 */
        /* .box1,.box2{
            color: violet;
        } */
        /* div,p,span{
            color: red;
        } */
        /* div,.box2{
            color: red;
        } */
        /* .box1,span,ul li{
            color: turquoise;
        } */

        /* 排除选择 */
        /* :not(.other)表示排除类名为other  */
        ul li:not(.other){
            color: violet;
        }
    </style>
</head>
<body>
    <div class="box1">这是box1</div>
    <p class="box2">这是box2</p>
    <div class="box3">这是box3</div>
    <span class="box4">这是box4</span>
    <ul>
        <li>这是第一个li</li>
        <li>这是第二个li</li>
        <li class="other">这是第三个li</li>
    </ul>
</body>

.box1,.box2就是选中属性class中以box1 box2命名的标签

并集选择器：中间用逗号隔开

排除选择器：：not（.other）括号里面写属性class的属性值.other

属性选择器：

 <style>
        /* 属性（attr）选择器 */
        /* [id]{
            color: violet;
        } */
        /* [id]当为这样的时候，表示有id属性即可 */


        /* [id][class]{
            color: yellow;
        } */
        /* [id][class]表示id和class属性都必须有 */
        /* [id],[class]这样表示 id和class有一个即可 */

        /* [id="box1"]{
            color: red;
        }
        [class="item3"]{
            color: red;
        } */
        /* [id="box1"] 表示选中id这个属性 属性值为box1的元素 */
        /* 我们直接指定了id 或者说指定属性值 */

        /* [id^="box"]{
            color: red;
        } */
        /* id^=box 表示id属性值以box开头的 (正则表达式) */

        /* [id$="1"]{
            color: red;
        } */
        /* id$="1" 表示id属性值是以1结尾的元素 */

        [id*="o"]{
            color: yellow;
        }
        /* id*="o"表示id属性值中有o的元素 */

        [class~="item2"]{color: red;}
        /* 使用class一次性起了多个名字 使用~=可以使用其中一个名字 */
    </style>

class可以其很多名字  但是 id只能有一个名字 并且不可以和下面的id的属性值相同  可以当作身份证一样

链接伪类选择器：

 <style>
        /* 类 class 伪类：不存在这样一个类 */
        /* a:link{} :link就是一个伪类 但是你页面里有没有class="link" */
        /* a:link{} 普通状态下的 没有被点击的时候的样子 */
        .a1:link{
            color: pink;
        }

        /* .a1:visited{} 表示点击后的样式 */
        .a1:visited{
            color: yellow;
        }
        /* :link和:visited 可能存在一些兼容性问题 */

        .a1:hover{
            color: yellowgreen;
        }
        /* :hover表示我们鼠标移上去时候的颜色 去摸的时候的颜色 这个用的很多 */

        .a1:active{
            color: turquoise;
        }
        /* :active表示点击按压后的颜色 */

        #one:target,#two:target{
            background-color: red;
            color: white;
        }
        /* target目标 :target表示当我们跳转到锚点后锚点的样式 */
    </style>

<body>
    <div>
        <a href="" class="a1">百度以下，你就知道</a>
    </div>
    <div>
        <a href="#one">第一节</a>
        <a href="#two">第二节</a>
    </div>
    <h2 id="one">第一节</h2>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <h2 id="two">第二节</h2>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
    <p>111111111111111111111111111111</p>
</body>

伪类的意思就是不存在这一种类

a:link{} :link就是一种伪类 不存在的一种类   它是没有点击状态下的样子

:visited{} 是鼠标不放在那一段文字也不点击的状态下样式

:hover{}是鼠标移到文字不点击时所展示的样式

:active{}是鼠标点击文字后所展示的样式

target目标 :target表示我们跳转到锚点后展示的样式

 

位置伪类选择器：

<style>
        /* 位置伪类选择题  :nth-child() */
        /* div:nth-child(1){
            color: red;
        } */
        /* 和div同级的第一个元素如果是div的话就标红 */

        /* div:nth-child(odd){
            color: red;
        } */
        /* :nth-child(odd) odd有三个字母 所以odd代表的奇数 */

        /* div:nth-child(even){
            color: red;
        } */
        /* :nth-child(even) even有四个字母 所以even代表的是偶数 */

        /* p:nth-child(even){
            color: yellow;
        } */
        /* 表示和p标签同级的 是偶数的p标签的元素 */

        /* p:nth-child(2n){
            color: yellow;
        } */
        /* :nth-child(2n) n取之是从0开始 2n表示偶数 */
        /* 和even一样 */

        /* span:nth-child(2n+1){
            color: violet;
        } */
        /* 2n+1就表示奇数 */

        ul li:last-child{
            color: red;
        }
        /* :last-child 表示当前级别最后一个元素 */

        ul li:first-child{
            color: yellow;
        }
        /* :first-child表示当前级别第一个元素 */

        div:nth-of-type(1){
            color: red;
        }
        /* 他表示的是每一级别中第一个div */

        div:nth-of-type(2){
            color: yellow;
        }
    </style>

div:nth-child(1)就是和div同级的第一个元素

:nth-child(odd)就是和div同级的位置在奇数上的元素

:nth-child(even)是和div同级的位置在偶数的元素

:nth-child()前面用什么标签就是选中什么标签

:nth-child(2n) n取值为0 2n表示偶数 和 even一样

:nth-child(2n+1)和 odd 一样

:last-child{}表示选中这个标签的最后一个

:first-child{}表示选中这个标签的第一个元素

:nth-of-type(1)它表示每一级的第一个div   括号里面的数字是几就是每一级的第几个div

input伪类选择器：

<style>
        /* 获取焦点后状态 */
        /* :focus 表示聚焦后的状态 */
        input:focus{
            width: 500px;
            height: 100px;
            background-color: chartreuse;
        }

        /* 禁用后状态 */
        input:disabled{
            background: skyblue;
        }
        /* 表示输入框被禁用后 背景颜色变成了天空蓝 */

        /* 可输入时候的样式 */
        input:enabled{
            background: gold;
        }
        /* 表示正常情况下的样式 */


        /* 对欧鹏浏览器有用 */
    </style>

<body>
    <label for="name">姓名：</label>
    <input type="text"  id="name" disabled value="张三">
    <!-- disabled 表示禁用当前输入框 -->
    <!-- input中属性value的值就是输入框中你输入的值 -->
    <!-- 想让有提示语 -->
    <input type="text" name="" id="">

:focus 表示点击输入框聚焦后的状态

:disabled 表示禁用输入框   background是对输入框背景颜色的修改

:enabled 表示正常状态下的样式

伪元素选择器：

 <style>
        /* 选中第一个字 */
        /* p::first-letter{
            color: red;
            font-size: 60px;
        } */
        /* 让我p标签包裹的内容里面的第一个字 变成我们想要的样子 */

        /* 选中第一行 */
        /* p::first-line{
            background: skyblue;
        } */
        /* 选中我们P标签的第一行 让第一行为天空蓝 */

        /* p::selection{
            background-color: slateblue;
            color: red;
        } */
        /* 选中文本 */
        /* 浏览器不支持 用的很少 */
        .father::after{
            content: "这是father的后面";
            display: block;
            /* 表示我们插入的是一个男标签 */
            /* display就是用来指定性别的 block就是男*/
            color: red;
        }
        /* after是在什么之后 */
        /* content 内容 你只要用::after 或者::before 都需要写上content  */

        .name::after{
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            border-radius: 50%;
            border: 1px solid red;
        }
        /* ::after就是挂在到我们元素身后的一个伪元素  伪元素不会再html代码里面展示
            其呈现在页面上的内容 是其属性content中的属性值
        */

        .name::before{
            content: "姓名是";
            display: block;
        }
        /* ::before 就是挂到我们选中的元素之前，内容也是写在content里面 */
    </style>

<body>
    <p>新华社北京5月18日电（记者 邰思聪）记者18日从北京市人民政府相关部门了解到，截至5月18日9时，北京全市累计接种新冠疫苗人数达到1557.8万人，全市18岁及以上人群“第1剂”新冠疫苗接种率突破80%。全市医疗卫生、住建、城市管理、邮政快递、旅游景点、星级酒店、商业服务等系统（行业）接种率超过90%。</p>
    <div class="father">
        123
        <div class="son">son</div>
        456
    </div>


    <p class="name">张三</p>
</body>

字体相关的属性：

<style>
        /* 字体大小的设置 font-size */
        .box1{
            font-size: 13px;
            /* 属性值为px的 */
        }
        .box2{
            font-size: 200%;
            /* 属性值为百分比的时候 其对比是他父级的字体大小 */
        }
        .box3{
            font-size: small;
            /* 属性值为单词的 其每个单词有固定的px大小 有兴趣的可以查一下 就好比你穿的衣服一样*/
        }
        /* 一个字 最小是12px */

        /* 设置字体是否倾斜 font-style*/
        .box4{
            font-style: normal;
            /* 属性值为normal的时候 表示正常 */
        }
        .box5{
            font-style: italic;
            /* 属性值为italic的时候 表示倾斜 */
        }

        /* 设置字体粗细 */
        .box6{
            font-weight: normal;
            /* 属性值为normal的时候 表示正常 */
        }
        .box7{
            font-weight: bold;
            /* 属性值为bold和bolder的时候 都表示加粗 */
        }
        .box8{
            font-weight: 200;
            /* 属性值大于400的时候 是加粗 400是正常 小于400是变细*/
        }

        /* 设置字体的格式 font-family */
        .box9{
            font-family: 黑体;
        }
        .box10{
            font-family: 'Courier New', Courier, monospace;
        }

        /* 设置字体颜色 color */
        .box11{
            color: yellow;
            /* 颜色的第一种表示方式 */
        }
        .box12{
            color:	#FFC0CB;
            /* 颜色的第二种表示方式 十六进制表示法 */
        }
        .box13 a{
            color: rgb(99, 84, 87);
            /* 颜色的第三种表示方法 rgb表示法 */
            /* 切记 如果你想调整颜色的是a标签 一定要选到他的头上 */
        }
    </style>

font-size:调节字体大小

font-style:调节字体倾斜度

font-weight:字体加粗

 font-family:字体风格

 color:字体颜色

文本相关属性：

    <style>
        .box1{
            text-decoration: underline;
            /* 表示下划线 */
        }
        .box2{
            text-decoration: overline;
            /* 表示上划线 */
        }
        .box3{
            text-decoration: line-through;
            /* 表示中划线 */
        }

        /* 表示文本的位置 */
        .box4{
            border: 1px solid red;
            text-align: left;
        }
        .box5{
            border: 1px solid red;
            text-align: center;
        }
        .box6{
            border: 1px solid red;
            text-align: right;
        }
        img{
            border: 1px solid red;
            text-align: right;
        }

        /* 设置文本首行缩进 */
        .box7{
            text-indent: 2em;
            /* em表示当前段落一个字的大小 所以1em就表示一个字大 如果一个字是20px 那么1em=20px */
        }
        .box8{
            background: url("./images/logo.png");
            width: 200px;
            height: 100px;
            text-indent: -9999em;
            /* 这样的话 你的这个字看不到了 */
            /* 更有利于我们后期的SEO优化 */
        }
        
        /* 设置行高line-height */
        .box9{
            line-height: 100px;
            /* 设置的是一行的高度 */
        }
        .box10{
            height: 80px;
            border: 1px solid red;
        }
        .box10 p{
            margin: 0;
            padding: 0;
            line-height: 80px;
            /* 文字肯定在这一行的中间 */
            /* 让line-height的行高等于外面你想让他所在盒子的高度 */
        }

        /* 设置文字间距 letter-spacing word-spacing*/
        .box11{
            letter-spacing: 8px;
        }
        .box12{
            word-spacing: 8px;
        }
        .box13{
            word-spacing: 15px;
            /* word-spacing表示的是单词之间的间距 */
        }

        /* 设置文字透明 */
        .box14{
            font-size: 20px;
            font-weight: 900;
            color: rgba(255, 182, 193, 0.5);
            /* rgba最后一个参数表示的是 透明度 */
            /* 0.5表示半透明 0表示全透明 1表示不透明 */
        }
        .box15{
            width: 300px;
            height: 300px;
            /* background-color:gold transparent ; */
            /* transparent表示完全透明 */
            /* background: pink;
            opacity: 0.5; */
            /* opcity也是透明度
                和rgba的区别在于能不能继承
                rgba是不会继承的
                opcity会继承
            */
            background: rgba(245, 11, 11, 0.1);
            color: black;
            font-size: 35px;
        }

        /* 设置文字突起 text-shadow */
        .box16{
            width: 800px;
            height: 200px;
            background-color: tomato;
            text-align: center;
            font-size: 90px;
            line-height: 200px;
            color: tomato;
            text-shadow: -1px -1px 2px #fff,1px 1px 2px #000;
            /* 文字突起 */
        }
        .box17{
            width: 800px;
            height: 200px;
            background-color: tomato;
            text-align: center;
            font-size: 90px;
            line-height: 200px;
            color: tomato;
            text-shadow: 1px 1px 2px #fff,-1px -1px 2px #000;
            /* 文字凹陷 */
        }
    </style>

 text-decoration:下划线

 border: 1px solid red; border边框  1px边框的粗细为1px solid边框为实线 red边框的颜色为红色

text-indent:一段文字中一个文字的大小 1em表示一个字大小  如果一个字是20px 那么1em=20px

line-height:表示一行的高度

 letter-spacing:文字间的距离

word-spacing:单词间的距离

color: rgba(255, 182, 193, 0.5);

rgba:前三个是用户来设置颜色的  a 是用来调节字体的透明度   不可以继承

opacity: 0.5;也是透明度  这个可以继承

<body>
    <h1>1.文本下划线的设置 text-decoration</h1>
    <p class="box1">这是属性值是underline的</p>
    <p class="box2">这是属性值为overline的</p>
    <p class="box3">这是属性值为line-through</p>
    <hr>
    <h1>2.文本的位置 text-align</h1>
    <p class="box4">这是属性值为left</p>
    <p class="box5">这是属性值为center</p>
    <p class="box6">这是属性值为right</p>
    <hr>
    <img src="./images/logo.png" alt="">
    <hr>
    <h1>3.首行缩进 text-indent</h1>
    <p class="box7">水水水水水水水水水水水水水水水水水水水杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀水水水水水水水水水水水<br>水水水水水水水水水水水水水水水水水水</p>
    <p class="box8">王者荣耀</p>
    <hr>
    <h1>4.设置行高 line-height</h1>
    <p class="box9">水水水水水水水水水水水水水水水水水水水杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀水水水水水水水水水水水<br>水水水水水水水水水水水水水水水水水水</p>
    <div class="box10">
        <p>我是box10里面的文字</p>
    </div>
    <hr>
    <h1>5.设置字间距 letter-spacing(中文) word-spacing(英文)</h1>
    <p class="box11">螃蟹在剥我的壳，笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我</p>
    <p class="box12">螃蟹在剥我的壳，笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我</p>
    <p class="box13">Crabs are peeling my shell, and my notebook is writing me. I fell on the maple leaf on the snow all over the sky. And you're thinking about me</p>
    <hr>
    <h1>6.设置文本透明</h1>
    <p class="box14">螃蟹在剥我的壳，笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我</p>
    <div class="box15">这是opcity里面的字</div>
    <hr>
    <h1>7.设置文字是否突起 text-shadow</h1>
    <p class="box16">我是突起的文字</p>
    <p class="box17">我是凹陷的文字</p>
</body>

css的层叠性

 <style>
        .box1{
            color: red;
        }
        .box2{
            color: green;
        }
    </style>
</head>
<body>
     类名可以写 多个  就好像你小名  旺财 二狗 傻狗 
    <div class="box1 box2">我的小名有box1 box2</div>
     这个红色是否起作用 
        1.红色起作用了
        2.代码 从上往下 从左往右执行 走到元素这里 加载这个元素 首先加载的是box1 然后加载的是box2
        你这个box1 和 box2同时作用于一个元素了  后面的样式盖在了前面这个样式的上面
        3.这种就叫我们的层叠性 其实就是一层一层覆盖 我们看到的是盖在最上面的(同种类型的选择器)
    
</body>
</html> -->

<!-- 同一位置的不同选择器选中同一个元素 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{
            color: red;
        } */
        /* #box{
            color: yellow;
        } */
        div{
            color: yellowgreen;
        }
        *{
            color: turquoise;
        }
        /* 选择器的优先级别 ID选择器>类选择器>标签选择器>通配符选择器 */
        /* 在同一位置的情况下 ID选择器>类选择器>标签选择器>通配符选择器 */
    </style>
</head>
<body>
    <div class="box" id="box">这是同时被三个选择器选中的元素</div>
</body>
</html> -->

<!-- 不同位置的优先级别 写css代码的不同位置-->
<!-- 页内样式 行内样式 外部样式 (导入式)  -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./out.css">
    <style>
        .box{
            color: red;
        }
        /* 行内样式的优先级别>页内样式的优先级别>外部样式的优先级别 */
        /* 距离标签越近 优先级别越高  近水楼台先得月 */
    </style>

<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>test</title>
    <style>
        .father{
            color: red;
        }
        .son{
            color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">father
        <div class="son">
            son
        </div>
    </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>Document</title>
    <style>
        .box .P1 .S1{
            color: red;
            /* 30 */
        }
        div p span{
            color: skyblue;
            /* 3 */
        }
        #box1 #p1 #s1{
            color: springgreen;
            /* 300 */
        }

        div .P1 .S1{
            color: yellow;
            /* 21 */
        }
        div #p1 #s1{
            color: teal;
            /* 201 */
        }
        
        div #p1 .S1{
            color: violet;
            /* 111 */
        }
        div .P1 #s1{
            color: tomato;
            /* 111 */
        }

        /* 当选择器是复合的时候，我们通过权重来判定优先级别
        认为id选择器权重为 100
        类选择器权重为  10
        标签选择器权重为 1
        加起来 权重最大的 就是优先级别最高的
        当权重相同的时候 谁在后面  谁优先级别高    
        */
    </style>
</head>
<body>
    <div class="box" id="box1">
        <p class="P1" id="p1">
            <span class="S1" id="s1">这是span标签</span>
        </p>
    </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>最高级</title>
    <style>
        
        /* 可以理解为 !important权重为无限大  */
        .box{
            color: turquoise !important;
        }
        #box{
            color: yellow;
        }
        div{
            color: red !important;
        }
        /* 无穷大+1  无穷大+100 */
        /* 1.我们后期会学习第三方的ui库 有的样式我们不太想要
                1)重写他的类
                2)就是在我们写的类后面加上!important
        */
    </style>
</head>
<body>
    <div class="box" id="box" style="color: yellowgreen;">
        这是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>重写类</title>
    <link rel="stylesheet" href="./out.css">
    <style>
        .box{
            color: yellow;
        }
        /* 当类名相同的时候 我们就对其进行了重写 */
    </style>
</head>
<body>
    <div class="box">这是box</div>
</body>

显示模式：

 <style>
         p{
             border: 1px solid red;
             width: 500px;
             text-align: center;
         }
         div{
             border: 1px solid yellow;
             width: 500px;
         }
         span{
             border: 1px solid red;
             text-align: center;
             width: 500px;
         }
         /* 男女标签的区别(行内元素和块级元素的区别)
            1.块级元素独占一行 行内元素可以和其他行内元素以及行内块元素共处一行
                需要注意的是 行内元素不能和块级元素共处一行
            2.行内元素不能设定宽高 其宽高是内容撑起来的高度
                块级元素可以设定宽高 如果没有设定 则其默认宽度为父级100%
         */
         /* 出现了一个需求 就是我又想让一个元素能设定宽高 又想让他们共处一行
            1.用人妖标签
            2.浮动 后面再讲
         */
         /* 人妖标签 img input
            1.它可以设定宽高
            2.它可以共处一行
         */
         .father{
             width: 500px;
             height: 500px;
             border: 1px solid red;
         }
         .son{
             border: 1px solid yellow;
         }
         .renyao{
             width: 300px;
             height: 100px;
            
         }
         /* :enabled表示可以输入时候的状态 样式 */
         .renyao:enabled{
            background: chartreuse;
         }
     </style>

<body>
     <!-- 男标签 女标签 人妖标签 -->
     <!-- 男标签独占一行 学名 块级元素 -->
     <p>这是一个P标签 他是男标签</p>
     <div>这是一个div标签 他是男标签</div>
     <p>这是一个P标签 他是男标签</p>

     <!-- 女标签是不是可以和其他女标签共处一行 学名叫 行内元素  -->
     <span>这是一个span</span>
     <span>这是一个span</span>
     <span>这是一个span</span>



     <div class="father">
         <p class="son">这是儿子</p>
     </div>
     
     <!-- 人妖标签 -->
     <input class="renyao" type="text" name="" id="">
     <input class="renyao" type="text" name="" id="">
 </body>

变性手术：

 <style>
        ul li{
            /* 变性手术使用的属性 叫 display */
            /* 当属性值为inline的时候 表示 行内元素 也就是女标签 */
            display: inline;
            border: 1px solid red;
            width: 100px;
        }
        p{
            display: inline;
        }

        span{
            /* 当属性值为block得时候 表示块级元素 也就是男标签 */
            display: block;
            border: 1px solid red;
            width: 200px;
            /* 当你变成男标签之后 就可以设定宽高了  */
        }

        /* 需求是 需要我的p标签并排显示 并且可以设定宽高 */
        .p{
            /* 当属性值为inline-block的时候 就是人妖标签 行内块元素 */
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>

<body>
    <!-- 男变女 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <!-- li是什么标签 男的 -->
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <!-- p标签是男标签 -->

    <!-- 女变男 -->
    <span>这原本是女标签</span>
    <span>这原本是女标签</span>
    <span>这原本是女标签</span>

    <!-- 变人妖 -->
    <p class="p">新闻</p>
    <p class="p">hao123</p>
    <p class="p">地图</p>
    <p class="p">直播</p>
    <p class="p">视频</p>
    <p class="p">贴吧</p>
    <p class="p">学术</p>
    <p class="p">更多</p>
</body>

display:inline表示行内元素  就是女标签

display:block表示块级元素 是男标签

display:inline-block表示行内块级元素 人妖标签

溢出处理：

 <style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* overflow属性  处理超出部分 */
            overflow: hidden ;
            /* 当属性值为hidden 表示 超出部分隐藏 */
            /* overflow: visible; */
            /* visible就是不隐藏 看得见  当我们什么都不写的时候 默认的就是visible */
            /* overflow: scroll; */
            /* 当属性值为scroll的时候 就表示卷起来 就是出现滚动条 */
            /* overflow: auto; */
            /* 这个auto在不同场合的时候 意思不太一样 所以说 尽量不用 */
        }
        .son{
            width: 500px;
            height: 500px;
            background: chartreuse;
            overflow: inherit;
            /* 当属性值为inherit的时候 就表示继承父级的overflow的属性值 */
        }
        .grandson{
            width: 900px;
            height: 900px;
            background: lightcoral;
        }
    </style>

<body>
    <!-- 当我们子元素的内容 大于父元素的区域大小时 ，就出现了元素溢出的情况 -->
    <!-- 如何去处理元素溢出 -->
    <div class="father">
        <div class="son">
            <div class="grandson">

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

overflow属性  意思是处理超出部分

 overflow: hidden ;超出部分隐藏

overflow: visible;不隐藏 看得见

overflow: scroll;卷起来 就是出现滚动条

overflow: auto;这个auto在不同场合的时候 意思不太一样 所以说 尽量不用

 overflow: inherit;当属性值为inherit的时候 就表示继承父级的overflow的属性值

单词的溢出处理：

<style>
        .box{
            width: 400px;
            height: 400px;
            border: 3px solid red;
            /* word-break: normal; */
            /* 当属性值为normal是遵循浏览器的默认规则 当我们什么都不写的时候 就是normal */
            /* word-break: keep-all; */
            /* 当属性值为keep-all的时候是报证单词的完整性 */
            /* word-break: break-all; */
            /* 当属性值为break-all的时候 报证优先填满一行 填不满强行打断 */
            word-break: break-word;
            /* 当属性值为break-word的时候是报证单词的完整性 */
        }
    </style>

<body>
    <div class="father">
        <div class="box">
            There are manyssssssssssssssssssssssssssssssssssssssssssssssss apple trees in a garden. They’re good friends. One day an old tree is ill. There are many pests in the tree. Leaves of the tree turn yellow. The old tree feels very sad and unwell. Another tree sends for a doctor for him. At first, they send for a pigeon, but she has no idea about it. Then they send for an oriole, and she can’t treat the old tree well. Then they send for a woodpecker. She is a good doctor. She pecks a hole in the tree and eats lots of pests. At last the old tree becomes better and better. Leaves turn green and green.
        </div>
    </div>
</body>

word-break: normal;是遵循浏览器的默认规则

word-break: keep-all;保证单词的完整性

word-break: break-all;保证优先填满一行 填不满强行打断

word-break: break-word;保证单词的完整性

 white-space: nowrap;这一行的内容超出了 也不换行

overflow hidden可以和white-space搭配使用

初始盒子模型：

    <style>
        /* 你去写一个盒子  都需要去考虑哪些东西 */
        .box{
            /* 宽 高 */
            width:500px;
            height:500px;
            /* 最小宽 最小高 */
            /* min-width: 1200px;
            min-height: 500px; */
            /* min-width叫最小宽 min-height叫最小高 */
            /* min-width就是给一个最小宽 不论我们浏览器的窗口怎么拉 他都不会小于最小宽 */
            /* max-width: 1400px;
            max-height: 1400px; */
            /* max-width就表示的最大宽 */
            /*  */
            /* 背景
                背景色
                背景
            */

            /* 外边距 */
            margin: 30px;
            /* 就表示上下左右都是30px的外边距 但是由于只有一个元素的时候 */

            /* 内边距 */
            padding:30px;
            background: yellow;

            border:1px solid red;
            border-radius: 50%;

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

通过边框实现小三角：

 <style>
        .box{
            /* 边框  属性名为 border boder是一个复合属性  其属性值 有多个含义*/
            /* 第一个属性值为边框粗细 第二个属性值为边框的样式 第三个属性值为边框的颜色*/
            /* border: 20px solid red;
            width: 500px;
            height: 500px; */
            /* 你也可以单独写 */
            /* 我可以单独的写某一个方向的边框 */
            /* 上边框 border-top 后面的参数和border的一样 none就表示 什么都没有 */
            /* border-top: 20px solid yellow;
            border-left: 20px solid skyblue;
            border-right: 20px solid rgb(35, 35, 9); */

            width: 0;
            height: 0;
            border-top: 20px solid red;
            border-left: 20px solid rgba(141, 255, 120, 0);
            border-bottom: 20px solid rgba(142, 0, 0, 0);
            border-right: 20px solid rgba(145, 70, 57,0);
            /* 实现我们的小三角 */
            /* 如果说你不会 或者想不懂原理 没关系 百度很多 */
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

盒子的内边距：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            /* 规定的我的内容的宽度 */
            height: 500px;
            border: 1px solid red;
            /* 内边距的属性名叫Padding 其参数有四种形式 */
            padding: 50px;
            /* 写一次参数 表示上下左右的内边距都是50px */
            padding: 50px 20px;
            /* 当为两个参数的时候 分别代表什么 50px是上下的内边距 20px是左右的内边距 */
            padding: 50px 20px 10px;
            /* 当有三个参数的时候 上 左右 下 */
            padding: 50px 40px 30px 20px;
            /* 当有四个参数的时候 上 右 下 左 */
            /* 第二种写法 */
            /* 你可以直接给某一个方向上添加内边距 */
            padding-top: 10px;
            /* 
                padding-bottom
                padding-left
                padding-right
            */
        }
    </style>
</head>
<body>
    <div class="box">
        <p>1111111111111111</p>
    </div>
</body>

盒子的外边距：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background: skyblue;
            /* margin就是外边距的属性名 属性值和padding一样 */
            margin: 50px 100px 20px 10px;
            /* 一个参数表示四个方向都是50px */
            /* 两个参数 50px表示的上下 100px表示的是左右 */
            /* 上 左右 下 */
            /* 上右下左 */
        }
        .father{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- 外边距是啥  外边的距离 -->
    <!-- 外边距可以是兄弟之间 -->
    <!-- 外边距可以是父子之间吗? -->
    <!-- 男标签 如果宽度不设置 则是父级的100% 如果高度不设置 则是内容所撑起来的高度 -->
    <div class="father">
        <div class="box">

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

        </div>
    </div>
    <!-- 外边距就是与最近的相邻元素的距离 -->
    <!-- 你想让他哪边有外边距 那你就给他写margin-方向 就行 -->
</body>

margin父子关系时重叠问题：

<style>
      .father {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        /* auto是尽可能大的意思 */
        background: springgreen;
        padding-top:1px ;
      }
      .son {
        width: 100px;
        height: 100px;
        margin-top: 50px;
        background: turquoise;
      }
    </style>
  </head>
  <body>
    <!-- 垂直方向上 父子盒子高度合并问题 -->
    <!-- 解决方案
        1.给父级加一个边框 这种方法有时候不适用
        2.给父级加overflow:hidden 我们的一种小偏方 她不单单可以解决这个高度合并问题  也可以去解决浮动带来的一些问题
        3.你可以给父级加一个上面的内边距 但是会让盒子大一点点
        4.BFC 什么是BFC先不说 
    -->
    <div class="father">
      <div class="son"></div>
    </div>
  </body>

margin兄弟间重叠问题：

 <style>
        .box{
            width: 200px;
            height: 200px;
            background: turquoise;
            margin-bottom: 50px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: rgb(4, 35, 32);

        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <!-- 所以说目前这个没有合适的解决方案  我们通常只给其中一个写就可以了 -->
</body>

margin取值为auto：

<style>
        *{
          margin:0;
          padding: 0;
          /* 
          因为很多标签 他都有自带的一些样式 为了避免我们写页面过程中这个样式对我们
          的影响 我们通常会在最开始对其进行默认样式的重置 
          我们这种是最简单粗暴的
          */
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            /* auto的值 表示的是尽可能大 */
            /* margin-right: auto; */
            /* margin: 0 auto; */
        }
        span{
            background-color: greenyellow;
            color: red;
            margin: 50px;
            /* 女标签只能适用左右的margin 不能适用上下 */
        }
    </style>
  </head>
  <body>
      <div class="box"></div>
      <span>span</span>
  </body>

box-sizing：

 <style>
        .box{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid red;
            /* 在以上情况下 实际的占地高 内容高 也就是width的值+2*padding(上下的内边距)+上下的边框 */
        }
        /* box-sizing:border-box; */
        /* 他的作用就是 让你的width 和 height变成内部区域的高和宽 */
        .box2{
            width: 100px;
            height: 100px;
            border: 10px solid yellow;
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 一个盒子的实际占地是多大 -->
    <div class="box"></div>
    <div class="box2"></div>
</body>

背景图片：

 <style>
      .box {
        width: 1000px;
        height: 1000px;
        border: 20px dotted red;
        margin: 20px;
        /* 背景图  background-image*/
        background-image:url(./imgs/01.jpg) ;
        /* background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1324785138400.jpg&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628930142&t=e25ae7dd4e721e6e9307c4ca1f158259); */

        /* 背景图的大小 background-size */
        /* background-size: 500px 500px; */
        /* 这表示宽500px 高500px */
        /* 如果是百分比的话 那么就是你这个盒子的宽高*百分比  */
        /* background-size: cover; */
        /* cover就是让我们图片按原本的比例进行方法或者缩小,直到全部填满盒子为止,可能会有一部分超出 因为我们图片的横纵比和我们盒子的横纵比不一定相同 */
        /* background-size: contain; */
        /* 
            cover 是将盒子完全填满,但是图片不一定完全显示
            contain 就是将图片完全显示,但是盒子不一定填满
            因为他们两个都是对图片进行等比例缩放
        */

        /* background-repeat表示是否平铺 */
        background-repeat: no-repeat;
        /* no-repeat就表示不平铺 
            repeat-y就表示y轴方向平铺 X不平铺
            repeat-x就表示x轴方向平铺 Y不平铺
        */

        /* position有位置的意思 */
        /* background-position就是背景的位置 */
        background-position: -40px -40px ;
    }

  .box{
            width: 200px;
            height: 500px;
            border: 5px solid red;
            background: url('./imgs/01.jpg') no-repeat center center;
            /* background是一个复合属性 第一个参数 表示颜色或者图片 
                如果是图片则需要加上url(地址)
                第二个参数 表示是否平铺
                第三个参数 表示位置
            */
        }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>

 

精灵图的使用：

    <style>
        /* 类名以icon开头的元素 */
        [class^="icon-"]{
            background: url(./images/sn.png);
        }
        .icon-one{
            width: 80px;
            height: 80px;
            background-position: -770px 0px;
        }
        .icon-two{
            width: 80px;
            height: 25px;
            background-position:-670px -164px;
        }
    </style>
</head>
<body>
    <div class="icon-one"></div>
    <div class="icon-two"></div>
    <!-- 这两个用的背景图是一样的 但是由于我们这两个盒子大小设置不一样，且背景图起始坐标不一样 ，所以展示出来的也不一样 -->
</body>

精灵图练习（王者荣耀）

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            height: 70px;
            background: rgb(28, 30, 37) url(./images/logo.png) no-repeat 160px center;
            /* 背景色和背景图片能不能同时存在 */
            text-align: center;
        }
        .nav a{
            text-decoration: none;
            color: #fff;
            font-size: 22px;
            display: inline-block;
            width: 150px;
            height: 70px;
            line-height: 70px;
            /* text-align: center; */
        }
        .active,.nav a:hover{
            background: url(./images/sp.png) -5px -287px;
        }
    </style>    
</head>
<body>
    <div class="nav">
        <a href="#">专区说明</a>
        <a href="#" class="active">申请资格</a>
        <a href="#">奖励兑换</a>
        <a href="#">下载游戏</a>
    </div>
</body>

鼠标样式：

    <style>
        /* 控制鼠标样式的属性 cursor */
        p{
            cursor: pointer;
        }
        .move{
            cursor: move;
        }
    </style>
</head>
<body>
    <p>
        这是p标签(这是point版本 小手版)
    </p>
    <p class="move">
        这是p标签(这是move 移动版)
    </p>
</body>

resize属性：

   <style>
        /* resize控制是否可以放大缩小 */
        textarea{
            resize: none;
        }
        /* 当属性值为auto的时候 是可以拖动大小的 */
        /* 当属性值为none的时候 是不可以放大缩小的 */
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

水平居中方案：

    <style>
        .box{
            text-align: center;
            border: 1px solid red;
        }
        .box .son{
            width: 200px;
            height: 50px;
            border: 1px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- text-align ：center; -->
        <!-- 
            1.可以使文本内容居中
            2.他不能使块级元素在父级居中
            3.可以使其子级中女标签居中
            4.可以让其子级中行内块元素居中
        -->
    <!-- margin:0 auto -->
    <!-- 想让男标签居中 就用margin -->
    <!-- 区别 -->
    <div class="box">
        <div class="son">这是儿子</div>
    </div>
</body>

垂直方案：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 200px;
            border: 1px solid red;
            position: relative;
            /* 坐标原点 */
        }
        p{
            /* line-height是一行得行高 */
            line-height:60px ;
        }
        .son{
            width: 50px;
            height: 50px;
            background: #c1e5c1;
            /* margin: 0 auto; */
            position: absolute;
            /* 绝对定位 就是根据坐标原点进行定位 */
            left: 50%;
            top: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <p>这是垂直居中得元素</p> -->
        <!-- 如果让一个盒子居中 应该怎么做 -->
        <!-- 在父级上写上position:relative 然后在需要居中的子级上下position:absolute -->
        <!-- 然后再写left:50% top:50% -->
        <div class="son">

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

vertical-align属性：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            vertical-align: middle;

            /* top middle bottom */
            /* vertical-align表示的竖直方向上在父级中的位置 */
            /* 当属性值为top的时候 对准的是行顶 */
            /* 当属性值为middle的时候 对准的是中线 */
            /* 当属性值为bottom的时候 对准的是行底 */

        }
    </style>
</head>
<body>
    <p>这是一个图片<img src="../01-精灵图/images/bg1.jpg" alt="">这个是马超</p>
</body>

流动布局：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wd1200{
            width: 1200px;
            margin: 0 auto;
        }
        .main{
            width: 1200px;
            height: 500px;
        }
        .content{
            height: 300px;
            font-size: 0;

        }
        .content .left ,.content .right{
            width: 50%;
            height: 300px;
            display: inline-block;
           
        }
        .left{
            background: #cccc;
        }
        .right{
            background: rgb(11, 208, 67);
        }
    </style>
</head>
<body>
    <div class="main wd1200">
        <div class="header">
            头部
        </div>
        <div class="content">
            <div class="left">
            </div>
            <div class="right">
            </div>
        </div>
        <div class="footer">

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

浮动布局：

  <style>
        .main{
            width: 1200px;
            height: 600px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .header{
            width: 100%;
            height: 100px;
            background: #c6a4e7;
        }
        .content{
            width: 100%;
            height: 400px;
            font-size: 0;
        }
        /* 浮动  浮动的作用 让块级元素浮动起来 可以并排显示 一排填满换另一排 */
        /* 浮动属性 float
            值为left的时候 是左浮动
            值为right的时候 是右浮动
        */
        .left{
            width: 200px;
            height: 400px;
            float: left;
            background: #d62f2f;
            color: white;
            font-size: 20px;
        }
        .right{
            width: 200px;
            height: 400px;
            float: left;
            background: lightblue;
            font-size: 20px;
            color: white;
            margin-left: 60px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="header">头部</div>
        <div class="content">
            <div class="left">这是左边</div>
            <div class="right">这是右边</div>
        </div>
        <div class="footer">
            这是脚步
        </div>
    </div>
</body>

浮动带来的影响：

    <style>
        /* 块级元素的高度 如果不写的话  是内容撑起来的 */
        .father{
            border: 1px solid red;
            /* height: 700px; */
            overflow: hidden;
        }
        .father>.son{
            width: 500px;
            height: 500px;
            background: violet;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 浮动带来的影响 主要分两方面
        1.对兄弟元素带来的影响
        2.对父级元素带来的影响
    -->
    <!-- 对父级的影响
        高度塌陷问题  如何理解高度塌陷
        子元素一旦浮动 就半脱离标准文档流 导致父元素没有内容 所以高度塌陷了
    -->
    <!-- 解决方案1
        1)加高法  直接给父元素加一个高 
        2)overflow:hidden; 本意是 处理超出部分 超出部分隐藏
    -->
    <div class="father">
        <div class="son">
            这是子级
        </div>
    </div>
</body>

浮动带来的影响：

<style>
        /* 块级元素的高度 如果不写的话  是内容撑起来的 */
        .father{
            border: 1px solid red;
            /* height: 700px; */
            /* overflow: hidden; */
        }
        .father>.son{
            width: 500px;
            height: 500px;
            background: violet;
            float: left;
        }
        .father::after{
            content: "";
            display: block;

            /* 核心代码 */
            clear: both;

            /* 辅助 */
            font-size: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <!-- 浮动带来的影响 主要分两方面
        1.对兄弟元素带来的影响
        2.对父级元素带来的影响
    -->
    <!-- 对父级的影响
        高度塌陷问题  如何理解高度塌陷
        子元素一旦浮动 就半脱离标准文档流 导致父元素没有内容 所以高度塌陷了
    -->
    <!-- 解决方案1
        1)加高法  直接给父元素加一个高 
        2)overflow:hidden; 本意是 处理超出部分 超出部分隐藏
        3)内墙法 这里需要用到一个属性 clear:both; 清除浮动
        4)伪元素法 这种方法用的也很多
    -->
    <div class="father">
        <div class="son">
            这是子级
        </div>
    </div>
</body>

浮动带来的影响2：

  <!-- 为什么说浮动式半脱离标准文档流 -->
    <!-- 解决兄弟浮动带来的影响 -->
    <!-- 
        1.

     -->
    <style>
        .father{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .son1{
            width: 300px;
            height: 300px;
            background: skyblue;
            float: left;
        }
        .son2{
            width: 300px;
            height: 300px;
            background: springgreen;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div style="clear: both;"></div>
        <div class="son2"></div>
    </div>
</body>

圣杯布局：

 <style>
        .main{
            width: 1000px;
            height: 500px;
            border: 1px solid red;
            margin:0 auto;
        }
        .header{
            width: 100%;
            height: 100px;
            background: lightblue;
        }
        .container{
            width: 100%;
            height: 300px;

        }
        .container .left{
            width:300px;
            height: 300px;
            float: left;
            background: lightcoral;
        }
        .container .center{
            width: 400px;
            height: 300px;
            float: left;
            background: lightsalmon;
        }
        .container .right{
            width: 300px;
            height: 300px;
            float: left;
            background: lightseagreen;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: lightslategray;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="header">
        </div>
        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer">
        </div>
    </div>
</body>

相对定位：

    <style>
        .father{
            margin: 0 auto;
            width: 700px ;
            height: 700px;
            border: 1px solid red;

        }
        .son{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background: lime;
            position: relative;
            margin-top: 200px;
            /* 当你只有一个相对定位的时候 坐标轴是谁*/
            /* 其坐标原点是其原来的位置 */
        }

        /* 
        实际上定位有三种 
        相对定位 绝对定位 固定定位  
        定位的属性是 position 
        relative absolute fixed
        */

        /* 
            1)相对定位是不会脱离标准文档流的,他原本的位置还是被自己占着,别人是不能占用
            2)不管一个盒子 之前是什么性别  相对定位后 还是什么性别 性别是不会改变的
            3)一般情况下,我们一般都要通过使用left,top,right,bottom来设置偏移量 ,但是 position:relative这一行代码除了表示相对定位外 还有其他含义
            4)相对定位的应用场景,一般是用到对一个元素的位置进行微调
        */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

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

固定定位：

  <style>
        html{
            height: 300%;
        }
        .guanggao{
            width: 100px;
            height: 200px;
            border: 1px solid red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        /* 1.固定定位 没有参考点,就以body为参考点 */
        /* 2.固定定位也可以和margin同时使用 */
        /* 3.一般情况下 这种小广告 需要用到固定定位的东西 一般都是写在body的下一级 */
        /* .test{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow: scroll;
            position: relative;
        }
        .son{
            height: 200%;
        }
        .xiaoguanggao{
            width: 20px;
            height: 20px;
            position: fixed;
            background: lime;
            top: 0;
            right: 0;
        } */
    </style>
</head>
<body>
    <div class="guanggao">
        我是一个小广告,你来消灭我
    </div>

    <!-- <div class="test">
        <div class="son">

        </div>
        <div class="xiaoguanggao">

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