一、概念

CSS(Cascading Style Sheets)层叠样式表，CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

二、基本语法规范

> 选择器+N条声明：

<style>
  p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
 }
</style>

<p>hello</p>

注意事项：
1、CSS部分要写到style标签中
2、style标签可以放到任意位置，一般放在head标签中
3、使用 /* */ 作为注释（ctrl+/)

三、引入方式

1、内部样式表

<!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>
</head>
<style>
    p{
        /* 设置颜色 */
        color:aqua;
        /* 设置文本大小 */
        font: size 30px;
    }
</style>
<body>
    <p>内容</p>
</body>
</html>

2、行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:aqua;font-size: 30px;"> 内容</p>
</body>
</html>

行内样式表优先级较高，如果该标签还使用了其他方式指定样式，那么会被这种写法覆盖。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 设置颜色 */
            color:blue;
            /* 设置文本大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p style="color:aqua;font-size: 30px;"> 内容</p>
</body>
</html>

最后显示出来的颜色还是aqua。
在这里插入图片描述

3、外部样式

<link rel="stylesheet" href="[CSS文件路径]">

先创建一个.html文件，使用link外部引入.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="third.css">
</head>
<body>
    <p>内容</p>
</body>
</html>

创建.css文件

p{
    color:aqua;
    font-size: 30px;
}

在这里插入图片描述

四、选择器

选择器的种类：
1、基础选择器:由单个选择器构成的

标签选择器
类选择器
id选择器
通配符选择器

2、复合选择器：综合运用多种基础选择器

后代选择器
子选择器
并集选择器
伪类选择器

1、基础选择器

1）标签选择器

<style>
    p{
        /* 设置颜色 */
        color:aqua;
        /* 设置文本大小 */
        font-size: 30px;
    }
    div{
        color: blue;
        font-size: 50px;
    }

</style>
<body>
    <p>内容</p>
    <p>内容1</p>
    <div>内容2</div>
    <div>内容3</div>
</body>

2）类选择器


<style>
        /* 类选择器 */
        .a{
            color: blue;
        }
        .b{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="a">内容 </div>
    <div class="b">内容</div>
</body>

注意：

类名用 . 来开头
标签使用.class属性来调用
一个类可以被多个标签使用，一个标签也可以使用多个类（每个类中间用空格隔开），这么做可以使代码更好的复用。
长类名可以用"-"来分割
不要使用数字，中文或者标签名来作为类名

一个标签同时使用多个类名：

 <style>
        /* 类选择器 */
        .demo{
            font-size: 30px;
        }
        .one{
            color:burlywood;
        }
        .two{
            color:chartreuse;
        }
        .three{
            color:crimson;
        }
    </style>
</head>
<body>
    <div class="demo one">内容 </div>
    <div class="demo two">内容</div>
    <div class="demo three">内容</div>
</body>

3）id选择器

<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>
        /* id选择器 */
        #contents{
            color: crimson;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="contents">内容</div>
</body>
</html>

4）通配符选择器

<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>
        *{
            color:crimson;
        }
    </style>
</head>
<body>
    <div>内容 </div>
</body>

2、复合选择器

1）后代选择器

<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>
        /* 后代选择器 */
        ul li{
            color:aqua;
        }
        /* 可以是任意基础选择器组合 */
        #content li{
            color:blue;
        }
        /* 也可以是孙子 */
        ul li a{
            color:burlywood;
        }

    </style>
</head>
<body>
    <ul>
        <li>内容</li>
        <li>内容1</li>
        <li>内容2</li>
    </ul>
    <ol id="content">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
    <ul>
        <li>444</li>
        <li><a href="#">555</a></li>
    </ul>
</body>

在这里插入图片描述

2）子选择器

<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>
        /* 子选择器，并且此时只选择到链接1，因为链接2在孙子标签中 */
        div>a{
            color:crimson;
            font-size:larger;
            font-family:'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>
</body>

3）并集选择器

注意：

通过，分隔不同元素
表示同时选中元素1和元素2
可以使用任何基础选择器

<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>
        /* 并集选择器 */
        div,
        a,
        h3{
            color:crimson;
        }
    </style>
</head>
<body>
    <div>
        <p>111</p>
        <h2>222</h2>
    </div>
    <a href="#">333</a>
    <h3>444</h3>
</body>

4）伪类选择器

链接伪类选择器

<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>
        /* 链接伪类选择器 */
       a:link{
           color:black;
           /* 去除下划线 */
           text-decoration:none ;
       }
       a:visited{
           color:blue;
       }
       a:hover{
           color: blueviolet;
       }
       a:active{
           color:chartreuse;
       }
    </style>
</head>
<body>
    <a href="#">点击</a>
</body>

:force伪类选择器

<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>
        /* force伪类选择器 */
        /* 此时只有选中的表单字体才会变成红色 */
        .three>input:focus {
            color:red;
        }
    </style>
</head>
<body>
    <div class="three">
          <input type="text">
          <input type="text">
          <input type="text">
          <input type="text">
        </div>
</body>

在这里插入图片描述

五、常用元素属性

css属性参考文档（点击链接，在使用的过程中学习总结）

1、字体属性

1）字体

<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>
        .content1{
            font-family:'宋体';
        }
        .content{
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <div class="content1">
        内容
    </div>
    <div class="content2">
        内容
    </div>
</body>

2）大小

<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>
        /* 字体大小设置 */
        .content1{
            font-size: 30px;
        }
        .content2{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="content1">
        内容
    </div>
    <div class="content2">
        内容
    </div>
</body>

注意：

字体单位: px
实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮
不同的浏览器默认字号不一样,给出明确值比较好

3）粗细

<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>
        /* 粗细设置 */
        .content1{
            font-weight: 500;
        }
        .content2{
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <div class="content1">
        内容
    </div>
    <div class="content2">
        内容
    </div>
</body>

注意：

使用数字表示粗细
400=normal不加粗，700=bold
数值范围为100-900

4）文字样式

<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>
        /* 字体样式设置 */
        .content1{
            font-style: normal;
        }
        .content2{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="content1">
        内容
    </div>
    <div class="content2">
        内容
    </div>
</body>

2、文本属性

1）RGB

2）设置文本颜色

<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>
        /* 文本颜色设置（三种形式） */
        .content1{
            color:red
        }
        .content2{
            color:rgb(209, 112, 47)
        }
        .content3{
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div class="content1">
        内容
    </div>
    <div class="content2">
        内容
    </div>
    <div class="content3">
        内容
    </div>
</body>

3)文本对齐

center:居中对齐
left：左对齐
right：右对齐

<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>
        /* 文本对齐 */
        #one{
            text-align: center;
        }
        #two{
            text-align: left;
        }
        #three{
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="one">居中对齐</div>
    <div id="two">左对齐</div>
    <div id="three">右对齐</div>
</body>

效果如下：
在这里插入图片描述

4）文本装饰

underline:下划线
none:什么也没有，可以用于去除a标签的下划线
overline：上划线
line-through：删除线

<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>
        /* 文本装饰 */
        #content1{
            text-decoration: none;
        }
        #content2{
            text-decoration: overline;
        }
        #content3{
            text-decoration: underline;
        }
        #content4{
            text-decoration: line-through;
        }
        /* 标签去除下划线 */
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="content1">111</div>
    <div id="content2">222</div>
    <div id="content3">333</div>
    <div id="content4">444</div>
    <a href="#">链接</a>
</body>

效果如下：
在这里插入图片描述

5）文本缩进

单位：px或em，一个em就是当前元素的大小。
缩进可以是负的，此时文字会冒出去。

<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>
        /* 首行缩进2字符 */
        #content1{
            text-indent: 2em;
        }
        /* 反向缩进2字符 */
        #content2{
            text-indent: -2em;
        }
    </style>
</head>
<body>
    <div id="content1">美国《防务新闻》22日称，美国太空军发射了两颗新的空间域感知卫星。由诺斯罗普·格鲁曼公司制造的这两颗卫星于21日从佛罗里达的卡纳维拉尔角发射。它们将扩大美国太空军地球同步空间态势感知的能力，并提高在轨跟踪其他卫星星座的准确性。</div>
    <div id="content2">《防务新闻》承认，五角大楼对gssap到底有哪些功能说得“有些模糊”，也没有公布与诺斯罗普·格鲁曼公司联合研制该卫星的细节。</div>
</body>

效果如下：
在这里插入图片描述

6）行高

在html中展示文字涉及几个基准线：

顶线
中线
基线
底线

其中，内容区指的是：底线和顶线之间的区域。
在这里插入图片描述

<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>
        /* 行高设置 */
        #content{
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div id="content">1111111</div>
</body>

效果如下：我们通过开发者工具可以清楚的看到在文本的上下都是有一定边距的。
在这里插入图片描述
同时设置字体大小：

<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>
        /* 行高设置 */
        #content{
            line-height: 50px;
            /* 设置字体大小为30PX,那么此时上下边距的距离为10px */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="content">1111111</div>
</body>

效果如下：可以看到，上下边距明显变矮了。
在这里插入图片描述
当行高与元素等高时，就能实现文本垂直居中对齐。

<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>
        /* 行高设置 */
        #content{
            line-height: 50px;
            /* 设置字体大小为30PX,那么此时上下边距的距离为10px */
            font-size: 30px;
            /* 元素高 */
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="content">1111111</div>
</body>

在这里插入图片描述

3、背景属性

1）背景颜色

<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>
        #lan{
            background-color: aqua;
        }
        #lhj{
            background-color:burlywood;
        }
        #hhh{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div id="lan">11111</div>
    <div id="lhj">22222</div>
    <div id="hhh">33333</div>
</body>

效果如下：
在这里插入图片描述

2）背景图片

url可以是绝对路径也可以是相对路径

<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>
        /* 背景图片 */
        #picture{
            background-image: url("earth.jpeg");
            height: 380px;
            width: 600px;
        }
    </style>
</head>
<body>
    <div id="picture">背景图片</div>
</body>

效果如下：
在这里插入图片描述

3）背景平铺

取值：

<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>
        /* 背景平铺 */
        #picture{
           background-image: url("earth.jpeg");
           width:680px;
           height: 380px;
           background-repeat: no-repeat;
        }
        /* 水平平铺 */
        #picture1{
            background-image: url("earth.jpeg");
            width: 1360px;
            height: 380px;
            background-repeat: repeat-x;
        }
        /* 垂直平铺 */
        #picture2{
            background-image: url("earth.jpeg");
            width: 680px;
            height:760px;
            background-repeat: repeat-y;
        }
        /* 平铺 */
        #picture3{
            background-image: url("earth.jpeg");
            width:1360px;
            height: 760px;
            background-repeat: repeat;
        }

    </style>
</head>
<body>
    <div id="picture">不平铺</div>
    <div id="picture1">水平平铺</div>
    <div id="picture2">垂直平铺</div>
    <div id="picture3">平铺</div>
</body>

效果如下：
在这里插入图片描述

4）背景位置

参数风格：

方位名词: (top, left, right, bottom，center)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

<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>
        #picture{
            background-image: url("earth.jpeg");
            width: 800px;
            height: 600px;
            background-repeat: no-repeat;
            background-color: tomato;
            /* 背景位置 */
            background-position: right;
        }
        #picture2{
            background-image: url("earth.jpeg");
            width: 800px;
            height: 600px;
            background-repeat: no-repeat;
            background-color:turquoise;
            /* 背景位置 */
            background-position:100px,0px;
        }
        #picture3{
            background-image: url("earth.jpeg");
            width: 800px;
            height: 600px;
            background-repeat: no-repeat;
            background-color:violet;
            /* 背景位置 */
            background-position: 50px,center;
        }
    </style>
</head>
<body>
    <div id="picture">背景图片</div>
    <div id="picture2">背景图片</div>
    <div id="picture3">背景图片</div>
</body>

效果如下：
在这里插入图片描述

注意：

在这里插入图片描述

5）背景尺寸

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

<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>
        /* 背景尺寸 */
        /* 图片原本尺寸是690*390 */
        /* 体会contain和cover之间的区别 */
        #picture{
           background-image: url("earth.jpeg");
           width:800px;
           height: 600px;
           background-repeat: no-repeat;
           background-color: tomato;
           background-position: center;
           background-size: contain;
        }
        #picture1{
           background-image: url("earth.jpeg");
           width:800px;
           height: 600px;
           background-repeat: no-repeat;
           background-color: turquoise;
           background-position: center;
           background-size: cover;
        }
    </style>
</head>
<body>
    <div id="picture">背景图片</div>
    <div id="picture1">背景图片</div>
</body>

效果如下：
contain：即就是将图片按照原始比例扩大，直至宽度或者高度达到背景的宽度或者高度即可。
在这里插入图片描述
cover：即就是将图片扩大直至覆盖背景，不在乎原始比例。

4、圆角矩形

1）基本用法

<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>
        /* 圆角矩形 */
        #content{
            width: 200px;
            height: 200px;

            border:2px solid green;
            border-radius: 30px;
            text-indent: 2em;

        }
    </style>
</head>
<body>
    <div id=content>111</div>
</body>

效果如下：
在这里插入图片描述
生成圆形：即就是让 border-radius 的值为正方形宽度的一半即可。

<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>
        /* 圆形 */
        #content{
            width: 200px;
            height: 200px;
            border:2px solid green;
            /* 生成圆 */
            border-radius: 50%;
            /*或者 border-radius: 100px; */
        }
    </style>
</head>
<body>
    <div id=content></div>
</body>

效果如下：
在这里插入图片描述
生成圆角矩形：同理，让border-radius等于矩形高度的一半即可。

<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>
        /* 圆角矩形 */
        #content{
            width: 200px;
            height: 100px;
            border:2px solid green;
            /* 生成圆 */
            border-radius: 50px;
            /*或者 border-radius: 100px; */
        }
    </style>
</head>
<body>
    <div id=content></div>
</body>

效果如下：
在这里插入图片描述

2）展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置

等价于：

即就是按照顺时针方向，从左上角开始到左下角进行设置。

六、chrome调试工具-查看css属性

1、打开方式

2、各标签页含义

在这里插入图片描述

elements ：查看标签结构
console ：查看控制台
source ：查看源码+断点调试
network ：查看前后端交互过程
application：查看浏览器提供的一些扩展功能(本地存储等）

七、元素的显示模式

1、块级元素

常见的元素：

h1-h6
p
div
ol
ul
li

<style>
  .demo1 .parent {
    width: 500px;
    height: 500px;
    background-color: green;
 }
  .demo1 .child {
    /* 不写 width, 默认和父元素一样宽 */
    /* 不写 height, 默认为 0 (看不到任何东西) */
    height: 200px;
    background-color: red;
 }
 </style>
 
<div class="demo1">
  <div class="parent">
    <div class="child">
     child1
    </div>
    <div class="child">
     child2
    </div>
  </div>
</div>

如图： demo1所在区域1042 * 500
在这里插入图片描述
parent所在区域：500 * 500

child所在区域：500 * 250（width没有设置，所以默认和父元素的width一致）

2、行内元素（内联元素）

常见的元素：

a
strong
b
em
i
del
s
ins
u
span

<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>
        span{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div>
        <span class="child1">child1</span>
        <span class="child2">child2</span>
        <span class="child3">child3</span>
    </div>
</body>

在这里插入图片描述

3、区别

4、改变显示模式

display: block 改成块级元素
display: inline 改成行内元素

在这里插入图片描述

八、盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”。
盒子的构成：

边框：border
内容：content
内边距：padding
外边距：margin

如下图：此处只展示上边距。
在这里插入图片描述

1、边框

<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>
        div{
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: crimson;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>

效果如下：
在这里插入图片描述

<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>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>

<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>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 单独设置上边框的颜色 */
            border-top-color: blue;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>

单独设置上边框颜色，效果（利用到层叠性, 就近原则的生效.）：
在这里插入图片描述

2、边框对盒子的撑大作用

在这里插入图片描述
可以看到：
width和height设置为200 * 200,但是在开发者工具中看到div元素为220 * 220(带边框）。

解决办法：通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

<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-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>

效果：
在这里插入图片描述

3、内边距

给每个方向都加上边距：

padding-top
padding-bottom
padding-left
padding-right

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>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding-top: 50px;
            padding-bottom: 50px;
            padding-right: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>

在加上paddin之前：
在这里插入图片描述

在加上padding后

在这里插入图片描述

<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>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 复合写法 */
            padding: 20px 30px 20px 30px;
        } 
    </style>
</head>
<body>
    <div>test</div>
</body>

小技巧：在开发者工具控制台中选中元素，查看右下角的布局内容，结构非常清楚：
在这里插入图片描述

在这里插入图片描述

4、外边距

基础写法：

margin-top
margin-bottom
margin-left
margin-right

<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>
        div{
            background-color: chartreuse;
            width: 200px;
            height: 200px;
        }
        /* 设置外边距 */
        .fst{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="fst">111</div>
    <div class="sec">222</div>
</body>

效果：
在这里插入图片描述

5、块级元素水平居中

写法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

<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>
        div{
            background-color: chartreuse;
            width: 200px;
            height: 200px;
            /* 块级元素水平居中 */
            margin: 0 auto;
        }
        
    </style>
</head>
<body>
    <div class="fst">111</div>
</body>

效果：
在这里插入图片描述

6、去除浏览器默认样式

<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>
        /* 去除浏览器默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: chartreuse;
            width: 200px;
            height: 200px;
        }
        
    </style>
</head>
<body>
    <div class="fst">111</div>
</body>

效果：
在这里插入图片描述

九、弹性布局

1、flex布局基本概念

2、常用属性

1）justify-content

在这里插入图片描述

设置弹性布局之前：

<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>
        div{
            width:100%;
            height: 200px;
            background-color: cornflowerblue;
            /* 设置弹性布局 */
            /* display: flex; */
        }
        div span{
            width:100px;
            height: 150px;
            background-color:crimson;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

目前效果：
在这里插入图片描述
设置弹性布局后且：

<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>
        div{
            width:100%;
            height: 200px;
            background-color: cornflowerblue;
            /* 设置弹性布局 */
            display: flex;
            justify-content: flex-end;
        }
        div span{
            width:100px;
            height: 150px;
            background-color:crimson;
        }
    </style>
</head>

效果：元素排到最右侧。
在这里插入图片描述

直接看效果：元素居中排列。

在这里插入图片描述

直接看效果：平分空间。
在这里插入图片描述

直接看效果：最两边的元素贴住边缘，平分剩余空间。
在这里插入图片描述

2）align-items

在这里插入图片描述

<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>
        div{
            width:100%;
            height: 300px;
            background-color: cornflowerblue;
            /* 设置弹性布局 */
            display: flex;
            justify-content:space-around;
        }
        div span{
            width:100px;
            /* 此时没有设置高度 */
            /* height: 150px; */
            background-color:crimson;
        }
    </style>
</head>

效果：
在这里插入图片描述

直接看效果：实现单行元素的垂直居中。

在这里插入图片描述

直接看效果：
在这里插入图片描述
其他的效果同理。

以上就是全部内容了，如有错误，还请您批评指正！！！
喜欢请关注哦！

前端三剑客之css（超详细）

目录

一、概念

二、基本语法规范

三、引入方式

1、内部样式表

2、行内样式表

3、外部样式

四、选择器

1、基础选择器

1）标签选择器

2）类选择器

3）id选择器

4）通配符选择器

2、复合选择器

1）后代选择器

2）子选择器

3）并集选择器

4）伪类选择器

五、常用元素属性

1、字体属性

1）字体

2）大小

3）粗细

4）文字样式

2、文本属性

1）RGB

2）设置文本颜色

3)文本对齐

4）文本装饰

5）文本缩进

6）行高

3、背景属性

1）背景颜色

2）背景图片

3）背景平铺

4）背景位置

5）背景尺寸

4、圆角矩形

1）基本用法

2）展开写法

六、chrome调试工具-查看css属性

1、打开方式

2、各标签页含义

七、元素的显示模式

1、块级元素

2、行内元素（内联元素）

3、区别

4、改变显示模式

八、盒模型

1、边框

2、边框对盒子的撑大作用

3、内边距

4、外边距

5、块级元素水平居中

6、去除浏览器默认样式

九、弹性布局

1、flex布局基本概念

2、常用属性

1）justify-content

2）align-items