CSS 学习笔记（二）CSS文字属性，常用的文字属性、盒子模型，什么是盒子模型、display属性---行内元素和块元素

本文已参与「新人创作礼」活动，一起开启掘金创作之路

1. 文字属性

CSS可以通过设置文字属性来呈现出我们想要看到的文本效果。

为了缩短代码，也可以在一个属性 font 中指定所有单个字体属性。 font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

常用的文字属性设置：

属性	描述
font	简写属性。在一条声明中设置所有字体属性字体连写是有顺序的，不能随意换位置其中font-size和font-family必须同时出现
font-family	规定文本的字体系列 (即设置哪一种字体)
font-size	用于设置字号(字体大小）
font-style	规定文本的字体样式（e.g. 倾斜是italic, 不倾斜是normal）
font-variant	规定是否以小型大写字母的字体显示文本
font-weight	规定字体的粗细（加粗是700 / bold，不加粗是normal / 400）

常用的文本属性：

属性	描述
color	设置文本颜色（通常用十六进制，e.g. #fff表示白色）
text-decoration	向文本添加修饰
text-align	设置文字水平的对齐方式
vertical-align	设置文字垂直的对齐方式
line-height	设置行与行之间的距离
text-shadow	设置文本阴影
text-indent	缩进文本的首行
word-spacing	设置字间距
letter-spacing	设置字符间距

举个例子：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS文字属性</title>
    <style>
        a {
            text-decoration: none;
            padding: 10px;
            background: #aaa;
        }

        p {
            text-align: center;
            /* 
                2 行高等于当前字体大小的两倍
                10px 10px行高
            */
            line-height: 1.6;
            /*
                underline 下划线
                overline 上划线
                line-through 删除线
            */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit. 
        Tenetur at a recusandae repellat ipsum facilis optio nemo doloribus iure cumque aliquam eos, 
        est fuga qui minima error non rerum saepe.
    </p>
    <a href="#">click</a>
</body>
</html>

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

2. 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。

盒子与盒子之间的距离是外边距
盒子的厚度我们称为为盒子的边框
盒子内容与边框的距离是内边距
盒子里面的文字和图片等元素是内容区域
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：在这里插入图片描述常用的盒模型属性：

属性	作用
border-width	设置边框粗细，单位是px
border-style	设置边框的样式 none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线
border-color	设置边框颜色

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS盒子模型(Box Model)</title>
    <style>
        div {
            background: cyan;
            width: 100px;
            height: 100px;
            padding: 20px;
            /* 
                border边框的宽度
                边框的样式 solid dotted dashed
            */
            border: 5px solid lightgreen;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div>
        div1
    </div>
    <div>
        div2
    </div>
</body>
</html>

效果如下：

在这里插入图片描述 对div1分析： margin部分：

border部分：在这里插入图片描述

padding部分：在这里插入图片描述

content部分：在这里插入图片描述

3. display属性

display(标签显示模式)是标签以什么方式进行显示。 HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

display: block; 块级元素，即使设置了width宽度,也要独占一行整宽
display: inline; 行内元素，内嵌行内文字，margin只能变化左右宽度，上下高度不变化
display: inline-block; 行内块元素，内嵌行内块文字，margin可以变化上下左右宽高度
display: none; 隐藏块元素

行内元素与行内块元素区别：

行内元素只能左右添加margin
行内块元素上下左右都可以

举个例子：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSSdisplay属性</title>
    <style>
        body {
            margin: 0;
        }

        .block {
            /*
                块级元素 block 默认占整宽，
                即使限制宽度，也会用margin填充剩下部分
            */
            display: block;
            background: #ccc;
            width: 100px;
        }

        .inline {
            display: inline;
            background: aqua;
        }

        .inline-block {
            display: inline-block;
            background: aquamarine;
        }
    </style>
</head>
<body>
    <!-- div默认的display就是block -->
    <div class="block">
        块级元素
    </div>
    Lorem
    <div style="margin: 10px; padding: 10px" class="inline">
        行内元素
    </div> 
    ipsum dolor
    <div style="margin: 10px; padding: 10px" class="inline-block">
        行内块元素
    </div>
    sit amet, consectetur adipisicing elit. 
    Tenetur at a recusandae repellat ipsum facilis optio nemo doloribus iure cumque aliquam eos, 
    est fuga qui minima error non rerum saepe.
    abc
</body>
</html>

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

4. 浮动

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，不占位置，移动到指定位置。

它的作用是什么？

让多个盒子水平排列成一行
可以实现盒子的左右对齐等
可以用来控制图片，实现文字环绕图片效果
float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。

属性	描述
none	不浮动
left	向左浮动
right	向右浮动

当父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。这个时候我们该怎么做？ 在这里插入图片描述 利用清除浮动：

清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

适用于下列场景：

父级没高度
子盒子浮动
影响下面布局

清除浮动常用方法：

父盒子设置固定高度清除浮动

直接在父盒子上设置固定高度，不过不便于维护。

额外标签法(隔墙法)

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签 br 等亦可。

父级添加overflow属性方法

给父级添加： overflow为 hidden| auto| scroll 都可以实现。

使用after伪元素清除浮动

 .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

举个例子：不加清除浮动时：在这里插入图片描述加了之后：

在这里插入图片描述因为加了清除浮动，所以新购网那一部分的父级盒子高度撑了起来，所以可以正常显示了。