CSS基础笔记（完结）

CSS（层叠样式表）
style属性 font-size元素：控制字体大小
color元素：控制字体颜色（内联样式，也就是内嵌样式：属于结构和表现的耦合，不利于后期的维护，开发中不推荐使用的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
</head>
<body>
<a>我爱你中国</a>
<a style="font-size: 40px;color: #ff493d">我爱你中国</a>
</body>
</html>

在这里插入图片描述

一共有三种方法创建css
1.一是使用元素内嵌样式表
2.二是使用文档内嵌样式表
3.三是使用外部样式表

1.元素内嵌样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
</head>
<body>
<a>我爱你中国</a>
<a style="font-size: 40px;color: #ff493d">我爱你中国</a>
</body>
</html>

这个就是元素内嵌样式表

2.文档内嵌样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
    <style type="text/css">
        a {
     
     
            font-size: 30px;
            color: #2a9bff;
        }

    </style>
</head>
<body>
<a>我爱你中国</a>
</body>
</html>

在这里插入图片描述

3.外部样式表（结构和表现分离）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
    <link rel="stylesheet" type="text/css" href="111.css">
</head>
<body>
<a>我爱你中国</a>
</body>
</html>

a {
    font-size: 40px;
    color: #ff46d4;
}

在这里插入图片描述

注意：外部样式表能力小于元素内嵌和文档内嵌，文档内嵌小于元素内嵌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
    <link rel="stylesheet" type="text/css" href="111.css">
    <style type="text/css">
        a {
     
     
            font-size: 40px; color: aqua;
        }
    </style>
</head>
<body>
<a>我爱你中国</a>
<br/>
<a style="font-size: 40px;color: #ff3428">愿历尽千帆</a>
<a>归来仍少年</a>
</body>
</html>
外部
a {
    font-size: 40px;
    color: #ff46d4;
}

在这里插入图片描述

css基本选择器（通常只出现在文档内嵌样式表和外部样式表中）

选择所有元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>css初级</title>

</head>
<body>
<a>冲冲冲</a>
<p>冲冲冲</p>
<h1>冲冲冲</h1>
</body>
</html> p是标题元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
<style type="text/css">
      *{
     
     
          font-size: 40px;
          color: #ff4cd9;
      }
</style>
</head>
<body>
<a>冲冲冲</a>
<p>冲冲冲</p>
<h1>冲冲冲</h1>
</body>
</html>

在这里插入图片描述

根据类型选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
<style type="text/css">
      p{
     
     
          font-size: 40px;
          color: #ff4cd9;
      }
</style>
</head>
<body>
<a>冲冲冲</a>
<p>冲冲冲</p>
<h1>冲冲冲</h1>
</body>
</html>

在这里插入图片描述

根据类选择元素（class是一个全局属性，一个元素可以设置多个class属性值，多个属性值之间用空格隔开）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>css初级</title>
<style type="text/css">
    .class1 {
     
     
         font-size: 40px;
         color: #ff4cd9;
     }
</style>
</head>
<body>
<a>啦啦啦</a>
<br/>
<a class="class1">啦啦啦</a>
<p class="chass1">啦啦啦</p>
<h1>啦啦啦</h1>
</body>
</html>

在这里插入图片描述

根据id选择元素
id相当于是身份证号，class相当于是名字，所以id在html中只能一个元素用一个id
如果class和id都存在，那么只显示id的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
<style type="text/css">
     #id1 {
     
     
          font-size: 40px;
          color: #ff4cd9;
      }
</style>
</head>
<body>
<a id="id1">啦啦啦</a>
<br/>
<a>啦啦啦</a>
<p>啦啦啦</p>
<h1>啦啦啦</h1>
</body>
</html>

在这里插入图片描述

选择器分组
可以同时选中多个选择器对应的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 , .p2 ,h2 {
     
     
            background-color: #ff56d0;
        }
    </style>
</head>
<body>
    <p id="p1">啦啦啦</p>
    <h1 class="p2">略略略</h1>
    <h2>你好</h2>
</body>
</html>

在这里插入图片描述

复合选择器(交集选择器)同时满足多个选择器的元素
-对于id选择器来说，不建议使用复合选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span.p2{
     
     
            background-color: #b1b1b1;
        }
    </style>
</head>
<body>
    <p id="p1">啦啦啦</p>
    <h1 class="p2">略略略</h1>
    <span class="p2">略略略</span>
    <h2>你好</h2>
</body>
</html>

在这里插入图片描述

根据属性选择元素
语法【属性名】选取含有指定属性的元素
【属性名=“属性值”】选取含有指定属性值的元素
【属性名^=“属性值”】选取属性值以指定内容开头的元素
【属性名$=“属性值”】选取属性值以指定内容结尾的元素
【属性名*=“属性值”】选取属性值以包含指定内容的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
<style type="text/css">
     [href="500294514.jpg"]{
     
     
         font-size: 70px;
         color: #c49aff;
     }
</style>
</head>
<body>
<a href="500294514.jpg">啦啦啦</a>
<br/>
<a href="0721.1html.html">啦啦啦</a>
<p>啦啦啦</p>
<h1>啦啦啦</h1>
</body>
</html>

在这里插入图片描述

选择器动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css初级</title>
<style type="text/css">
     p{
     
     
         font-size: 70px;
         color: #c49aff;
     }
    p:hover{
     
     
        font-size: 100px;
        color: #ff3321;
    }
</style>
</head>
<body>
<a href="500294514.jpg">啦啦啦</a>
<br/>
<a href="0721.1html.html">啦啦啦</a>
<p>啦啦啦</p>
<h1>啦啦啦</h1>
</body>
</html>

在这里插入图片描述

后代元素选择器（语法：祖先后代{}）
例如改变下面的div标签中的span元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       div span{
     
     
           background-color: #b1b1b1;
       }
   </style>
</head>
<body>
   <div>
           <span>我是一个标签</span>
           <p><span>我是p中的span标签</span></p>
   </div>
   <span>我是body中的span标签</span>
</body>
</html>

在这里插入图片描述
例如改变id1的p元素的span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id1 p span{
     
     
            background-color: #b1b1b1;
        }
    </style>
</head>
<body>
    <div id="id1">
            <span>我是一个标签</span>
            <p><span>我是p中的span标签</span></p>
    </div>
    <span>我是body中的span标签</span>
    <div>
        <span>我是标签啊</span>
    </div>
</body>
</html>

在这里插入图片描述

伪类选择器
伪类：专门表示元素的一种状态，比如访问过的超链接，比如普通的超链接，比如获取焦点的文本框
伪类：a:link 正常的链接（就是没访问过的链接） a:visited 访问过的链接（只能定义字体的颜色）浏览器会通过历史记录来判断是否访问过。
a:hover 鼠标滑过的链接 a:active 正在点击的链接（被点击的状态，其中ie6不支持除了超链接以外的hover和active）伪类顺序：link visited hover active
：first-letter 改变首字母的样式
：first-line 改变首行的样式
:focus 获取焦点（文本框点进去可以输入东西）
::selection (为选中的内容设置使用样式)
否定伪类
：not（选择器）
例如： p：not（.hello) 否定p中class为hello的元素
子元素的伪类选择器
：first-child 可以选中第一个子元素
：last-child 可以选中最后一个子元素
：nth-child（）可以选择任意位置的子元素，括号中可以填数字或者even（表示偶数位置的子元素） odd（表示奇数位置的子元素）
：first-of-type 选择当前类型的第一个子元素
：last-of-type 选择当前类型的最后一个元素
：nth-of-type 选择当前类型任意位置的元素
兄弟元素选择器（选择一个元素后紧挨着的指定的兄弟元素）
语法：前一个+后一个选择后面的其中一个 span+p
前一个~后边所以选择后边所有的兄弟元素 span ~p

后代元素具有继承性，但不是所有的样式都会被子元素所继承，比如，背景相关的样式就不会被继承，还有边框相关的样式，定位相关的样式不会被继承

选择器优先级：当使用不同的选择器，选中同一个元素时并且设置相同的样式，又选择器的优先级决定。
优先级规则：内联样式，优先级 1000 id选择器，优先级 100 类和伪类，优先级 10 元素选择器，优先级 1 通配警号，优先级是0 继承的样式，没有优先级
混合选择器的优先级加起来。如果选择器的优先级一样，则会出现覆盖的效果。并集选择器的优先级是单独计算。
可以在样式的最后添加一个！important，则此时该样式将会获得一个最高级的优先级，设置优先于内联样式，但是避免使用important

div标签：一个块元素，无论内容多少，会独占一行，主要用来布局
span元素：是一个内联元素（行内元素：只占自身大小的元素，不会占一行）
span元素专门用来选择文字，来为文字设计样式，一般用块元素包裹内联元素，而不是用内联元素包裹块元素（H5中已经不分块元素和内联元素）
创建边框
border-style：边框种类（也可以分别指定四个边的边框类型）
border-width：边框宽度
border-color：边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
            border-width: 5px;
            border-color: #ff3349;
            border-style: solid;
            border-top-color: #ff46d4;
            border-left-color: #4649ff;
            border-bottom-color: aqua;
        }
    </style>
</head>
<body>
    <p class="class2">世界以痛吻我</p>
</body>
</html>

在这里插入图片描述

边框简写（没有顺序要求，但是只能指定四个边)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
      border: 5px solid red;
        }
    </style>
</head>
<body>
    <p class="class2">世界以痛吻我</p>
</body>
</html>

在这里插入图片描述

创建边框背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
             width: 1242px;
             height: 1535px;
             border: 5px solid red;
             background-image: url(QQ图片20190726101807.jpg);
        }
    </style>
</head>
<body>
    <p class="class2">世界以痛吻我</p>
</body>
</html>

在这里插入图片描述

创建网页背景（一张图片平铺效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
             background-image: url(QQ图片20190726101807.jpg);
        }
    </style>
</head>
<body class="class2">

</body>
</html>

在这里插入图片描述

创建网页背景（一张图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
             background-repeat: no-repeat;
             background-image: url(QQ图片20190726101807.jpg);
        }
    </style>
</head>
<body class="class2">

</body>
</html>

在这里插入图片描述

页面背景包含

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
             background-image: url(QQ图片20190726101807.jpg);
             background-size: contain;
        }
    </style>
</head>
<body class="class2">

</body>
</html>

在这里插入图片描述

背景随滑块滚动而滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框</title>
    <style type="text/css">
         .class2{
     
     
             background-attachment: fixed;
             background-image: url(QQ图片20190726101807.jpg);
             background-repeat: no-repeat;
        }
    </style>
</head>
<body class="class2">

</body>
</html>

在这里插入图片描述

设置圆角边框(border-radius后面的数字是圆心里左右边框的距离，和圆心离上下边的距离)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class3{
     
     
             width: 50px;
            height: 50px;
            border: 1px solid slateblue;
            background-color: #ff46d4;
            border-radius: 10px / 10px;
        }

    </style>
</head>
<body>
<p class="class3"></p>
</body>
</html>

在这里插入图片描述

对齐文本（可选值 left ，right，center，justify两边都对齐）text-indent用来就行首行缩进（可选值px，em都可以，1个em先当于一个字体，所以用em比较好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
            text-align: center;
        }
    </style>
</head>
<body>
<p class="class1">你好啊</p>
</body>
</html>

在这里插入图片描述

文字方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
            direction: rtl;
        }
    </style>
</head>
<body>
<p class="class1">你好啊</p>
</body>
</html>

在这里插入图片描述

设置文字间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
<p class="class1">你好啊</p>
</body>
</html>

在这里插入图片描述

设置单词间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
            word-spacing: 20px;
        }
    </style>
</head>
<body>
<p class="class1">hello world</p>
</body>
</html>

在这里插入图片描述

设置行高
可以接受的值：1.直接一个大小
2.指定一个百分数，会相对于字体计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
            line-height: 50px;
        }
    </style>
</head>
<body>
<p class="class1">hello world hello world hello world hello world hello world hello world hello world hello world hello world hello worldhello world hello world hello worldhello world hello world hello world hello world</p>
</body>
</html>

在这里插入图片描述

行间距，在CSS中没有一个直接设置行间距的方式，只能用行高（line-height）减字体大小（font-size）来间接设置行间距
首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
           text-indent: 40px;
        }
    </style>
</head>
<body>
<p class="class1">hello world hello world hello world hello world hello world hello world hello world hello world hello world hello worldhello world hello world hello worldhello world hello world hello world hello world</p>
</body>
</html>

在这里插入图片描述

文本装饰（上划线 overline，下划线underline，中间的线line-through,又叫删除线等等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
           text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="class1">干得漂亮</p>
</body>
</html>

在这里插入图片描述

超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline，如果需要去除超链接的下划线则需要将该样式设置为none就可以
文本大小写转换（text-transform: capitalize将每个单词的首字母大写
text-transform: uppercase将单词全部大写 text-transform: lowercase将单词全部小写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式</title>
    <style type="text/css">
        .class1{
     
     
           text-transform: lowercase;
        }
    </style>
</head>
<body>
<p class="class1">HeLlO WoRld</p>
</body>
</html>

在这里插入图片描述

font-variant可以用来设置小型大写字母，可选值：normal，默认值，文字正常显示
small-caps 文字以小型大写字母显示
CSS中还提供一种样式是font，可以设置所有与字体相关的样式，可以将字体的样式的值，统一写在font样式中，不同的值用空格分开，用font设置字体时，斜体加粗大小写没有顺序要求，设置可写可不写，如果不写就是默认值，但是文字大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式，字体大小后加/可以添加行高
文本名称（font-family）
字体可以分为5大类，前两类用的多
serif（衬线字体）sans-serif（非衬线字体）monospace（等宽字体）cursive（草书字体） fantasy（虚幻字体)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        .class1{
     
     
            font-family: "Adobe Devanagari";
        }
    </style>
</head>
<body>
<p class="class1">你好</p>
</body>
</html>

在这里插入图片描述

字体大小（font-size）浏览器默认是16px font-size一般不是字体的大小，而是格的高度，不同字体的格也不一样
字体样式（font-style）normal：默认字体
italic:意大利斜体（倾斜效果强，一般用italic） oblique：也是斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        .class1{
     
     
            font-family: "Adobe Devanagari";
            font-style: italic;
        }
    </style>
</head>
<body>
<p class="class1">你好</p>
</body>
</html>

在这里插入图片描述

设置字体粗细（font-weight）属性有normal (默认) bold（字体加粗显示）
也可以设置100-900的9个值，但是计算机中没有这么多级别的字体，所以达不到我们想要的效果，一般不用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        .class1{
     
     
            font-weight: 700;
        }
    </style>
</head>
<body>
<p class="class1">你好</p>
</body>
</html>

在这里插入图片描述

创建文本阴影(shadow里面是水平偏移程度竖直偏移程度模糊程度颜色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        .class1{
     
     
            font-weight: 700;
            text-shadow: 10px 2px 2px #ff56d0;
        }
    </style>
</head>
<body>
<p class="class1">你好</p>
</body>
</html>

在这里插入图片描述

CSS过渡
间接过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>间接过渡</title>
    <style type="text/css">
        p{
     
     
            width: 100px;
            height: 100px;
            background-color: #d6a9ff;
        }
        p:hover{
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            transition-delay: 300ms;     过渡延迟时间
            transition-duration: 200ms;  过渡效果持续时间
            transition-property: ;       平滑改变效果
        }
   </style>
</head>
<body>
<p></p>
</body>
</html>

transition-property后面可以加width，height，background-color构成缓慢变化效果，后面加width 宽度会缓慢变化
在这里插入图片描述

CSS动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画创建</title>
    <style type="text/css">
        p{
     
     
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
     
     
            animation-delay: 250ms; 动画延迟
            animation-duration: 1s; 动画持续时间
            animation-name: donghua;动画名字
            animation-iteration-count: infinite;数数，infinite：无限，动画会执行无数次
            animation-direction: alternate;先正方向再以反方向运行
        }
        @keyframes donghua {
     
       引导动画
            to{
     
      动画终止的内容，属性
                width: 150px;
                height: 150px;
                background-color: #d6a9ff;
            }
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

在这里插入图片描述

两张图片的过渡

CSS使用变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css变换</title>
    <style type="text/css">
        .class1{
     
     
            width: 100px;
            height: 100px;
            background-color: #ff56d0;
        }
        .class1:hover{
     
     
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(45deg);转换角度
            transform-origin: bottom right;旋转点，右下角
        }
        .class2{
     
     
            width: 100px;
            height: 100px;
            background-color: #ff56d0;
        }
        .class2:hover{
     
     
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<p class="class1"></p>
<p class="class2"></p>
</body>
</html>

在这里插入图片描述

- CSS盒子模型（CSS最重要的东西）
在这里插入图片描述
CSS处理网页时，他认为每个元素都在一个不可见的盒子中，所以将相应的盒子摆放在网页中相应的位置即可完成网页的布局。
一般分为几个部分：
-内容区
-内边距
-边框
-外边距

使用width来设置盒子内容区的宽度，height来设置内容区的高度，width和height只是设置盒子内容区的大小而不是整个盒子的大小，盒子可见框的大小由内容区，内边距，和边框共同决定。

为元素设置边框，要为一个元素设置边框必须指定三个样式，border-width，border-color，border-style，缺一不可.还有border-left-width，border-right-width，border-top-width，border-bottom-width。如果设置了四个值，分别会设置给上右下左，按照顺时针的方向设置的。如果设置三个值，则会分别设置上，左右，下。如果指定两个值，则是上下，左右；都适用）
内边距（padding），指的是盒子的内容区和盒子边缘之间的距离，一共四个方向的内边距，可以通过padding-top，padding-right，padding-bottom，padding-left。内边距会影响盒子的可见框的大小，元素的背景，，也就是内容区的背景会延申到内边距。
盒子的大小由内容区，内边距，和边框共同决定
使用padding可以同时设置四个边框的样式，规则和border-width一致
外边距是指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置，也是四个方向，margin-top，margin-left，margin-right，margin-bottom。margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值。垂直方向外边距如果设置为auto，则外边距默认就是0。如果将left和right同时设置为auto，则两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素居中。
由于页面中的元素都是靠左靠上的摆放的，所以我们注意当我们设置上和左外边框时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他。
垂直外边距的重叠：在网页中垂直方向的相邻外距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
浏览器为了在页面没有样式时，也可以有一个比较好的显示效果，所以为很多元素设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding去掉。
去除浏览器的默认样式用统配选择器

*{
    margin ：0;
    padding：0；
}

内联元素盒模型
内联元素不能设置width和height，内联元素可以设置垂直方向内边距，但是不会影响页面布局，内联元素可以设置边框但是垂直的边框不会影响页面的布局，内联元素水平方向的外边距不会重叠而是求和，内联元素不支持垂直外边距。
将一个内联元素变成块元素，可以通过display修改元素的类型，可选值有inline：可以将一个元素作为内联元素显示；block：可以将一个元素作为块元素显示；inline-block：将一个元素转化为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行；none：不显示元素，并且元素不会在页面中继续占有位置；
visibility：可以用来设置元素的隐藏和显示的状态，可选值：visible 默认值，元素默认会在页面中显示；hidden，元素会隐藏。不会显示。使用visibility：hidden隐藏的元素虽然不会在页面中显示，但是依然占着空间和位置。
overflow：子元素默认是存在于父元素的内容区的，理论上讲子元素的最大可以等于父元素内容区大小，如果子元素大小超过了内容区的大小，则超过的部分会在父元素以外的部分显示，超过父元素的部分，我们称为溢出的内容，父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出的内容。overflow的可选值：visible 默认值不会对溢出内容进行处理，元素会在父元素以外的位置显示。hidden：溢出的内容会被隐藏。scroll：会为父元素添加滚动条。（该属性无论内容是否溢出都会加上）。auto：会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .yi{
     
     
            width: 200px;
            height: 200px;
            background-color: #ff46d4;
            overflow: hidden;
        }
        .er{
     
     
            width: 100px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
        <div class="yi">
            <div class="er"></div>
        </div>
</body>
</html>

在这里插入图片描述

块元素和内嵌元素区别：块元素元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。
**

常见块元素(block element)：

**
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）

内联元素

◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

文档流：文档流处在网页的最底层，它表示的是一个页面的位置，我们所创建的元素默认都处在文档流中。（文档指的就是网页）
元素在文档流中的特点：
1.块元素：块元素在文档流中会独占一行，块元素会自上向下排列；块元素在文档流中默认宽度是父元素的百分之百；块元素在文档流中的高度默认被内容（子元素）撑开
2.内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列。如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右；内联元素的宽度和高度默认都被内容撑开，前提是在文档流中。
块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动从而脱离文档流，可选值：none，默认值，元素默认在文档流中排列；left，元素会立即脱离文档流，向页面的左侧浮动；right，元素会立即脱离文档流。当为一个元素设置浮动之后，元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动，元素浮动之后，会尽量向页面的左上或者右上移动。