CSS----盒模型_css代码盒子-优快云博客

本文链接：https://blog.youkuaiyun.com/Litheng/article/details/129636572

一、盒模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

在网站布局中，我们会使用各种各样的元素，这些元素本质上就是以一个小的容器，也称之为盒子，盒子里面可以放置文本、图片、或者其他元素，CSS盒模型本质上是一个包裹每个HTML元素的盒子，包括margin、border、padding和content四个部分，浏览器就是通过盒模型来计算元素在网页中占据的空间大小的。

content表示盒子的内容，包含文本、图像等。padding表示填充内容周围的一个区域，它是透明的。border表示围绕填充和内容的边框。margin表示边框以外的区域，也是透明的。

如何在所有浏览器中正确设置一个元素的宽度和高度呢？

计算盒子的宽度和高度的两个公式

盒子的宽度＝内容宽度+左填充+右填充+左边框+右边框+左边距+右边距

盒子的高度＝内容高度+上填充+下填充+上边框+下边框+上边距+下边距

当应用CSS元素设置一个元素的width和height属性时，只是设置了元素内容区域的宽度和高度，要计算一个元素的完整尺寸，必须要加上填充、边框和边距，上面这种计算元素大小的盒模型称之为标准盒模型。

能不能给元素设置了margin和padding属性后，元素本身的宽高就固定为设置的这个值呢？

这就要应用另一种盒模型，叫怪异盒模型，给元素声明box-sizing属性，取值为border-box，这个元素就按照怪异盒模型来呈现大小了

怪异盒模型计算公式：

盒子的宽度 = CSS样式设置的width值 + 左边距 + 右边距

盒子的高度 = CSS样式设置的height值 + 上边距 + 下边距

box-sizing还有一个值content-box，就是用来触发元素的标准盒模型，这也是元素盒模型的默认值，如果没有给元素设置box-sizing属性，容器的大小就会按照标准盒模型来计算

二、Content（内容）

2.1 文本颜色和大小写转化

通过声明color属性来设置文本的颜色，值可以是颜色名称，十六进制颜色值，RGB颜色值。

一个页面的默认文本颜色是在body选择器中定义的。

CSS如何强制转换文本中，单词和字母的大写和小写，使用text-transform属性来实现，值有三个：uppercase（文本被转换为大写）、lowercase（文本被转换为小写）、capitalize（每个单词的首字母被转换为大写，主要用来设置英文的文本，对中文无效）。

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>CSS文本颜色和大小写转化</title>
    <link rel="stylesheet" href="./css/text-color-case-conversion.css">
 </head>
 <body>
        <h1>这是标题h1标签。</h1>

        <p>这是第一段正文。</p>

        <p class="transform">Your letter came to me yesterday. I haven't received your last letter for a long time. I'm sorry that it took me so long to reply.I'm very busy recently. I hardly have time to write many thank you letters. Thank you for the gift.I'm sorry I haven't written to you for such a long time. I hope everything is OK. OK, how are you doing? I'm glad to receive your letter of October.Thank you Write to me. Your letter came to me yesterday. I haven't received your last letter for a long time.</p>
 </body>
 </html>

CSS代码如下：

body {
    /* 一个页面的默认文本颜色是在body选择器中定义的 */
    color: blue;
}

h1 {
    color: rgb(221, 36, 218);
}

p.transform {
    /* text-transform: uppercase; */    /*全部大写*/
    /* text-transform: lowercase; */    /*全部小写*/
    text-transform:capitalize;          /*首字母大写*/
}

三种效果如下：

全部大写：

全部小写：

首字母大写：

2.2 文本对齐和文本间距

文本水平对齐通过text-align属性来实现，属性值有：left（水平居左）、right（水平居右）、center（水平居中）、justify（使每一行都有相等的宽度，而且左右的边界使对齐的）。

文本垂直对齐通过vertical-align属性来实现，属性值有：baseline（基线对齐），text-top（文本顶部对齐），text-bottom（文本底部对齐），sub（下角标对齐），super（上角标对齐）。

文本缩进通过声明CSS的text-indent属性也可以实现，使用长度值或百分比来设置文本缩进，长度值可以使用绝对单位（px）或相对单位（em，缩进宽度为字符宽度的倍数）

字符宽度如果使中文方块字，也可以称之为字体大小，通过font-size属性来设置的

百分比缩进宽度：是根据父元素的宽度计算得到的。

letter-spacing属性用于指定中文文字或英文字母之间的空隙。

line-height属性：用于指定行与行之间的高度，也就是行高，属性值有：normal（也是默认值，浏览器会根据字符大小自动设置一个行高）、一个数字（比如1.5，此数字与当前的字符大小相乘得到）、绝对值（比如20px，-5px，设置固定的行间距）

line-height设置的行高是两条基线的距离。

word-spacing属性用于指定文本中单词的间距，只对英文有效。

white-space属性指定了如何处理元素内部的空白，常用属性值：nowrap（不管包含文本的元素宽度是多少，文本都不会换行，直到遇见<br>标签为止）。

2.3 文本装饰

为文本添加装饰线通过text-decoration-line属性实现，可以结合一个以上的值，属性值有：overline（在文本上方添加）、line-through（在文本中间添加线条修饰）、underline（在文本下方添加线条修饰）。

添加了超链接的文本就不要使用underline下划线装饰了。

为文本设置装饰线的颜色通过text-decoration-color属性实现，属性值为任意合法的颜色值。

为装饰线指定风格通过text-decoration-style属性实现属性值有：soild（实线）、double（双实线）、dotted（圆点线）、dashed（虚线）、wavy（波浪线）。

通过text-decoration-thickness属性为线条设置厚度，也就是线条的粗细，属性值有auto（默认值，这个值是不确定的，和所修饰的大小有关系）、px（像素大小，是一个绝对值）、%（是一个相对值，根据修饰文字的高度计算出来）。

简写：可以去掉第三个单词，使用text-decoration这个样式属性来实现，text-decoration是一个简写的属性，它的值是通过空格分隔的，没有顺序要求，但是text-decoration-line这个属性的值是必须设置的。

HTML中的所有链接默认都有下划线，给a元素声明text-decoration:none，可以去除链接的下划线。

2.4 字体和字号

使用font-family属性指定一个文本的字体，属性值是一个字体的名称。

在CSS，英文字体有五类：

第一类：Serif有衬线字体，在每个字母边缘都有一个小笔划。

第二类：Sans-serif无衬线字体，又干净的线条且不附带小笔画。

第三类：Monospace单空格字体，所有的字母都有相同的固定宽度又叫等宽字体。

第四类：Cursive草书字体，模仿人类的手写体。

第五类：Fantasy幻想字体，是装饰性、娱乐性的字体。

在中文网站中，比较通用的字体：

Microsoft Yahei 微软雅黑 Windows系统

PingFang SC 苹方简 Mac系统

先定义的字体优先起作用，如果定义的字体用户电脑里不存在，浏览器就使用默认字体了。默认字体也可以自定义设置的。

通过font-size属性设定文本大小，属性值可以是绝对大小（将文本设置为指定的大小，不允许用户在所有的浏览器中改变文字的大小），也可以是相对大小(也就是相对于周围元素的大小，使用em这个单位来设置，一般情况下，会根据继承下来的父元素尺寸计算得到。

除了em还可以用%来表示，是相对于父元素的大小计算文本尺寸的。

使用rem这个相对单位，相对于根元素。

2.5 字体风格和样式简写

font-style属性主要用于指定斜体文本，这个属性有三个值，normal（文本正常显示）、italic（文本斜体显示）、oblique（和italic非常相似，但浏览器支持度较低）。

font-weight属性指定了一个字体的粗细，属性值设置有两种方式：名称和数值，名称有：lighter(细体)、normal（正常字体）、bold（加粗字体）、bolder（更粗字体），数值有100-900，值越大，文本越粗。数值和名称的对应关系是：100对应lighter，400对应normal，700对应bold，900对应bolder。

font-variant属性指定了文本是否应以小型大写字符显示，就是小一号的大写字母，两个属性值：normal和small-caps（小型大写字母），这个属性只对英文有效。

为了缩短代码，可以在一个font属性中指定所有单独的字体属性，font是一个简写属性，它的值可以是font-style、font-variant、font-weight、font-size/line-height、font-family。

2.6 谷歌字体和Icon图标

使用谷歌字体只要在<head>元素里添加一个特殊的样式表链接<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=字体名称">，要使用多个谷歌字体，只需要用管道字符竖线（|）分隔字体名称。

除了谷歌字体，还可以使用一个图标库将图标添加到我们的HTML页面中，图标库网站：https://fontawesome.com/

Icon字体图标的强大之处就是，你可以将这个图标当成是文本，任意的添加样式。

2.7 宽高

如果一个元素有指定的宽度，那么元素的填充就会加到该元素的总宽度上。

宽度和高度属性不包括margin、border和padding区域，只是用于定义元素的内容尺寸，设置的值有：

auto--浏览器自动计算的高度和宽度

length--以px、pt、cm等为单位定义高度和宽度

%--以父元素宽度的百分比来定义高度和宽度

initlal--将高度和宽度设置为默认值，实际上就是auto

样式中给元素设置的宽高，是不包含该元素边框宽高的，它只包含元素内容的宽高。

三、Padding（内边距）

3.1 填充

CSS填充属性用于在一个元素的内容周围产生空间，也就是边框内到内容外之间的距离，可以通过padding-top，padding-right、padding-bottom、padding-left等属性设置元素的上边、右边、下边和左边的内填充。

padding属性都有：

length--以px、pt、cm等为单位指定填充

%--以父元素宽度的百分比来指定填充

如果一个元素有指定的宽度，那么元素的填充就会加到该元素的总宽度上。

四、Border（边框）

4.1 边框样式

border-style属性指定了要显示什么样的边框，属性值有：dotted（定义一个点状的边框）、dashed（定义一个虚线的边框）、solid（定义一个实线的边框）、double（定义一个双倍的边框）、none（定义无边框）、hidden（定义一个隐藏的边框）

当表格单元格相邻边框产生冲突时，border-style:hidden > border-style:soild > border-style:none

如何控制单独的一条边框线呢？

可以在border-style中间添加一个表示方位的词，比如border-right-style，border-top-style，border-bottom-style，border-left-style

border-style属性的简写方法：

1、四个值分别代表上边，右边，下边，左边的边框样式，从顶部开始按照顺时针方向来设置值

2、三个值分别代表上边，左右边，下边的边框样式

3、两个值分别代表上下边，左右边的边框样式

4、一个值表示四个边框的样式

4.2 边框宽度

border-width属性用于设置四个边框的宽度，宽度可是设置为一个特定的尺寸，以px、em等为单位，或者使用三个预定义的值：thin（薄）、medium（中）、thick（厚）

边框宽度的值也可以使用混合简写的方法。

4.3 边框颜色

border-color属性用于设置四个边框的颜色，可以设置颜色名称，十六进制颜色值，RGB颜色值来设置颜色，也可以通过transparent来设置透明。

边框颜色的值也可以使用混合简写的方法

和字体font属性一样，边框也可以使用速记属性。

border:border-width border-style border-color,这个简写方法默认四个边全部定义相同的边框。

单个边的方法：border-top,border-right,border-bottom,border-left。

五、Margin（外边距）

5.1 外边距

用来在元素周围创造空间，也就是控制元素边框外的距离，可以通过margin-top、margin-right、margin-bottom、margin-left设置元素的上边、右边、下边和左边的外边距

margin属性都有：

auto--浏览器自动计算的边距

length--以px、pt、cm等为单位指定边距

%--以父元素宽度的百分比来指定边距

边距塌陷：在两个容器的连接处，有时会出现边距塌陷的问题，也称之为margin塌陷，一般发生在相邻元素垂直边距和嵌套块元素垂直边距邻接的时候，当两个边距折叠成一个单一的边距的时候，这个边距等于两个边距中最大的那个，这种情况不会发生在左右边距上，只会发生在顶部和底部的边距上。

5.2 轮廓

轮廓是在元素周围画的一条线，在边框之外，使元素视觉上有“突出”显示。

outline-style：轮廓样式

dotted--定义一个点状轮廓

dashed--定义一个虚线轮廓

solid--定义一个实线轮廓

double--定义一个双线轮廓

none--表示无轮廓

hidden--定义一个隐藏的轮廓

outline-color：轮廓颜色

颜色名称

十六进制颜色值

RGB颜色值

outline-width：轮廓宽度

thin--一般为1px

medium--一般为3px

thick--一般为5px

一个特定的尺寸--以px、em为单位

outline-offset：轮廓偏移，用来设置轮廓和元素之间的空隙，这个空隙是透明的

outline：一个速记属性，用于在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色-

六、Background（背景）

6.1背景属性

可以直接给body添加背景图片，body容器默认水平上时占满整个窗口的

给body添加背景图片可以通过background-image属性实现，属性值为url(背景图片的路径);

当我们给元素添加背景图片时，图片是以平铺的方式来展现的，平铺就是当我们放入一张背景图片时，这个图片默认情况下会向四周扩散，无限的进行重复。如果不希望背景图片是重复的，需要使用background-repeat属性，取值为no-repeat;，平铺效果的取值为repeat。

调整背景图片的位置需要使用background-position属性，需要写两个值，第一个值表示水平方向上的对齐方式（left，center，right），第二个值表示在垂直方向上的对齐方式（top，center，bottom）。

实现文字滚动，背景图片不动的效果要使用background-attachment属性，用来声明背景图片与内容的依赖方式，值fixed：图片固定，值scroll：同时滚动

给容器设置背景颜色用background-color属性，值可以是颜色名称，十六进制颜色值，RGB颜色值

让背景透明一些，需要用到一个新的颜色值的表示方法--rgba，其中rgb就是rgb颜色值，a是alpha的简写，表示通过设置一个alpha通道来指定颜色的不透明度，是一个介于0-1的数字，0表示完全透明，1表示完全不透明

为了精简代码，也可以使用单一的background来指定所有背景属性，可以把body的全部背景属性合并在一个background属性里

如果背景图片大小background-size属性应用到简写形式中，图片大小比如cover，在它的前面必须添加背景图片位置，即使位置不调整也需要添加0px 0px这一对值。

6.2精灵图

精灵图也称雪碧图、妖怪图，基本原理是将页面中使用到的图片进行分类，整齐划一的摆在一张背景透明图片上面，通过CSS的背景技术实现图片的引入，从而减少服务器发送和接受请求的次数，提高页面的加载速度。

默认背景图片左上角显示字母a在元素的内部，如需使用其他字母就要使用。background-position属性调整背景图片的位置，如果位置测量有偏差，可以在浏览器开发者工具中找到页面元素，选中属性值，按下键盘的上下箭头对属性值进行微调。