前端入门04 -- CSS字体，文本，背景属性，CSS盒子模型

CSS字体属性

font-family：设置字体系列；
- 字体之间的用英文状态下的逗号隔开；
- 尽量使用系统默认自带的字体；
- 设置多个字体时，存在优先级；
font-size：设置字体大小，以px为单位，谷歌浏览器默认的字体为16px；
- 可使用body标签，进行全局设置；
- 标题标签比较特殊，需要单独设置字体大小；
font-weight：设置字体粗细；
- normal：默认值(不加粗)；
- bold：定义粗体；
- 100-900：400等同于normal，700等同于bold，这个数字后面不能跟单位；
font-style：设置文字样式使用来表示；
- normal：默认值，浏览器会显示标准的字体样式；
- italic：浏览器会显示斜体的字体样式；
font: font-style font-weight font-size font-family：字体复合写法，上面的顺序不能打乱，各个属性之间以空格隔开，不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用；

<style>
    body {
        font-size: 20px;
        font-weight: bold;
    }
        
    h2 {
        font-family: '宋体';
        font-size: 15px;
    }
        
    .xie {
        font-style: italic;
    }
        
    div {
        /* font: font-style font-weight font-size font-family */
        font: italic 700 16px Arial;
    }
</style>

<body>
    <h2>不能说的密码</h2>
    <p>都是开发活动风刀霜剑浪费</p>
    <p>都是开发活动风刀霜剑浪费</p>
    <p>都是开发活动风刀霜剑浪费</p>
    <p>都是开发活动风刀霜剑浪费</p>
    <p>都是开发活动风刀霜剑浪费</p>
    <p class="xie">都是开发活动风刀霜剑浪费</p>

    <div>说的废话都是客观的第三方了解多少</div>
</body>

image.png

CSS文本属性

文本属性可定义文本的外观，例如文本的颜色，对齐文本，装饰文本，文本缩紧，行间距等；
color：设置文本颜色；

Snip20220926_50.png

text-align：对齐文本，用于设置标签元素内的内容在水平方向上的对齐方式；

image.png

text_decoration：设置文本装饰，可以给文本添加下划线，删除线，上划线等；

image.png

text-indent：设置文本缩进用来指定文本的第一行的缩进，通常是将段落的首行缩进；
- em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小；
line-height：设置行高，当标签的行高与标签的高度相等时，可实现标签内容在竖直方向上的居中；

<style>
    div {
        color: rgb(10, 10, 234);
        text-align: left;
        text-decoration: line-through;
        text-indent: 2em;
        line-height: 30px;
    }
</style>
<body>
    <div>都是开发活发活动风刀霜剑浪费剑浪费剑浪费都是开发活动风刀霜剑浪费剑浪费剑浪费都是开发活动风刀霜剑浪费</div>
</body>
</html>

image.png

text-shaow：设置文字的阴影，是CSS3新增的属性；

image.png

text-transform：设置文本的大小写，常见值如下：
- none：默认值，不做任何处理；
- uppercase：所有的字母都大写；
- lowercase：所有的字母都小写；
- capitalize：单词的首字母大写，通过空格来识别单词；
- inherit：表示应该从父元素继承text-transform属性的值；
letter-spacing：设置字符之间的空白间距，常见值如下：
- normal：默认值，字符之间没有额外的空间；
- length：设置字符间的固定间距，允许使用负值，例如letter-spacing：5px；
- inherit：表示应该从父元素继承 letter-spacing 属性的值；
word-spacing：设置单词之间的空白间距，常见值如下：
- normal：默认值；
- length：设置单词之间的固定间距，例如word-spacing: 20px；
- inherit：表示从父元素继承 word-spacing 属性的值；
white-space：设置文本换行和处理空白的属性，常见值如下：
- normal：空格会合并，回车不换行，内容超出区域会自动换行；
- pre：空格不会合并，回车会换行，没有回车或br，会单行显示不换行；
- nowrap：空格会合并，回车不换行，单行显示；
- pre-wrap：空格不会合并，回车会换行，内容超出区域会自动换行；
- pre-line：空格会合并，回车会换行，内容超出区域会自动换行；
- inherit：表示从父元素继承 white-space 属性的值；
text-overflow：设置处理文本溢出的方式，常见值如下：
- clip：溢出的文本直接被裁剪；
- ellipsis：溢出的文本以省略号的形式显示；
text-overflow属性只能定义文本溢出时的效果，为了要让text-overflow属性生效，必须强制文本在一行内显示(white-space: nowrap)，同时隐藏溢出的内容(overflow: hidden)；

CSS背景属性

CSS通过背景属性可以设置标签的背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等等；
background-color：设置背景颜色，一般情况下标签的背景颜色默认为transparent(透明的)；
background-image：设置背景图片，可设置标签的背景图片，常见于logo或者超大的背景图片，可非常便于控制位置，默认值为none；

image.png

background-repeat：设置背景平铺方式，默认值为repeat，标签可以设置背景颜色，也可设置背景图片，背景颜色在最下面；

image.png

background-position：设置背景图片的位置，可以设置图片在标签中位置，参数有x与y，表示坐标，其坐标值可以是方位名词也可以是精确单位；
参数值为方位名词：center，top，left，right，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>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            background-position: center top;
        }
        
        .ci {
            width: 150px;
            height: 40px;
            background-color: green;
            line-height: 40px;
            background-image: url("circle.png");
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2.5em;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
    <div class="ci">我爱新中国</div>
</body>

</html>

image.png

参数值为精确坐标值：设置X轴坐标与Y轴坐标；
- 精确坐标值，第一个肯定是X轴坐标，第二个是Y轴坐标；
- 若只设定一个值，那么该值一定是X轴坐标，另一个默认垂直居中；
参数值为混合单位：即方位名词与精确数值之间的混合；

<!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>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            /* 精确数值 */
            background-position: 20px 40px;
        }
        
        .ci {
            width: 150px;
            height: 40px;
            background-color: green;
            line-height: 40px;
            background-image: url("circle.png");
            background-repeat: no-repeat;
            /* 混合单位 */
            background-position: 3px center;
            text-indent: 2.5em;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
    <div class="ci">我爱新中国</div>
</body>

</html>

background-attachment：设置背景的固定方式，可控制背景图像是否固定或者随着页面的其余部分滚动，可实现视差滚动的效果；

image.png

<!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>
        .ai {
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat;
            /* 精确数值 */
            background-position: 20px 40px;
            /* 背景图片固定住 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
</body>

</html>

background: 背景颜色背景图片背景平铺背景图像滚动背景图片位置：背景属性的复合写法；

<!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>
        .ai {
            width: 300px;
            height: 300px;
            /* background-color: orange;
            background-image: url("180.png");
            background-repeat: no-repeat; */
            /* 精确数值 */
            /* background-position: 20px 40px; */
            /* 背景图片固定住 */
            /* background-attachment: fixed; */
            /* 背景的复合写法 */
            background: orange url("180.png") no-repeat fixed 20px 40px;
        }
    </style>
</head>

<body>
    <div class="ai"></div>
</body>

</html>

background-color: rgb(0, 0, 0, 0.1)：设置背景颜色的透明度，是CSS3新增的属性，IE+9版本浏览器才支持的；

image.png

CSS盒子模型

网页布局的本质如下：
- 网页元素基本都是盒子Box；
- 利用CSS设置好盒子的样式，然后摆放到相应的位置；
- 往盒子里面装内容；
盒子模型(Box Model)：将HTML页面中布局元素看作是一个矩形盒子，也就是一个盛装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框(border)，外边距(margin)，内边距(padding)和实际内容(content)，如下所示：

image.png

box-shaow：设置盒子的阴影效果，是CSS3新增的属性；
- box-shaow: 10px 10px 10px 10px red；
- 默认是外阴影(outset)，但是不可以写这个单词否则导致阴影无效；
- 盒子阴影不会占用空间，不会影响其他盒子的排列；

image.png

border：设置元素的边框，其有三部分组成：边框宽度，边框样式，边框颜色；
- border-width：设置边框的宽度；
- border-color：设置边框的颜色；
- border-style：设置边框的样式；
- border: 10px hotpink dashed：边框的复合写法；
- 边框分为上下左右四个部分，我们可以通过border-top，border-left，border-right，border-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>
        div {
            width: 300px;
            height: 200px;
            border-width: 10px;
            border-color: hotpink;
            /*dotted圆点虚线  dashed虚线 solid实线*/
            border-style: dotted;
            /** 复合写法 */
            border: 10px hotpink dashed;
            /* 分别设置 */
            border-top: 5px red dashed;
            border-left: 5px gre dashed;
            border-right: 5px black dotted;
            border-bottom: 5px orange solid;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-collapse：可设置表格table的边框样式，它控制的是相邻单元格的边框，其值为collapse时表示相邻边框合并到一起；

<!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>
        table {
            width: 500px;
            height: 100px;
        }
        th {
            height: 35px;
        }
        table,
        td,
        th {
            border: 1px solid red;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>
<body>
    <table align="center" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>排名</th>
            <th>排名</th>
            <th>排名</th>
            <th>排名</th>
        </tr>
        <tr>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
        </tr>
        <tr>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
            <td>排名</td>
        </tr>
    </table>
</body>
</html>

image.png

border-radius：设置元素的外边框的圆角，是CSS3新增的属性；
- 参数值可以是具体数值，也可以是百分比；
- 该属性是一个简写属性，可以写四个参数值，分别代表左上角，右上角，右下角，左下角(顺时针)；
- 可以单独设置一个角的的圆角，例如设置左上角的border-top-left-radius: 20px；
padding：设置标签的内边距，即边框与内容之间的距离；

image.png
padding的复合写法如下：

image.png

当我们给盒子指定了padding值之后，会发生：
- 内容与边框之间有了距离，添加了内边距；
- padding也会影响盒子的实际大小；
- 若保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可；

<!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>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8300;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
            background-color: #fcfcfc;
        }
        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">新浪导航时</a>
        <a href="#">新浪导</a>
        <a href="#">新浪</a>
    </div>
</body>
</html>

image.png

内边距(padding)不会撑开盒子的情况：如果盒子本身没有指定width/height属性时，padding是不会撑开盒子大小的；
margin：设置标签的外边距，即控制盒子与盒子之间的距离，其复合写法与padding完全相同；

image.png

盒子模型中的注意事项

box-sizing

根据上述的盒子模型我们知道，盒子模型由四个部分组成：
- content内容：显示内容的，通过width与height属性设置内容/盒子的宽高；
- padding内边距：内容距离边框的距离；
- border边框：可设置边框的宽度，颜色，样式；
- margin外边距：当前盒子与其他盒子之间的边距；
box-sizing是一个CSS属性，此属性决定了盒子宽高的计算方式，通常有两种值分别如下：
- content-box：默认值，属于标准盒子模型；
- border-box：IE盒子模型，是CSS3引入的一种盒子模型，

<style>
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      padding: 2px;
      margin: 2px;
      background-color: orange;
    }
    .content-box {
      box-sizing: content-box;
    }

    .border-box {
      box-sizing: border-box;
    }
</style>

<div class="box content-box"></div>
<div class="box border-box"></div>

image.png

当使用标准盒子模型时，选择器中width等于内容的宽度，整个盒子的宽度 = 内容宽度width(10) + 左右内边距(2*2) + 左右边框宽度(1*2) = 16px，选择器中width仅仅指内容的宽度，不包括padding和border；
当使用IE盒子模型时，选择器中的width等于整个盒子的宽度，即10px = 内容宽度width + 左右内边距(2*2) + 左右边框宽度(1*2)，选择器中width是内容的宽度，以及包含padding和border，是三者之和；
使用不同的盒子模型，选择器中width表示的宽度不同，不管使用哪种盒子模型，都与外边距margin无关；

margin外边距让块级元素水平居中

外边距可以让块级元素水平居中，必须满足两个条件：
- 盒子必须设置了宽度；
- 盒子左右的外边距都设置为auto；

<!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>
        div {
            width: 500px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="one">1111</div>
</body>
</html>

注意上述方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可；

<!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>
        div {
            width: 500px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="one">
        <span>都是废话都是艰苦奋斗是</span>
    </div>
</body>
</html>

margin外边距合并

margin外边距合并：是指使用margin定义块元素的垂直外边距时，可能会出现外边距合并的现象；
相邻块元素垂直外边距的合并：竖直方向上相邻的两个块元素，若上方的块元素有下外边距margin-bottom，下方的块元素有上外边距margin-top，则它们之间的间隔距离不是margin-bottom与margin-top之和，而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并，所以在开发中我们尽量只给其中的一个盒子添加margin外边距值；

image.png
嵌套块元素外边距合并会导致父元素的塌陷：对于嵌套关系(父子关系)的块元素(可嵌套多级)，若父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值，解决方案有如下：
- 可以为父元素定义上边框；
- 可以为父元素定义内边距；
- 可以为父元素添加overflow: hidden；
  
  image.png

清除所有网页元素的内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认值也不一致，因此我们在布局之前，首先要清除网页元素的内外边距，代码实现如下：

* {
    margin: 0;
    padding: 0;
}

行内元素设置上下内外边距无效

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(设置无效)，但是转换为块级和行内块元素就可以设置内外边距了；

最后编辑于：2022.10.13 11:29:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,193评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,306评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,130评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,110评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,118评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,085评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,007评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,844评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,283评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,508评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,667评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,395评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,985评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,630评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,797评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,653评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,553评论 2赞 352

前端入门04 -- CSS字体，文本，背景属性，CSS盒子模型

CSS字体属性

CSS文本属性

CSS背景属性

CSS盒子模型

盒子模型中的注意事项

box-sizing

margin外边距让块级元素水平居中

margin外边距合并

清除所有网页元素的内外边距

行内元素设置上下内外边距无效

推荐阅读更多精彩内容