HTML

超文本标记语言
一套规则，浏览器认识的规则

HTML 结构
CSS 样式
JavaScript 交互行为

标签分类

1. 单标签 <header>
2. 双标签 <title>哈喽</title>

HTML5 标签含义之元素周期表

标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性=“值1” 属性2=“值2”>

在VS code 中，！+tab键，可以快速创建初始代码
在这里插入图片描述

<!DOCTYPE html>            文档声明（规则）
<html lang="en">           html看作一个人   只能有一个  1ang="en"表示是英文网站 1ang="zh-CN"中文网站




<head>                     head头   一个（在head内写的标签都不能看见，是内部，除了title）
    <meta charset="UTF-8">   指定编码，告诉浏览器是什么编码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  描述，对一个网站的描述
    <title>Document</title> 网页标题
</head>




<body>                     body身体   一个
    显示网页内容区域
</body>


</html>

在这里插入图片描述

网页标题提取：https://h5o.github.io/
在这里插入图片描述

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <p>
        p标签表示段落，放文本，自动换行，块级标签
    </p>    

    <p>
        内容1<br/>内容2    <!--   <br>或 <br/>表示在此处换行   -->
    </p>    
    
    <p>
        <strong>这是一段需要强调的文本（加粗）</strong>
        <em>这是一段需要强调的文本（斜体）</em>
        a <sup>2</sup>    <!--   sup标签表示上标 a^2  ，sub下标   -->
    </p>

    <p>
        原价<del>300</del>元，现价<ins>100</ins>    <!--   del删除线，ins下划线   -->
    </p>

</body>
</html>

在这里插入图片描述

2. 图片img、图标、超链接a、列表标签

图片标签img
超链接a
target="_blank"
跳转锚点#+id
图标&gt；
无序列表ul li
有序列表ol li
定义列表dl dt dd

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
<!-- ------------------------------------------------------------------------ -->
    <!-- 图片标签 -->
    <!-- 绝对路径 -->
    <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596062299,4246493210&fm=26&gp=0.jpg" alt="">
 

    <img src="1.jpg" title="美女" style="height: 200px ; width: 200px;" alt="美女" />
    <!--
    相对路径
    src="1.jpg"图片名
    title="美女"把鼠标放在图片上出现的字，
    style="height: 200px ; width: 200px;图片大小 
    alt="当图片失效了，显示友好信息
    -->
<!-- ------------------------------------------------------------------------ -->    
    <!-- a标签,超链接 -->
    <a href="http://www.baidu.com">    
        <img src="2.jpg" alt="链接失效">
    </a>




    <a href="http://www.baidu.com">访问百度</a>
    <a href="http:/www.baidu.com"  target="_blank">访问百度</a>
    <!-- target="_blank表示在新的页面打开链接，没有这个表示当前页面打开，默认情况下：在当前页面打开_self  -->
    <!-- 在head标签中写入<base target="_blank">，可以更改所有body标签中的超链接为新窗口打开 -->




    <!-- 跳转锚点 -->
    <!-- 实现一：#+id -->
    <a href="#i1">第一章</a>     <!--href="#i1表示用锚 ，在下方标签中id="i1"对应，点击第一章，跳转到当前页的第一章内容 -->
    <a href="#i2">第二章</a>     <!--注意，前面有一个  #号，href="#某个标签的id" -->
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <p id="i1">第一章的内容</p>
    <p id="i2">第二章的内容</p>
    <p id="i3">第三章的内容</p>
    <p id="i4">第四章的内容</p>
    
    <!-- 实现一：#+name属性 -->
    <a href="#1">html</a>  

    <a name=1></a>
    <p>模拟段落</p>
<!-- ------------------------------------------------------------------------ -->
    <!-- 图标，  &nbsp(空格);  &gt（>）; &lt(<) 等 -->
    <p>
        &lt;html&gt;
    </p>
<!-- ------------------------------------------------------------------------ -->
    <!-- 列表标签 -->
    <!-- 
    1.无序列表->ul li 符合嵌套的规范
    2.有序列表->ol li 一般用的比较少，可以用无序列表来实现
    3.定义列表->dl dt dd 列表项需要添加标题和对标题进行描述的内容
     -->

    <!-- (无须列表) -->
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

    <!-- 有序列表 -->
    <ol type="I"> 
        <li>第一项</li>
        <li>第二项</li>
    </ol>

    <!-- 定义列表
    <dl>：定义列表
    <dt>：定义专业术语或名词
    <dd>：对名词进行解释和描述 -->
<!-- ------------------------------------------------------------------------ -->
<!-- 嵌套列表 -->
    <ul>
        <li>山东省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
            </ul>
        </li>
        <li>四川省
            <ul>
                <li>成都市</li>
                <li>绵阳市</li>
            </ul>
        </li>
    </ul>

</body>
</html>

在这里插入图片描述

3. 表格table、表单form+input 标签

表格标签table
表单标签form+input

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- ------------------------------------------------------------------------ -->
<!-- 表格标签 -->
<!-- 
<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式
-->
    <table border="1" cellpadding="30" align="center">
        <thead>     <!--语义化标签--> 
            <tr align="center">   <!--表格行-->
                <th>日期</th>     <!--表头-->
                <th>天气情况</th>
                <th>空气质量</th>
            </tr>
        </thead>

        <tbody>    <!--语义化标签--> 
            <tr align="center"  valign="top">
                <td>2020-4-4</td>   <!--表格单元--> 
                <td>晴</td>
                <td>良好</td>
            </tr>
            <tr align="center">
                <td>2020-4-5</td>
                <td>小雨</td>
                <td>优</td>
            </tr>
        </tbody>
        <caption>天气预报</caption>   <!--表格标题--> 
    </table>
<!-- ------------------------------------------------------------------------ -->
<!-- 表单标签 -->
<form>：表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type	属性含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

    <form action="">  
        <h2>输入框</h2>
        <input type="text" placeholder="请输入用户名">

        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码">

        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>草莓

        <h2>单元框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女

        <h2>上传文件</h2>
        <input type="file" value="">

        <h2>多行文本框</h2>
        <textarea name="" id="" cols="30" rows="10"></textarea>

        <h2>下拉菜单</h2>
        <select name="" id="">
            <option selected disabled>请选择</option>
            <option >北京</option>
            <option >广州</option>
        </select>

        <h2>辅助表单</h2>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </form>
<!-- ------------------------------------------------------------------------ -->

</body>
</html>

在这里插入图片描述
表格表单组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tr align="center">
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
            </tr>

            <tr align="center">
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>

            <tr align="center">
                <td>密码：</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>

            <tr align="center">
                <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>

        </table>
    </form>
</body>
</html>

4. div 与 span 标签

div（块），div全称为division，分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联）：用来修饰文字的，行内标签。div与span都是没有任何默认样式的，需要配合CSS才行。

CSS

1.CSS语法格式

（1）内部样式，通过style标签
在<style>标签内添加的样式
注：内部样式的优点是可以复用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式，通过style标签 -->
    <style>
        /* 注释快捷键 ctrl+? */
        div{width: 25%;height: 100px;background-color: red;}
        span{background-color: rosybrown;}
    </style>
</head>

<body>
    <div>这是一个块级标签</div>
    <span>这是一个行内标签</span>
</body>
</html>

（2）内联（行内、行间）样式
在html标签上添加style属性来实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background-color: royalblue;width: 25%;height: 100px;">这是一个块级标签</div>
    <span style="background-color: salmon;">这是一个行内标签</span>
</body>
</html>

（3）外部样式
引入一个单独的CSS文件，name.css
通过 link 标签引入外部资源（样式），rel 属性指定资源跟页面的关系，href 属性资源的地址。

2.CSS背景样式

background-color 背景色
background-image 背景图

url（背景地址）默认：会水平垂直都铺满背景图

background-repeat 平铺方式

repeat-x
repeat-y
repeat（x，y 都进行平铺，默认值）

background-position：背景图片的位置

x：left、center、right
y：top、center、bottom

background-attachment：背景图随滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1000px; height: 500px;
            background-color: red;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.CSS 边框样式

border-style：边框样式

solid：实线
dashed：虚线
dotted：点线

border-width：边框大小

px…

border-color：边框颜色

red#fe0…

注：针对某一条边进行单独设置
颜色：透明颜色 transparent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1000px; height: 500px;
            border-style: dashed;
            border-width: 20px;
            border-top-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

4.CSS文字样式

font-family：字体类型

英文字体：Arial，Times New Roman
中文字体：微软雅黑，宋体

font-size：字体大小
font-weight：字体粗细

正常（normal）
加粗（bold）

font-style：字体样式

正常（normal）
斜体（italic）

color：字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 多个字体设置的目的：备选的字体，当电脑没有这个字体时，则采用备用 */
            /* 当有空格时，需要加引号 */
            font-family: 华文彩云;
            font-size: 50px;
            font-weight: bold;
            font-style: italic;
            color: red;
        }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

在这里插入图片描述

5.CSS段落样式

text-decoration：文本装饰

下划线：underline
删除线：line-through
上划线：overline

text-transform：文本大小写（针对英文段落）

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

text-indent：文本缩进首行缩进

em单位：相对单位，1em永远都是跟字体大小相同

text-align：文本对齐方式

对齐方式：left、right、center、justify（两端对齐）

line-height：定义行高

letter-spacing：字之间的间距

word-spacing：词之间的间距（针对英文段落的）

word-break:break-all：英文和数字不自动折行的问题

6.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合样式

background
border
font

复合的写法，是通过空格的方式实现的。
复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1.background : red url() repeat center center；
2.border：1px red solid；
3.font：
注：最少要有两个值 size family

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: url(1.jpg) repeat center center;
            border: deeppink solid 2px;
            font: 30px 宋体;
        }

    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

7.CSS选择器

ID选择器

css:#elem{

		}
html:id="elem"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            background-color: deeppink;
        }
        #div2{
            background-color: gold;
        }
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div> 
</body>
</html>

在这里插入图片描述
注：
1.在一个页面中，ID值是唯一的。
2.命名规范，字母或者_ 或者 - 或者数字（命名的第一位不能是数字）。
3.命方式，驼峰式、下划线式、短线式。

Class选择器

css:  .elem{

		}
html:class="elem"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .i1{background-color: gold;}
        .i2{font-size: 30px;}
        span.i3{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="i1">这是一个块</div>
    <div class="i1">这又是一个块</div>
    <p class="i1 i2">这是一个段落</p>
    <span class="i3">我爱我的家</span>
</body>
</html>

在这里插入图片描述
注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div>我爱我的家</div>
</body>
</html>

使用的场景：

去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

群组选择器

可以通过逗号的方式，给多个不同的选择器添加统一的Css样式，来达到代码的复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,#i1,.title{background-color: hotpink;}
    </style>
</head>
<body>
    <div>我爱我的家</div>
    <p id="i1">这是一个段落</p>
    <h1 class="title">这是一个标题</h1>
</body>
</html>

在这里插入图片描述

通用选择器

*{}
div，ul，1i，p，h1，h2.....{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{border: 2px red solid;}
    </style>
</head>
<body>
    <div>我爱我的家</div>
    <p id="i1">这是一个段落</p>
    <h1 class="title">这是一个标题</h1>
</body>
</html>

在这里插入图片描述
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：

去掉所有标签的默认样式时|

层次选择器

后代：M N { }
父子：M > N { }
兄弟：M ~ N { }  当前M下面的所有兄弟N标签
相邻：M + N { }  当前M下面相邻的N标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li{background-color: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class]{background-color: blue;}
        div[class='i2']{font-size: 50px;color: red;}
        div[class*='i3']{text-align: center;}
        div[class][id]{background-color: rosybrown;}
        /*正则
        = 完全匹配
        *= 部分匹配
        ^= 起始匹配
        $= 结束匹配 
         */
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div class="i1">这是一个块</div>
    <div class="i2">这是一个块</div>
    <div class="i3">这是一个块</div>
    <div class="i3-ii">这是一个块</div>
    <div class="i4" id="d">这是一个块</div>
</body>
</html>

在这里插入图片描述

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

:1ink  访问前的样式
:visited  访问后的样式
:hover  鼠标移入时的样式
:active  鼠标按下时的样式

注：
1.link visited 只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序：LVHA。
3.一般网站只这样去设置：afl a:hover}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
        /* 鼠标移动到标签样式改变 */
        div:hover{background-color: royalblue;}  
        /* 鼠标点击标签样式改变 */
        div:active{background-color: seagreen;}

        a:link{color: seagreen;}
        a:visited{color: tomato;}
        a:hover{color: silver;}
        a:active{color: turquoise;}
    </style>
</head>
<body>
    <div></div>
    <a href="#">这是一个链接</a>
</body>
</html>

:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled、:focus 都是针对表单元素的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :checked{width: 100px;height: 100px;}
        :disabled{width: 100px;height: 100px;}
        :focus{background-color: turquoise;}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox" checked> 
    <input type="checkbox" disabled>
    <input type="text">
</body>
</html>

在这里插入图片描述

结构性伪类选择器

nth-of-type()
nth-child()
角标是从1开始的，1表示第一项，2表示第二项|n值表示从e到无穷大

两者的区别
type：类型
child：孩子

first-of-type
last-of-type
only-of-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-of-type(2n-1){background-color: burlywood;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在这里插入图片描述

8.CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性inherit值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: crimson 2px solid;
            color:blue;
            font-size: large;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: crimson 2px solid;
            color:blue;
            font-size: large;
        }
        p{border: inherit;}    
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

在这里插入图片描述

9.CSS优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级
style行间>id>class>tag>*>继承
注：style行间权重1000
id 权重100
class 权重18
tag 权重1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #i1{color: maroon;}
        .i2{color: mediumblue;}
    </style>
</head>
<body>
    <div id="i1" style="color: lightseagreen;" class="i2">
        这是一个块
    </div>
</body>
</html>

10.CSS盒子模型

组成：
content->padding->border->margin
物品填充物包装盒盒子与盒子之间的间距

content：内容区域 width 和 height 组成的
padding：内边距
padding-left
padding-right
padding-top
padding-bottom

margin：外边距（外填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 48px 50px 60px（上、右、下、左）

注：
1.背景颜色会填充到margin以内的区域。
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。

box-sizing：盒尺寸，可以改变盒子模型的展示形态。
默认值：
content-box：width、height->作用于—>content
border-box：width、height->作用于—>content padding border

卖山楂啦prss

发布了120 篇原创文章 · 获赞 7 · 访问量 1万+

私信关注

HTML+CSS基础知识

文章目录

HTML

标签

1.标题h 、段落P 标签

2. 图片img、图标、超链接a、列表标签

3. 表格table、表单form+input 标签

4. div 与 span 标签

CSS

1.CSS语法格式

2.CSS背景样式

3.CSS 边框样式

4.CSS文字样式

5.CSS段落样式

6.CSS复合样式

7.CSS选择器

ID选择器

Class选择器

标签选择器

群组选择器

通用选择器

层次选择器

属性选择器

伪类选择器

8.CSS样式继承

9.CSS优先级

10.CSS盒子模型

猜你喜欢

HTML+CSS基础知识

文章目录

HTML

标签

1.标题h 、段落P 标签

2. 图片img、图标、超链接a、列表 标签

3. 表格table、表单form+input 标签

4. div 与 span 标签

CSS

1.CSS语法格式

2.CSS背景样式

3.CSS 边框样式

4.CSS文字样式

5.CSS段落样式

6.CSS复合样式

7.CSS选择器

ID选择器

Class选择器

标签选择器

群组选择器

通用选择器

层次选择器

属性选择器

伪类选择器

8.CSS样式继承

9.CSS优先级

10.CSS盒子模型

猜你喜欢

2. 图片img、图标、超链接a、列表标签