CSS - 常用属性和布局方式

待我称王封你为后i 2024-02-21 11:39 13阅读 0赞

**目录**

前言

一、常用属性

1.1、字体相关

1.2、文本相关

1.3、背景相关

1.3.1、背景颜色

1.3.2、背景图片

1.4、圆角边框

二、常用布局相关

2.1、display

2.2、盒子模型

2.2.1、基本概念

2.2.2、border 边框

2.2.3、padding 内边距

2.2.4、margin 外边距

2.3、弹性布局

2.4、实际开发常用小技巧

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

## 前言 ##

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

这里推荐一个 CSS 属性网站，里面的样式很全，忘记了也可以在这里查~

[CSS 参考手册][CSS]

## 一、常用属性 ##

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

### 1.1、字体相关 ###

.one {
                /* 字体家族: 默认是微软雅黑 */
                font-family: "宋体";
                /* 字体大小 */
                font-size: 100px;
                /* 字体粗细 */
                font-weight: 900;
                /* 设置字体倾斜*/
                font-style: italic;
            }

例如 hello ，效果如下

![60f01d4adfdf44d0a7af2a07c9225ccd.png][]

### 1.2、文本相关 ###

/* 文本相关 */
            .two {
                font-size: 100px;
                color: red;
                /* 文本对齐: left左对齐、right右对齐、center居中对齐 */
                text-align: center;
                /* 文本装饰：underline下划线、none去除下划线(a 标签) */
                text-decoration: underline;
                /* 文本缩进 */
                text-indent: 20px;
                /* 行高(行间距) */
                line-height: 100px;
            }

例如 world ，效果如下：

![d2e6154930864a3da1ce4c9b976711ea.png][]

### 1.3、背景相关 ###

#### 1.3.1、背景颜色 ####

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

![a971f6da362a4e3eb03ccc8d3368341c.png][]

#### 1.3.2、背景图片 ####

a）通过 background-image 来设置一个背景图片

.one {
                width: 2000px;
                height: 2000px;
                background-color: grey;
                background-image: url(img/logo.png);
            }

> Ps：background: rgba(0, 0, 0, 0.2); 中前三个是三原色调色，最后一个是半透明程度

例如一个小鸭子图标，使用 background-image 设置背景图片，默认都是 “平铺” ，就类似于铺地砖一样，效果如下：

![66889ae095a24d93885424a351cf6c83.png][]

b）可以使用 background-repeat 来禁止平铺，如下：

.one {
                width: 2000px;
                height: 2000px;
                background-color: grey;
                /* 背景图片 */
                background-image: url(img/logo.png);
                /* 禁止平铺 */
                background-repeat: no-repeat;
            }

![8d0474d134d94f7884aa8ce580e58ad6.png][]

c）可以 backgroud-position 来设置背景图的位置

![a9a864d8b8624fec91f372a297170121.png][]

d）设置背景图的大小

.one {
                width: 2000px;
                height: 2000px;
                background-color: grey;
                /* 背景图片 */
                background-image: url(img/logo.png);
                /* 禁止平铺 */
                background-repeat: no-repeat;
                /* 设置位置 */
                background-position: center center;
                /* contain 表示保证图片原有比例的情况下填满容器，cover 表示一定填满容器（忽略比例）
    ，当然也可以自己手动指定宽高 */
                /* background-size: contain; */
                background-size: 2000px 2000px;
            }

![1da2fdf0a800469c9d2813d4c3afc7b0.png][]

### 1.4、圆角边框 ###

a）通过 border-radius 可以设置圆角矩形（值为内切圆半径）

.one {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                border-radius: 30px;
            }

![cfb2c9b5f3844a66a5ba112031643d07.png][]

b）如果是一个正方形，并且 border-radius 的值刚好是边长的一般，此时就得到了正圆形（头像一般都是这么设置的）.

.one {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                border-radius: 150px;
            }

![47e2b74a48e847cdbf9c6046cb8bd949.png][]

## 二、常用布局相关 ##

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

### 2.1、display ###

*  块级元素： display: block;
 *  行级元素：display: inline;
 *  隐藏元素：display: none;

每个 html 元素都会有默认的 display 属性，例如 h1 ~ h6、p、div、ul、ol、li、table...... 默认都是 block 块级元素. 而 a 、span、img 默认都是 inline 行级元素.

区别有很多，主要是以下两个方面：

1.  块级元素默认独占一行，行内元素默认不独占一行
2.  块级元素可以设置尺寸（width、height），行内元素则不能.

> Ps：因此在实际的开发中，我们经常会把行内元素（比如 span），通过 display: block 改成块级元素.

### 2.2、盒子模型 ###

#### 2.2.1、基本概念 ####

一个 HTML 元素，就是一个矩形的盒子，组成如下：

![f5e08ca2b51a4d39928e7df3d1a090ac.png][]

> Ps：这些属性只有块级元素设置才生效

*  margin：外边距. 可以想象成每个房子（盒子）之间的距离.
 *  border：边框. 可以想象成房子的墙壁.
 *  padding：内边距. 可以想象成墙壁和内部家具（content）的距离.

#### 2.2.2、border 边框 ####

a）border：边框. 可以想象成房子的墙壁.

![e081c73f01c3443abdfa0484c5c9b5a7.png][]

b）边框也可以分开设置

.one {
                width: 400px;
                height: 500px;
                background-color: grey;
                /* red边框颜色、20px边框粗细、solid边框为实线 */
                /* border: red 20px solid; */
                /* 边框也可以分开设置 */
                border-left: red 20px solid;
                border-right: green 20px dotted;
                border-top: blue 20px dashed;
                border-bottom: orange 20px solid;
            }

![7cb6fa911e0843268730863f49a43040.png][]

> 边框使用注意事项：

设置了边框粗细以后，虽然给 div 设置的尺寸例如是 500\*400，但实际上可能却变成了 540\* 340，这是因为边框把元素给撑大了！

在实际的开发中，一般不希望见到这种情况，因此可以使用 box-sizing:border-box 属性来避免此情况.

一般会对所有元素都进行如下设置：

* {
                box-sizing: border-box;
            }

#### 2.2.3、padding 内边距 ####

a）内边距，就是元素和边框的距离，可以想象成墙壁和内部家具的距离.

.one {
                width: 400px;
                height: 500px;
                background-color: grey;
                border: red 20px solid;
                padding: 30px;
            }

![aa0ecbed0caa451eac2b3b740a3d3acd.png][]

b）也可以设置给四个方向分别设置

.one {
                width: 400px;
                height: 500px;
                background-color: grey;
                border: red 20px solid;
                /* padding: 30px; */
                /* 可以分别给四个方向设置 */
                /* padding-left: 20px; */
                /* 给上下设置 30px，左右设置 20px */
                /* padding: 30px 20px; */
                /* 给四个方向分别设置，顺序是 上右下左 顺时针顺序设置 */
                padding: 10px 20px 30px 40px;
            }

#### 2.2.4、margin 外边距 ####

外边距：可以想象成每个房子（盒子）之间的距离，用法和 padding 基本一样

这里讲一个特殊用法：把 margin 左右方向设置为 auto ，可以实现元素水平居中的效果（前提是块级元素，并且有设置 width），但是垂直方向设置为 auto，则不能垂直居中.

.one {
                width: 400px;
                height: 500px;
                background-color: grey;
                margin: 100px auto;
            }

![87e453d4a38545db87ac9b27b3f74c37.png][]

### 2.3、弹性布局 ###

前面讲到，块级元素默认是独占一行的（垂直方向排列的），有时又想让块级元素能够水平方向排列，就可以使用弹性布局了.

> Ps：行内元素虽然也是水平排列，但是不能设置尺寸.

这里我们只需要知道最基础的三个属性即可.

1.开启弹性布局：display: flex ，某个元素一旦开始了弹性布局，**此时内部的子元素（子元素里的子元素不受影响）**，就会按照水平方向排列.

2.水平方向排列规则：通过 justify-content 属性进行设置.

例如有以下元素

<div class="one">
            <div class="two">0</div>
            <div class="two">2</div>
            <div class="two">3</div>
            <div class="two">4</div>
            <div class="two">5</div>
        </div>
    
        <style>
            .two {
                width: 100px;
                height: 100px;
                background-color: greenyellow;
                border: red 3px solid;
            }
        </style>

justify-content: center居中排列：

![4c82cdc4468e4c3b90374ec3cdea343c.png][]

justify-content: left靠左：

![187710823c2a40d598a6cb09177ee259.png][]

justify-content: right靠右：

![2f0e6fc7c8e649f7b707cfbdae25201a.png][]

justify-content: space-around 分散排列（不占据两边）：

![31d04535bd2f492fa7b7a8d5b8159046.png][]

justify-content: space-between（占据两边）：

![a4732496b87b43928a610a27ba810f3d.png][]

justify-content: space-evenly（全部均分，包括左右）：

![f165872d9ce5440b9a040ce680a3adac.png][]

> Ps：一般最常用的就是 space-around

3. align-items：设置垂直方向排列，这个一般就用 center 就可以.

.one {
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

### 2.4、实际开发常用小技巧 ###

> Ps：如果全局全局属性是 Vue-cli 的工程，那么就在 App.vue 中的 style 添加即可

a）一般在开始写项目的 css 样式时，会先进行以下操作，防止一些干扰.

* {
        /* 防止边框将元素撑大 */
        box-sizing: border-box;
        /* 去除浏览器默认样式 */
        padding: 0;
        margin: 0;
    }

b）为了让背景图片能铺满整个屏幕，需要给 body 和 html 标签设置自适应高度（随着浏览器的缩放而缩放）

html {
        height: 100%;
    }
    
    body {
        height: 100%;
    }

height: 100% 就表示高度和父元素一样高.

**解释：**由于 body 的父元素时 html，而 html 元素的父元素是浏览器窗口，这里设置 100%，就是让 html 元素和浏览器一样高，再让 body 和 html 一样搞，此时 body 就和浏览器窗口一样高了.

c）版心高度设置：我们在做完导航栏以后，接下来版心的高度该如何设置呢？在 CSS 3 中新出了一个语法 height: calc(100% - 50px); 通过他就可以实现.

1.  第一个参数：写100% 就表示父元素的高度.
2.  第二个参数：50px 就是指导航栏的高度（根据实际情况而定）.

> 注意：减号两侧必须要加空格.

![c6d7b2c0c265490a99e5195453b1c9f0.gif][]

[CSS]: https://www.w3school.com.cn/cssref/index.asp
[60f01d4adfdf44d0a7af2a07c9225ccd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/f17ac2a9372a408ba856fbf30e98e360.png
[d2e6154930864a3da1ce4c9b976711ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/62e6c0a7929949f993d69e21d8679088.png
[a971f6da362a4e3eb03ccc8d3368341c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b48ae98d5f62447dbd80d6426513ff40.png
[66889ae095a24d93885424a351cf6c83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e5ed5c8170304bc98fdf765365e9bd72.png
[8d0474d134d94f7884aa8ce580e58ad6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/5760e96078bc4e8699e62e78aed6effb.png
[a9a864d8b8624fec91f372a297170121.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0661927b3021475b8a388785146fc0db.png
[1da2fdf0a800469c9d2813d4c3afc7b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/49bb14aa1da74f37b5be0e22c3aff2be.png
[cfb2c9b5f3844a66a5ba112031643d07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/ce04cdff1bb648b395626f7fb0305a34.png
[47e2b74a48e847cdbf9c6046cb8bd949.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/66d7886ed26147c8a9b265905ca12ef5.png
[f5e08ca2b51a4d39928e7df3d1a090ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/cefcbb6ea6ac47a99953eee2b6a8aaaa.png
[e081c73f01c3443abdfa0484c5c9b5a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/a54ce41d8a8043248e2b3a2deaa6b446.png
[7cb6fa911e0843268730863f49a43040.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/eb974edc1db045cba0a88104ded89d56.png
[aa0ecbed0caa451eac2b3b740a3d3acd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/4bd02a3853f54551ad7f29026e8f024c.png
[87e453d4a38545db87ac9b27b3f74c37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e5608b0e992f49719ea4dc6f4ab1ae06.png
[4c82cdc4468e4c3b90374ec3cdea343c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e408e551db574cfbb30f461a8753a7f8.png
[187710823c2a40d598a6cb09177ee259.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/9d822f876f6c489bb0d655377c48664a.png
[2f0e6fc7c8e649f7b707cfbdae25201a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/eb1005f084a340aaa406b23db37aa6f3.png
[31d04535bd2f492fa7b7a8d5b8159046.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/defd5cc5a7bb4d1b808f0736c8da2e6f.png
[a4732496b87b43928a610a27ba810f3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/4dd23913a3fb486ebfaf21c523ec942a.png
[f165872d9ce5440b9a040ce680a3adac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/101ec0ab61704bf28f578efc4306a44d.png
[c6d7b2c0c265490a99e5195453b1c9f0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c7a564a5d56c43bfa6d3b39852fc9097.png