前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局

撸码侠

已于 2024-06-05 22:52:40 修改

阅读量1k

点赞数 19

分类专栏：前端三大件速成文章标签：前端 css

于 2024-05-18 03:07:39 首次发布

本文链接：https://blog.csdn.net/weixin_42830015/article/details/138218389

版权

前端三大件速成专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、常用属性

1、颜色属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*color: red;*/
            /*color: #FF0000FF;*/
            /*color: rgb(255,0,0);*/
            /*以上三句颜色样式等价*/
            color: rgba(255,0,0,0.5);
            /*其中a代表不透明度，0表示完全透明*/
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>

2、字体属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*设置字体大小*/
            /*font-size: 20px;*/
            /*font-size: 100%;*/
            font-size: large;

            /*设置字体*/
            font-family: "Lucida Bright";

            /*设置字体粗细*/
            font-weight: 900;
            /*"normal"（默认）、"bold"（粗体）、"lighter"（更轻）、"bolder"（更粗）等，*/
            /*也可以使用数值表示粗细程度，如100到900之间的整数*/

            /*设置为斜体字*/
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

3、背景属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*设置背景颜色*/
            background-color: chartreuse;

            /*设置边界样式*/
            border: 1px solid red;
            
            /*设置长宽*/
            width:800px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*设置边界样式*/
            border: 1px solid red;

            /*设置长宽*/
            width:800px;
            height: 400px;

            /*设置背景图片*/
            background-image: url("b.png");
            /*不重复*/
            background-repeat: no-repeat;
            /*延x轴重复*/
            /*background-repeat: repeat-x;*/

            /*定位图片的位置：左边距 上边距*/
            background-position: 10px 200px;
			/* 可以用background简写 */
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

内联元素转化为行内块级元素
行内块级元素可以在一行内显示，并且可以设置宽高等属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            /*设置为行内块级元素*/
            display: inline-block;

            /*设置边界样式*/
            border: 1px solid red;

            /*设置长宽*/
            width:80px;
            height: 40px;
        }
    </style>
</head>
<body>
    <span>hello</span>
    <span>world</span>
</body>
</html>

4、文本属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;

            /*字体大小*/
            font-size: 50px;

            /*横向排列*/
            text-align: center;/* 居中 */

            /*文本行高*/
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性文本属性
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;

            /*字体大小*/
            font-size: 50px;

            /*文本行高*/
            line-height: 100px;

            /*首字母大写*/
            text-transform: capitalize;

            /*单词间间距*/
            word-spacing: 20px;

            /*字母间间距*/
            letter-spacing: 10px;

        }
    </style>
</head>
<body>
    <div>
        hello world hello world hello world hello world hello world hello world hello world
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;

            /*字体大小*/
            font-size: 50px;

            /*垂直方向居中*/
            line-height: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>
</html>

5、边框属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*设置宽高*/
            width: 200px;
            height: 100px;

            /*border-color: red;*/
            /*border-style: solid;*/
            /*border-width: 5px;*/
            /*简写*/
            border: 5px solid red;

            /*可设置其中一边*/
            border-left-color: blue;
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>
</html>

6、列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol,ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>

    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
</body>
</html>

7、display属性

none：隐藏标签，且不再占据布局位置。
block：块级标签
inline：内联标签
inline-block：行内块标签（和文本很像，布局的时候尽量少用）

8、overflow属性

当子元素大小超过父元素内容区时，子元素就会从父元素中溢出。CSS通过overflow来处理溢出内容。
可选值：
visible：默认值，溢出内容直接在元素以外的位置显示。
hidden：隐藏溢出部分的内容。
scroll：生成滚动条，通过双向滚动条来查看内容。
auto：根据需要生成滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .outer{
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        overflow: auto;
    }
    .inner{
        height: 400px;
        width: 100px;
        background-color: green;
    }

</style>
</head>
<body>
        <div class="outer">
            <div class="inner"></div>
        </div>
</body>
</html>

9、visibility属性

visible：默认值，元素可见。
hidden：元素隐藏，但依然占据布局位置。

二、内外边距及定位布局

1、基本概念

在这里插入图片描述

margin：外边距，用于控制元素与元素之间的距离，透明的，可以设置宽度
padding：内边距，用于控制内容与边框之间的距离，只能设置宽度
border：边框，在padding的外沿，可以设置宽度、颜色和样式
content：盒子的内容，显示文本和图像，可以设置背景颜色
注：width和height是设置content区域的大小

2、设置单侧

margin/padding/border都可以设置单侧宽度（颜色、样式），例如：margin-bottom。
还可以简写，例如：
margin：10px 5px 15px 20px ----------- 上右下左
margin：10px 5px 15px ----------- 上左右下
margin：10px 5px ----------- 上下左右
margin：10px ----------- 上下左右

3、边界塌陷

边界塌陷只产生在普通文档流的上下外边距之间，下面以div为例：
①兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，取其较大值。
②父子div：父级div中没有border、padding、inline content，子级div的margin会一直向上找，在到找到包含这些内容之一的标签，然后此div与其没有这些内容的父元素一同显示该margin。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px;
        }
        .outer{
            width: 200px;
            height: 200px;
            background-color: #e89a4b;
            /*border: 1px saddlebrown solid;*/
            padding: 1px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #f13884;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
    <div class="inner">hello</div>
</div>
</body>
</html>

4、float浮动属性

（1）基本概念

block元素： 可以设置width、height、margin、padding属性
inline元素： 可以设置margin、padding水平方向的距离
常见的块级元素有： div、form、table、p、pre、h1~h5、dl、ol、ul
常见的内联元素有： span、a、strong、em、label、input、select、textarea、img、br
文档流： 指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流： 将块级元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
绝对定位absolute和浮动float会脱离文档流
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，围绕在周围（即部分无视）。而对于使用absolute postion脱离文档流的元素，其他盒子与其内的文本都会无视它（可以说是完全无视）
浮动的表现： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档流中，所以文档流中的浮动框之后的块框表现得就像浮动框不存在一样。另外，浮动框不能浮动到其前的文档流元素之上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;

        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            float: right;

        }
         .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;

        }
         .div4{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">aaa</div>
    <div class="div2">bbb</div>
    <div class="div3">ccc</div>
    <div class="div4">ddd</div>
</body>
</html>

（2）清除浮动

clear： clear属性只影响自身的位置。并且只清除前面元素的影响。例如它前面有个元素设置了 clear: right; 那么这个元素会自动下降一格。
取值：
none：默认值，允许两边都可以有浮动元素
left：不允许左边有浮动元素
right：不允许右边有浮动元素
both：不允许两边有浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;
            float: left;

        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            float: right;
            clear: left;

        }
        .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
            clear: right;

        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

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

（3）子元素浮动的影响
父元素的高度在不设置height属性时，默认是子元素撑开。如果子元素设置浮动，那么父元素高度则塌陷。
解决方法一（推荐）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
         * {
             margin:0;padding:0;
         }

        .container{
            border:1px solid red;
            width:300px;
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }

        .clearfix:after{
            content:"";
            display: block;
            clear: both;
        }
</style>
</head>
<body>
        <div class="container clearfix">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</html>

解决方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
         * {
             margin:0;padding:0;
         }

        .container{
            border:1px solid red;
            width:300px;
            overflow: hidden;
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }

</style>
</head>
<body>
        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</html>

5、position定位属性

static： 默认值，无定位，不能当做绝对定位的参照物，并且设置标签对象的left、top等值是不起所用的。
relative： 相对定位。相对定位是相对于该元素在文档流中的原始位置。移动的只是这个元素图像，它在文档流占据的位置不变。

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

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            position: relative;
            left: 100px;
            top:  50px;


        }
         .div3{
            width: 200px;
            height: 200px;
            background-color: green;

        }

    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

position：relative; 的一个重要用法就是方便子元素绝对定位找到参照物。

absulute： 绝对定位。绝对定位的元素会脱离文档流，并相对于最近已定位的祖先元素定位。如果没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

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

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
            left: 100px;
            top:  50px;


        }
         .div3{
            width: 200px;
            height: 200px;
            background-color: green;

        }
         .outer{
             position: relative;
         }

    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

fixed： 元素脱离文档流，使用top、right、bottom、left等属性，以窗口为参考点进行定位，即窗口滚动条滚动时，元素不会随着滚动条滚动。

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

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
            left: 100px;
            top:  50px;


        }
         .div3{
            width: 200px;
            height: 200px;
            background-color: green;

        }
         .outer{
             position: relative;
         }
        .returnTop{
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 5px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }

    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>
<div style="height: 2000px;background-color: darkgoldenrod"></div>
<div class="returnTop">返回顶部</div>

</body>
</html>

6、使用margin属性布局绝对定位元素

此情况，margin-bottom等值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不论它的祖先元素有没有定位，都以文档流中原来所在的位置为参照物偏移。

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

    .div1{
        /*position: relative;*/
    }
    .div3{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    .div4{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        margin-top: 50px;
        margin-left: 50px;
    }
    .div5{
        width: 100px;
        height: 100px;
        background-color: #eac532;
    }

    </style>
</head>
<body>

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </div>
</div>

</body>
</html>

7、BFC

BFC(Block Formatting Context)块级格式化环境：
BFC是一个CSS中的一个隐藏属性，开启BFC后，该元素会变成一个独立的布局区域。

元素开启BFC后的特点：
①开启BFC的元素不会被浮动元素所覆盖
②开启BFC的元素和子元素的外边距不会重叠（即不会因为子元素浮动，而产生的高度塌陷）

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

    .div1{
        border: red 10px solid;
        overflow: hidden;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
        margin-top: 100px;
    }


    </style>
</head>
<body>

<div class="div1">
    <div class="div2">
    </div>
</div>

</body>
</html>