CSS之常用属性、元素的显示模式、盒模型

「爱情、让人受尽委屈。」 2024-04-23 15:31 124阅读 0赞

**目录**

一、字体属性

二、文本属性

三、背景属性

二、元素的显示模式

?块级元素

?行内元素与内联元素

?元素的显示模式

三、盒模型

?总述

?边框

?内边距

?外边距

--------------------

## 一、字体属性 ##

>  *  字体名称可以用中文, 但是不建议.
>  *  **多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )**
>  *  如果字体名有空格, 使用引号包裹.
>  *  建议使用常见字体, 否则兼容性不好.  
>

设置字体

![2e4ba91b7f5e41b794e4291d5ce5a262.png][]

**设置大小和粗细**

![8a089c3f9dbc4442800a062873385c18.png][]

![359d1f4e786e4c43ae3d3bfc71789aa5.png][]

##  ##

## 二、文本属性 ##

**文本颜色**

> 认识 RGB
> 
>   
> 我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.  
> 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
> 
>   
> **计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).  
> 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色**  
>

![3745ce08e4264546a1f08445db9bbdf6.png][]

**文本对齐**

**不光能控制文本，还能控制图片的对齐**

![87ddb4fa485c4a7991687f62c896ea0a.png][]

**文本缩进**

![b0539594036b4f0f876d98ab158b2e69.png][]

**行高**

![661d15e83ddd4df7960a28d256d0174c.png][]

--------------------

## 三、背景属性 ##

![5ba3df37b3fe442c83c79a8712644a9e.png][]

![f335c17268e142b4986eeb4064ee95fe.png][]

![1d8735607dea4ff0ac13535304c8c884.png][]

--------------------

## 二、元素的显示模式 ##

### ?块级元素 ###

![61db2ff6ec5144ebbf3161427c33cc9a.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>
            .test {
                width: 100px;
                height: 50px;
                background-color: brown;
            }
            .parent {
                width: 200px;
                height: 100px;
                background-color: aqua;
            }
            .child {
                height: 20px;/* 不写 width, 默认和父元素一样宽 不写 height, 默认为 0 (看不到了) */
                background-color: bisque;
            }
            span {
                width: 100px;
                height: 100px;
                background-color: darkcyan;
            }
        </style>
        
    </head>
    <body>
        <div class="test">
            这是一个块级元素
        </div>
        <div class="parent">
            这是一个块父元素
            <div class="child">
                这是一个子级元素块
            </div>
        </div>
        <span>
            这是一个行级元素
        </span>
    </body>
    </html>

![78b07f0eaaba42efbbd262a0f88eaf1c.png][]

![d6cf590a79c84ed68f5e87e005bea4d0.png][]

--------------------

????????????

### ?行内元素与内联元素 ###

![77b19382e0d842e4a0d4bb9a21fa2998.png][]

**? l栗子**![46135a6f5fd342059b1c72675da33445.png][]

**一个有关的前端面试题**

![6b226c14100b4e8dbd85c173e428b624.png][]

--------------------

### ?元素的显示模式 ###

![8169d4be1737495b8dcf5a3dd9ee863f.png][]

**栗子**

![d35dae1742e94dca95516ee4760ab426.png][]

**此外，display还有一个功能：可以控制元素是否显示，可以通过他来隐藏元素**

--------------------

## 三、盒模型 ##

### ?总述 ###

> 每一个 HTML 元素就相当于是一个矩形的 "盒子"  
> 这个盒子由这几个部分构成
> 
>  *  **边框 border**
>  *  **内容 content**
>  *  **内边距 padding**
>  *  **外边距 marg**

**先来张图**

![fab39690f14f49159dca388647d46e10.png][]

![5c54367074aa4a1f94ddc38aea476236.png][]

--------------------

### ?边框 ###

>   
> **基础属性**
> 
> 1.  粗细: border-width
> 2.  **样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框**
> 3.  **颜色: border-color**

**?一个边框的代码栗子**

<!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>
            .test {
                width: 200px;
                height: 100px;
                border-width: 50px;
                border-style: solid;
                border-color: brown;
            }
        </style>
    </head>
    <body>
        <div class="test">
            这是一个块级元素
        </div>
    
    
    </body>
    </html>

**效果展示**

![c8c2d8735e8e4b928c83cb703b0d53ad.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>
            * {
                box-sizing: border-box;
            }
            .test {
                width: 200px;
                height: 100px;
                /* border-width: 10px;
                border-style: solid;
                border-color: brown; */
                border: 10px solid brown;
                /* 简写的和上面的效果是一样的 */
            }
            p {
                width: 200px;
                height: 100px;
                border-top: 20px dashed green; 
                border-bottom: 10px dotted gray;
                border-left: 10px solid yellow;
                border-right: 5px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="test">
            这是一个块级元素
        </div>
    
        <p>
            这是一个段落
        </p>
    
    </body>
    </html>

![3c3b3aed9b0f483a841657b73cfe77cf.png][]

> 注意，通常情况下，我们设置的width和height是指的内容的大小，而一个盒子有了边框后，默认情况下我们的盒子会被撑大
> 
> 但如果你设置了border-box，让盒子不再撑大。这时width和height指的就是整体盒子的大小，相当于内容大小就被缩水了。

--------------------

### ?内边距 ###

>   
> padding 设置内容和边框之间的距离.
> 
>   
> 基础写法
> 
>   
> 默认内容是顶着边框来放置的. 用 padding 来控制这个距离  
> 可以给四个方向都加上边距
> 
>  *  **padding-top**
>  *  **padding-bottom**
>  *  **padding-left**
>  *  **padding-right**  
>

**?栗子**

![2b054d1aeb9349dda02396a60a70a4d8.png][]

![637590b4ceb1435d974299143e3d4510.png][]

**一点补充：复合写法**

> 可以把多个方向的 padding 合并到一起. \[四种情况都要记住, 都很常见\]  
> 
> 
>  *  padding: 5px; 表示四个方向都是 5px
>  *  **padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px**
>  *  padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
>  *  **padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)**  
>

--------------------

### ?外边距 ###

>   
> **基础写法**  
> 控制盒子和盒子之间的距离.  
> 可以给四个方向都加上边距
> 
>  *  margin-top
>  *  margin-bottom
>  *  margin-left
>  *  margin-rig  
>

![90b21802268843aba12e617eddffd86c.png][]

![324de40803544cccabc6adc10acbbe54.png][]

![288dfdeb9bb34bc1bba971546723e5f8.png][]

### **?块级元素居中** ###

![a11928ca01ce481081a41540bb51f4fb.png][]

![6edc1d98751c414d99ab13c530c59846.png][]

> ?注意:  
> 这个水平居中的方式和 text-align 不一样.  
> margin: auto 是给块级元素用得到.  
> text-align: center 是让行内元素或者行内块元素居中的.  
> 另外, 对于垂直居中, 不能使用 "上下 margin为auto"的方式  
>

### ?去除浏览器默认样式 ###

![2e065ef21b374e8591f2cff56d471f0e.png][]

## 四、弹性布局 ##

### ?初体验 ###

**使用前**

![327615d4302f41b2931c1f947381f572.png][]

**使用后**

![cb3c522625fd4483a8dab06820537ed9.png][]

**进一步的使用**

![e0f585155c5f468f92c7ccdf4a31e564.png][]

![a3251e4b950d4fd0a247c30268b21785.png][]

### ?flex 布局基本概念    ###

>   
> flex 是 flexible box 的缩写. 意思为 "弹性盒子".  
> **任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.**  
> flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
> 
>   
> **基础概念:**  
> 被设置为 display:flex 属性的元素, 称为 flex container  
> 它的所有子元素立刻称为了该容器的成员, 称为 flex item  
> flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

> ![10ab501782474034ae6aba5c75185198.png][]
> 
> ![6baf1bb919d149909238c6653ca30781.png][]

### ? 实现元素的居中 ###

![73089bbb9a534ad0a5f4811404418375.png][]

![8bfda80a79544843a9f04e2fde4fd37e.png][]

### ?注意 ###

> 理解 stretch(拉伸):  
> 这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度  
>

> align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents  
>

[2e4ba91b7f5e41b794e4291d5ce5a262.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e76ecdcc0728446cbf092bacb5b14e2b.png
[8a089c3f9dbc4442800a062873385c18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a93c5ea1c27f425b898be53368619e79.png
[359d1f4e786e4c43ae3d3bfc71789aa5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8d9e1f1572454ff5a329d9f512c367c7.png
[3745ce08e4264546a1f08445db9bbdf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f446eb537c5a4dc0b160c7aaa646d931.png
[87ddb4fa485c4a7991687f62c896ea0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a5f8a985e16848b8aa509e1bb88637a2.png
[b0539594036b4f0f876d98ab158b2e69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/bcb3c37d7d244e0285ef86f060f82059.png
[661d15e83ddd4df7960a28d256d0174c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/11310eb5812c4a849595c4b873ed0109.png
[5ba3df37b3fe442c83c79a8712644a9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f894568a7e3b40209c9021b365fdbff0.png
[f335c17268e142b4986eeb4064ee95fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/2c4513d78bca4acf9d9f8f01afc2b567.png
[1d8735607dea4ff0ac13535304c8c884.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e97d86baa8cb45f58594e55cddfc5286.png
[61db2ff6ec5144ebbf3161427c33cc9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/44463d44ef5d4d0b9184997af676b4d3.png
[78b07f0eaaba42efbbd262a0f88eaf1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/3048b27e0dfc40d4a214a173741ba3f1.png
[d6cf590a79c84ed68f5e87e005bea4d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8243e497e07647238e2efd3ff8c5feec.png
[77b19382e0d842e4a0d4bb9a21fa2998.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9e9ec2a561584cb88f0911f0f23f6fc0.png
[46135a6f5fd342059b1c72675da33445.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/866deb81dfef40c9955355252fb125f4.png
[6b226c14100b4e8dbd85c173e428b624.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9ff8fecaf551417381966e1543f83f10.png
[8169d4be1737495b8dcf5a3dd9ee863f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/eab06c7340a24798a8f3bf9522022c39.png
[d35dae1742e94dca95516ee4760ab426.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/05ccdd02417f4007a9aa03307bc7aaff.png
[fab39690f14f49159dca388647d46e10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/3ee6672b5f004d96942ef6961bef70dc.png
[5c54367074aa4a1f94ddc38aea476236.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/867928373b9144d9a05ee7d787aa0e1e.png
[c8c2d8735e8e4b928c83cb703b0d53ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b653a8ca48c54fab8b5c9c087a3cc750.png
[3c3b3aed9b0f483a841657b73cfe77cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0b90bd3c35274c7db7501750b27e53f5.png
[2b054d1aeb9349dda02396a60a70a4d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8f6ccf626eab41d58f914dd6c6a6bd94.png
[637590b4ceb1435d974299143e3d4510.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/53ec3c495d914d1cb2fd3341ff390e0f.png
[90b21802268843aba12e617eddffd86c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1f6f3122dada43fe9908f271bf932bc3.png
[324de40803544cccabc6adc10acbbe54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0728496f5e5049e2850c40bc1c58374d.png
[288dfdeb9bb34bc1bba971546723e5f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/34802e1bea0b445090b38442e94c3c69.png
[a11928ca01ce481081a41540bb51f4fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ca1ab6a59f6f488cae0226243c3b741a.png
[6edc1d98751c414d99ab13c530c59846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6363689966be4fd887049ba2ae464300.png
[2e065ef21b374e8591f2cff56d471f0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/23ea9aaa61684c22a4d04ff3f1888c3f.png
[327615d4302f41b2931c1f947381f572.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d4ef219789d9403c80a9b67fc71bad8b.png
[cb3c522625fd4483a8dab06820537ed9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/634aa2e8b14b43c3bcc73ad8e6bef766.png
[e0f585155c5f468f92c7ccdf4a31e564.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/fc7d3f5ec63147dd8602c17ad90f60d6.png
[a3251e4b950d4fd0a247c30268b21785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0b5996e1c2f04dd896a53438ec817aa3.png
[10ab501782474034ae6aba5c75185198.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b4ce5301fd1942468bf41fb964f0c4f1.png
[6baf1bb919d149909238c6653ca30781.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c61ecff7b353483a96c17609cdc7c6fd.png
[73089bbb9a534ad0a5f4811404418375.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d55ca45d52604f2c98a931db63c3b864.png
[8bfda80a79544843a9f04e2fde4fd37e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/66c4908334614dacabd58758afc4b667.png