前端学习之CSS

最新推荐文章于 2024-09-29 10:58:02 发布

myrhythm_

最新推荐文章于 2024-09-29 10:58:02 发布

阅读量1.8k

点赞数

分类专栏：前端 2019 文章标签： css

本文链接：https://blog.csdn.net/Adelagirl/article/details/104213707

版权

2019 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

CSS概述

CSS简介

CSS是指层叠样式表（Cascading Style Sheets），它的作用就是用于表现元素、美化网页。
样式定义如何显示元素，样式通常存储在样式表中。把样式添加到HTML中，是为了解决内容与表现分离的问题。
外部样式表可以极大提高工作效率。外部样式表通常存储在CSS文件中，多个样式可以层叠为一个。

CSS经历了CSS1.0、CSS2.0、CSS2.1以及CSS3.0这几个阶段。
CSS2.0提出了DIV+CSS的概念，同时提出了CSS和HTML结构分离的思想，使网页变得简单，便于SEO。
CSS2.1提出了浮动和定位。
CSS3.0提出了圆角、阴影、动画等。

CSS的优势

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式丰富

4、建议使用独立于html的css文件

5、有利于SEO，容易被搜索引擎收录

CSS语法

CSS规则由两个主要的部分构成：选择器以及一条或者多条声明。

选择器{
	声明;
}

选择器主要是需要改变样式的HTML元素。
每条声明由一个属性及一个值构成，每一个声明最好以分号结束。属性是希望设置的样式属性如颜色，边框等；每一个属性有一个值，属性和值被冒号分开。
CSS中的注释是 / * /*

CSS的导入方式

当读到一个样式表时，浏览器会根据它来格式化HTML文档。
HTML导入样式表的方式主要有三种：

行内样式（内联样式）
内部样式表
外部样式表

行内样式

在标签元素中，编写一个style属性，编写样式即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式-->
<h1 style="color:red">h1</h1>

</body>
</html>

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: goldenrod;
        }
    </style>
</head>
<body>
<h1>h1</h1>

</body>
</html>

外部样式（推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>h1</h1>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHSD7gVX-1581070713511)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578729325049.png)]

外部样式有两种写法：

写法一：链接式

<link rel="stylesheet" href="css/style.css">

写法二：导入式（这是CSS2.1特有的）

<style>
    @import url("css/style.css");
</style>

当行内样式、内部样式、外部样式同时出现或者出现多个时，优先级遵循就近原则

选择器

选择器的作用是选择页面上的某一个元素或者某一类元素。

基本选择器

1、标签选择器

标签选择器选择的是一类标签，它会选择到页面上所有的这个标签的元素。

格式：标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: darkred;
            background-color: gold;
            font-size: 30px;
        }
        p{
            color: green;
        }
    </style>
</head>
<body>

<h1>h1</h1>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>

</body>
</html>

2、类选择器

类选择器 class：选择所有class属性一致的标签，可以跨标签选择。

格式：.类名{}

类选择器的好处是可以多个标签进行归类，可以复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: green;
            background-color: gray;
            font-size: 20px;
        }
        .c2{
            color: red;
            background-color: plum;
            font-size: larger;
        }
    </style>
</head>
<body>

<h1 class="c2">h1</h1>
<h1 class="c1">标题</h1>
<p class="c3">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p >p4</p>

</body>
</html>

3、Id选择器

由于每个标签的id是唯一的，所以Id选择器是全局唯一的。

格式：#id名{}

优先级：不遵循就近原则。id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: green;
            background-color: gray;
            font-size: 20px;
        }
        #h1{
            color: red;
            font-size: 30px;
        }
        #p1{
            color: yellow;
            font-size: 40px;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">标题</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p id="p4">p4</p>

</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
    </style>
</head>
<body>

<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">标题</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<ul>
    <li>
        <p class="c2">p3</p>
    </li>
    <li>
        <p id="p4">p4</p>
    </li>
</ul>

</body>
</html>

1、后代选择器

在某个元素的后面的元素。

body p{
    color: blue;
    font-size: larger;
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TwZlZ8eB-1581070713512)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731420690.png)]

2、子选择器

只选择某个元素的一代。

body>p{
    color: green;
    font-size: larger;
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvCGBf6C-1581070713513)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731388213.png)]

3、相邻兄弟选择器

选择同辈，且在后面的元素。只选择一个！

#p1+p{
    color: red;
    font-size: larger;
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AVvngOUn-1581070713514)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731360400.png)]

4、通用选择器

选择选中元素的向下的所有兄弟元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
    </style>
</head>
<body>
<h1 class="c1" id="h1">h1</h1>
<h1 class="c1">标题</h1>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p class="c1">p5</p>
<p class="c1">p6</p>
<ul>
    <li>
        <p class="c2">p3</p>
    </li>
    <li>
        <p id="p4">p4</p>
    </li>
</ul>
</body>
</html>

#p1~p{
    color: red;
    font-size: larger;
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAmryzEL-1581070713552)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578731317638.png)]

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
    </style>
</head>
<body>
<h1>h1</h1>
<h1>h2</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

1、选择ul的第一个子元素

ul li:first-child{
    color: #fd3f9f;
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ooqaCkXe-1581070713553)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578732783879.png)]

2、选择ul的最后一个元素

ul li:last-child{
    color: blue;
    background-color: navajowhite;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3O1Ls1Hs-1581070713554)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578732833663.png)]

3、选中第一个h1

定位到父元素，选择当前的第一个元素。

选择当前h1元素的父级元素，选中父级元素的第一个，并且得是当前元素才可以生效！

h1:nth-child(1){
    color: yellow;
    background-color: khaki;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Vc0eYJx-1581070713564)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733051691.png)]

当选择p1时就没有生效。

p:nth-child(1){
    color: yellow;
    background-color: khaki;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RpOtaojx-1581070713565)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733144086.png)]

4、选中父元素下的类型为h1元素的第二个

h1:nth-of-type(2){
    color: green;
    background-color: gray;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71seausw-1581070713565)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733320287.png)]

使用nth-of-type，选中p元素的第一个。

p:nth-of-type(1){
    color: green;
    background-color: gray;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vjty6JO-1581070713566)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733380126.png)]

使用nth-of-type，就不会存在没有选中的问题了。

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

属性选择器实际上是将id选择器和类选择器进行了结合。

=      绝对等于  
*=     包含这个元素
^=     以xxx开头
$=     以xxx结果

1、选中存在id属性的元素

a[id]{
    background-color: red;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vk90ftg1-1581070713566)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733714473.png)]

2、选中id=first的元素

a[id=first]{
    background-color: yellow;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZE0A8KWl-1581070713567)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733794260.png)]

3、选中class中含有links的元素

a[class*="links"]{
    background-color: #7af2ff;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnSVLlui-1581070713567)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578733932377.png)]

a[class*="active"]{
    background-color: #7af2ff;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TERBENdC-1581070713568)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734190613.png)]

4、选中href中以http开头的元素

a[href^="http"]{
    background-color: darkred;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IQ8uZSb-1581070713569)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734288557.png)]

5、选中href中以pdf结束的元素

a[href$="pdf"]{
    background-color: hotpink;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IO9BU3Sp-1581070713569)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578734359387.png)]

美化网页元素

美化网页的原因

美化网页的优点：

有效地传递页面信息
网页经过美化，页面变得漂亮，才能够吸引用户
凸显出页面的主题
提高用户的体验

span标签：要重点突出的字，可以使用span标签套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
学习<span class="span">java</span>
</body>
</html>

字体样式

font-family    字体
font-size      字体大小
font-weight    字体粗细
color          字体颜色

也可将字体样式写在一行，使用 font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: green;
            font-family: 微软雅黑;
        }
        h1{
            font-size: 20px;
        }
        p{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>标题一</h1>
<p>学习java</p>
</body>
</html>

文本样式

1、颜色

颜色的属性是color，color后可跟颜色的单词，也可跟#xxxxxx，也可以跟rgb()和rgba()函数。

rgb()函数有三个参数，分别代表红、绿、蓝三个颜色的值（0~255）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgb(200,5,7);
        }
        
    </style>
</head>
<body>
<h1>标题一</h1>
<p>学习java</p>
</body>
</html>

rgba()比rgb()，多了一个透明度参数（0~1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(50,200,89,0.5);
        }

    </style>
</head>
<body>
<h1>标题一</h1>
<p>学习java</p>
</body>
</html>

2、文本对齐

文本对齐（text-align）的方式有：right、left、center等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }

    </style>
</head>
<body>
<h1>标题一</h1>
<p>学习java</p>
</body>
</html>

3、首行缩进

首行缩进两字符：text-indent: 2em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<h1>标题一</h1>
<p>网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。</p>
</body>
</html>

4、行高

line-height。单行文字上下居中。一般都是line-height=height。

行高和块的高度一致，就可以上下居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width: 300px;
            height: 100px;
            line-height: 100px;
            background-color: green;
        }
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<h1>标题一</h1>
<p id="p1">网易云音乐</p>
<p>网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。</p>

</body>
</html>

5、装饰

text-decoration

text-decoration: line-through;   中划线
text-decoration: underline;      下划线
text-decoration: overline;       上划线
text-decoration: none;           去掉下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            text-decoration: line-through;
        }
        #p1{
            text-decoration: underline;
        }
        a{
            text-decoration: none;     // 超链接去掉下划线
        }
        p{
            text-indent: 2em;
            text-decoration: overline;
        }

    </style>
</head>
<body>
<h1>标题一</h1>
<p id="p1">网易云音乐</p>
<a href="">点击</a>
<p>网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。</p>

</body>
</html>

6、文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img,span{
            vertical-align: middle;
        }

    </style>
</head>
<body>
<h1>标题一</h1>
<p id="p1">网易云音乐</p>
<a href="">点击</a>
<p>网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。</p>
<p>
    <img src="images/a.jpg" alt="">
    <span>aaabbbccc</span>
</p>
</body>
</html>

阴影

text-shadow属性应用于阴影文本。

text-shadow有四个值。h-shadow：水平阴影的位置（允许负值）；v-shadow：垂直阴影的位置（允许负值）；blur：模糊的距离；color：阴影的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p{
            text-shadow: green 20px -20px 8px;
        }
    </style>
</head>
<body>
<p id="p">hello</p>
</body>
</html>

超链接伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：选择器：伪类{属性:值;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色和字体*/
        a{
            text-decoration: none;
            color: green;
            font-size: 30px;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<a href="">点击</a>
</body>
</html>

列表

列表有一个比较重要的属性：list-style。

list-style：
none       去掉圆点
circle     空心圆
decimal    数字
square     正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            list-style: none;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

背景

背景分为背景颜色和背景图片。

1、背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 400px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div">

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

2、背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed yellow;
            background-image: url("images/a.jpg");
        }
    </style>
</head>
<body>
<div id="div">

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

背景图片默认是全部平铺的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRCDpUGV-1581070713570)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578744969293.png)]

水平平铺，background-repeat: repeat-x;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
<div id="div">

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2IuzeTgC-1581070713571)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578744935651.png)]

垂直平铺，background-repeat: repeat-y;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
<div id="div">

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4gF0vs7a-1581070713572)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745033993.png)]

不平铺，background-repeat: no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-image: url("images/a.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div id="div">

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7w6qiwi5-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745080594.png)]

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            width: 2000px;
            height: 2000px;
            border: 1px dashed red;
            background-color: #FFFFFF;
            background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
        }
    </style>
</head>
<body>
<div id="div">

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAvsMoOZ-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745198431.png)]

盒子模型

盒子模型概念

所有的HTML元素都可以看做盒子。在CSS中，“box model”这一术语是用来设计和布局时使用的。

CSS盒模型本质上是一个盒子，封装了周围的HTML元素，它包括：边距，边框，填充和实际内容。

盒子模型允许在其它元素和周围元素边框之间的空间里放置元素。

盒子模型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BeMbHORf-1581070713573)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578745897126.png)]

margin：外边距。清除边框外的区域，外边距是透明的。

border：边框。围绕在内边距和内容外的边框。

padding：填充，内边距。清除内容周围的区域，内边距是透明的。

content：内容。盒子的内容，用于显示文本和图像。

边框

1、边框的粗细

2、边框的颜色

3、边框的样式

border:粗细,样式,颜色;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #6284FF;
        }
        div:nth-of-type(1) input{
            border: 1px dashed green;
        }
        div:nth-of-type(2) input{
            border: 1px dashed yellow;
        }
        div:nth-of-type(3) input{
            border: 1px solid purple;
        }
    </style>
</head>
<body>
<div id="box">
    <form action="">
        <div>
            <input type="text">
        </div>
        <div>
            <input type="text">
        </div>
        <div>
            <input type="text">
        </div>
    </form>

</div>

</body>
</html>

内外边距

body总有一个默认的外边距margin。常见的操作是将margin设为0，即margin:0。

一般来说，对于 h1，ul，li，a，body等需要设置：

margin:0;
padding:0;
text-decoration:none;

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

    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        h1{
            font-size: 16px;
            background-color: #6284FF;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
        }
        form{
            background-color: rosybrown;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>会员登录</h1>
    <form action="#">
        <div>
            <span>用户名：</span> <input type="text">
        </div>
        <div>
            <span>密码：</span> <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

盒子的计算方式：margin+border+padding+内容宽度。

圆角边框

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

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 10px solid red;
            border-radius: 300px;
        }
    </style>
</head>
<body>
<div>

</div>

</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            display: block;
            text-align: center;
        }
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div>
    <img src="images/a.jpg" alt="">
</div>

</body>
</html>

浮动

标准文档流

文档流是指元素排版布局过程中，元素会默认自动从左往右、从上往下的流式排列方式，并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流分为两个等级：块级元素和行内元素

块级元素：独占一行。如：h1~h6，p标签，div标签，列表…
行内元素：不独占一行。如：span标签，a标签，img标签，strong…

行内元素可以被包含在块级元素中，反之不行。

display

block         块元素
inline        行内元素
inline-block  是块元素，但是可以内联，在一行。
none

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

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>
    <span>hello</span>
</div>

</body>
</html>

float

元素一般是水平方向浮动，这意味着元素只能左右浮动而不能上下浮动。

一个浮动元素会尽量向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

浮动的关键字： float
float:right    向右浮动
float:left     向左浮动

清除浮动的关键字是 clear
clear:right    清除右边的浮动
clear:left     清除左边的浮动
clear:both     清除两边的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        #img1{
            float: right;
        }
        #img2{
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="images/a.jpg" alt=""></div>
    <div id="img2"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html>

父级边框塌陷的问题

针对父级边框塌陷的问题，有以下几种解决方案：

增加父级元素的高度
增加一个空的div标签，清除浮动
使用关键字 overflow
给父类元素增加一个伪类

1、增加父级元素的高度

#father{
    border: 1px black solid;
    /*增加父级元素的高度*/
    height: 800px;
}

2、增加一个空的div标签

<style>
    .clear{
    	margin: 0;
    	padding: 0;
    	clear: both;
    }
</style>
<div class="clear"></div>

3、overflow

#father{
    border: 1px black solid;
    /*使用关键字overflow 属性值为hidden*/
    overflow: hidden;
}

4、给父类元素增加伪类

/*父类元素增加伪类*/
#father:after{
    content: '';
    display: block;
    clear: both;
}

display的方向不可控制；float 元素浮动起来会脱离标准文档流，需要解决父级边框塌陷的问题。

定位

相对定位

相对定位是针对元素自己原来的位置进行偏移。相对定位的方向是上下左右。

相对定位是相对于原来的位置进行指定的偏移。相对定位的元素仍然在标准文档流中，它原来的位置会被保留。

相对定位的关键字是  position:relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <!--
    相对定位，position relative
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: #6284FF;
            border: 1px dashed #fd4434;
            position: relative;
            /*top 负值：相对于原位置向上偏移；正值：相对于原位置向下偏移*/
            top: 20px;
            /*left 负值：相对于原位置向左偏移；正值：相对于原位置向右偏移*/
            left: -20px;
        }
        #second{
            background-color: #ad2cff;
            border: 1px dashed #65ffda;
        }
        #third{
            background-color: #45ff61;
            border: 1px dashed #b7ffb1;
            position: relative;
            /*bottom：负值，相对于原位置向下偏移；正值，相对于原位置向上偏移*/
            bottom: 10px;
            /*right：负值，相对于原位置向右偏移；正值，相对于原位置向左偏移*/
            right: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">first</div>
    <div id="second">second</div>
    <div id="third">third</div>
</div>
</body>

绝对定位

绝对定位是基于某个定位进行上下左右指定的偏移。分为以下几种情况：

在没有父级元素定位的前提下，元素是相对于浏览器定位的
若父级元素存在定位，元素是相对于父级元素定位的
绝对定位是在父级元素的范围内进行偏移

相对于父级和浏览器的位置进行指定的偏移，绝对定位的元素是不在标准文档流中的，它原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <!--
    绝对定位
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #45ff61;
            border: 1px dashed #7dff4c;
        }
        #second{
            background-color: #6284FF;
            border: 1px dashed #8fadff;
            position: absolute;
            /*left：100px   该元素相对于浏览器或者父级元素的左边偏移100px*/
            left: 100px;
            /*right: 100px;*/
        }
        #third{
            background-color: #807425;
            border: 1px dashed #807a3b;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

固定定位

固定定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

由于元素的定位和标准文档流是没有关系的，所以元素可以覆盖页面上的其他元素。z-index属性指定了一个元素的堆叠顺序（即哪个元素应该放在前面或后面）。一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
background-color: #45ff61;
border: 1px dashed #7dff4c;
}
#second{
background-color: #6284FF;
border: 1px dashed #8fadff;
position: absolute;
/left：100px 该元素相对于浏览器或者父级元素的左边偏移100px/
left: 100px;
/right: 100px;/
}
#third{
background-color: #807425;
border: 1px dashed #807a3b;
}

第一个盒子

第二个盒子

第三个盒子

```

固定定位

固定定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>