CSS之常用属性、元素的显示模式、盒模型_用什么属性定义元素的显示模式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61061381/article/details/126826256

一、字体属性

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

设置字体

设置大小和粗细

二、文本属性

文本颜色

认识 RGB

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

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

文本对齐

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

文本缩进

行高

三、背景属性

二、元素的显示模式

🍑块级元素

<!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>

🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟🐟

🍑行内元素与内联元素

🌰 l栗子

一个有关的前端面试题

🍑元素的显示模式

栗子

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

三、盒模型

🍎总述

每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成

边框 border
内容 content
内边距 padding
外边距 marg

先来张图

🍎边框

基础属性

粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: 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>
    <!-- witdth粗细，border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框，颜色: border-color -->
    <style>
        .test {
            width: 200px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: brown;
        }
    </style>
</head>
<body>
    <div class="test">
        这是一个块级元素
    </div>


</body>
</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>Document</title>
    <!-- border-witdth粗细，border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框，颜色: border-color -->
    <!-- 通过通配符选择器，我们就可以使我们所有的盒子都不被边框撑大 -->
    <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(主轴)