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

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

一、字体属性

二、文本属性

三、背景属性

二、元素的显示模式

🍑块级元素

🍑行内元素与内联元素

🍑元素的显示模式

三、盒模型

🍎总述

🍎边框

🍎内边距

🍎外边距

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

设置大小和粗细

二、文本属性

文本颜色

认识 RGB

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

文本对齐

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

文本缩进

行高

三、背景属性

二、元素的显示模式

🍑块级元素
```
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>Documenttitle>
    
    <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>
```
🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟

🍑行内元素与内联元素

🌰 l栗子

一个有关的前端面试题

🍑元素的显示模式

栗子

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

三、盒模型

🍎总述
每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 marg
先来张图

🍎边框
基础属性
1. 粗细: border-width
2. 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
3. 颜色: border-color
🌰一个边框的代码栗子
```
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>Documenttitle>
    
    <style>
        .test {
            width: 200px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: brown;
        }
    style>
head>
<body>
    <div class="test">
        这是一个块级元素
    div>
 
 
body>
html>
```
效果展示

🌰再看一个栗子
```
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>Documenttitle>
    
    
    <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>
```
注意，通常情况下，我们设置的width和height是指的内容的大小，而一个盒子有了边框后，默认情况下我们的盒子会被撑大

但如果你设置了border-box，让盒子不再撑大。这时width和height指的就是整体盒子的大小，相当于内容大小就被缩水了。

🍎内边距
padding 设置内容和边框之间的距离.

基础写法

默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
- padding-top
- padding-bottom
- padding-left
- padding-right
🌰栗子

一点补充：复合写法
可以把多个方向的 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
🍎块级元素居中

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

🍎去除浏览器默认样式

四、弹性布局

📝初体验

使用前

使用后

进一步的使用

📝flex 布局基本概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

基础概念:
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

📝 实现元素的居中

📝注意

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

align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
相关阅读:
70行代码撸一个桌面自动翻译神器
 Django 自定义用户 VS 用户资料
 Mybatis中的动态SQL
Java synchronized锁 String 和 Integer 会有什么问题?
年薪30W，BAT抢着要，懂面试技巧的测试人究竟多吃香？
SpringBoot整合RabbitMQ图文过程以及RabbitTemplate常用API介绍
 MySQL使用C语言链接
 ★【删除二叉搜索数节点】【递归】Leetcode 450. 删除二叉搜索树中的节点
 硬核，腾讯内部整理的面向开发人员代码安全指南，适合所有程序员
 服务器的初始化
原文地址：https://blog.csdn.net/weixin_61061381/article/details/126826256

一、字体属性

二、文本属性

三、背景属性

二、元素的显示模式

🍑块级元素

🍑行内元素与内联元素

🍑元素的显示模式

三、盒模型

🍎总述

🍎边框

🍎内边距

🍎外边距

🍎块级元素居中

🍎去除浏览器默认样式

四、弹性布局

📝初体验

📝flex 布局基本概念

📝 实现元素的居中

📝注意