🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

border和display属性

border和display属性

border属性

border：“边框”的意思，边框有三个要素：粗细、线型、颜色。

注意：边框的颜色可以省略不写，但是如果不写的话就表示边框的颜色为黑色，其他的俩个属性值不能不写，如果不写的话就不会显示边框。

边框也是有方向的，如下：

display属性

display是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。

display 这个属性取值：inline(行内)、block(块级)、none(无)。

当我们将一个行内元素的display属性值设置为block以后，那么这个元素就会被转换为块级元素。

<!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>
        span{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 将行内元素转换为块级元素 */
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <span>我是行内元素span1</span>
    <span>我是行内元素span2</span>
</body>
</html>

当我们将一个行内元素的display属性值设置为inline以后，那么这个元素就会被转换为行内元素。

<!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>
        h2,div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 将行内元素转换为块级元素 */
            display: inline;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h2>我是h2</h2>
    <div>我是div</div>
</body>
</html>

注意：

如果将行内元素转换为块级元素，那么这个元素就会拥有块级元素的特点。

如果将块级元素转换为行内元素，那么这个元素就会拥有行内元素的特点。

将一个显示的元素隐藏、将一个隐藏的元素显示。

display:none(将一个显示的元素进行隐藏)、display(除了能转换为块级元素，还能将一个隐藏的元素显示)。这两个功能主要是JavaScript来使用。

定位

定位：手动控制元素在包含块中的精准位置，涉及的CSS属性：position；position在英文中表示“位置”的意思，它主要用于实现对元素的定位。

在CSS中定位分为三种：

– 默认值：static,静态定位（不定位）

– fixed: 固定定位

– relative: 相对定位

– absolute: 绝对定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。定位元素会脱离文档流（相对定位除外）一个脱离了文档流的元素：

1. 文档流中的元素摆放时，会忽略脱离了文档流的元素

2. 文档流中的元素计算自动高度时，会忽略了文档流的元素

注意：

在使用定位属性时，一定要配合定位的坐标来使用！(定位的元素：给元素加了position属性)

left：表示定位的元素离左边多远

right：表示定位的元素离右边多远

top：表示定位的元素离上边多远

bottom：表示定位的元素离下边多远

固定定位

语法：position:fixed

固定定位，相对于浏览器的窗口来进行定位，不管页面如何滚动，固定定位显示的元素不会改变。

特点：

1、固定定位元素它脱离了标准文档流

2、固定定位元素的层级比标准文档流里面的元素更高，所以固定定位元素它会压盖住标准文档流里面的元素

3、固定定位元素它不再占用空间

4、固定定位元素它显示的位置不会随着浏览器的滚动而滚动

案例一：使用固定定位实现返回顶部的按钮

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            width: 60px;
            height: 60px;
            /* 将行内元素转换为块级元素 */
            display: block;
            background-color: #ccc;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            /* 使用固定定位 */
            position: fixed;
            right: 30px;/* 离右边30px */
            bottom: 100px;/* 离下边100px */
        }
        img{
            width: 1000px;
            height: 700px;
        }
    </style>
</head>
<body>
    <a href="#">返回顶部</a>
    <img src="./4.jpeg">
    <img src="./4.jpeg">
    <img src="./4.jpeg">
    <img src="./4.jpeg">
    <img src="./4.jpeg">
</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>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            height: 60px;
            background-color: #222222;
            /* 使用固定定位 */
            position: fixed;
            left: 0;
            top: 0;
        }
        .nav .inner_c{
            width: 1000px;
            height: 60px;
            margin: 0 auto;
        }
        ul{
            list-style-type: none;
        }
        ul li{
            float: left;
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        ul li a{
            width: 100px;
            height: 60px;
            display: block;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        ul li a:hover{
            background-color: gold;
        }
        body{
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
                <li><a href="">网站栏目</a></li>
            </ul>
        </div>
    </div>
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
    <img src="./4.jpeg" style="width:70%">
</body>
</html>

相对定位

语法：position:relative

相对定位它是相对于“原来的自己”来进行定位！不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移，可以通过四个CSS属性对其位置进行设置：left、right、top、bottom；盒子的偏移不会对其他盒子造成任何影响。

案例一：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
        }
        .div2{
            background-color: #0f0;
            /* 相对定位属性 */
            position: relative;
            left: 100px;
        }
        .div3{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

特点：

相对定位元素它没有脱离文档流

相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置

相对定位元素会将标准文档流中的元素压盖住

相对定位元素的定位坐标值可以是负数

注意：相对定位元素会在老家留下一个坑，所以一般情况下它很少单独使用，它主要是用来配合“绝对定位”元素来使用。

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用属性选择器来匹配元素 */
        input[type='text']{
            font-size: 36px;
        }
        input[type="button"]{
            position: relative;
            top: 6px;
        }
    </style>
</head>
<body>
    <input type="text"><input type="button" value="检测用户名">
</body>
</html>

绝对定位

语法：position:absolute;

什么是绝对定位？

绝对定位元素是相当于 “祖先定位元素” 来进行定位的！

什么是祖先定位元素？

绝对定位元素它会先去查找其父元素是否设置了定位的属性如果有设置定位的属性那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位但是如果没有设置那么会继续往向一级进行查找,如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！

特点：

绝对定位元素它脱离了文档流
绝对定位元素它不再占用空间

绝对定位元素它会掩盖住标准文档流中的元素

绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位但是我们一般只会给其实祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位父元素设置相对定位

案例一：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
        }
        .div2{
            background-color: #0f0;
            /* 绝对定位属性 */
            position: absolute;
            /* 设置定位的坐标 */
            left: 0;
            top: 0;
        }
        .div3{
            background-color: #00f;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

.div2它是一个绝对定位元素，它会去查找其父元素是否设置了定位的属性，如果其父元素没有设置定位属性，它就会去查找其父元素的上一级元素是否设置了定位属性，但是它的父元素上一级元素就是“body”元素，它就会相对于body元素来定位，“body”元素指的就是浏览器的窗口。