今日CSS笔记 选择器-＞弹性容器

原手写笔记

-------------------------------------------------------------------------------------------------------
css选择器的种类有很多种。这里只介绍几种常用的选择器。
1. 标签选择器
    标签选择器是最基本的选择器，它可以选择所有的标签。
    例如：
    p {
        color: red;
    }
    这个选择器可以选择所有的p标签。
    标签选择器的优先级为1。
    标签选择器的优先级为1。
    <p></p>
2. 类选择器
    类选择器是通过class属性来选择元素的。
    例如：
    .red {
        color: red;
    }
    这个选择器可以选择所有的class属性为red的元素。
    类选择器的优先级为10。
    类选择器的优先级为10。
    可以这样来调用
    <div class = "red">
        <p>hello world!</p>
    </div>
3. id选择器
    id选择器是通过id属性来选择元素的。
    例如：
    #red {
        color: red;
    }
    这个选择器可以选择所有的id属性为red的元素。
    id选择器的优先级为100。
    id选择器的优先级为100。
    id选择器只能被调用一次。
    可以这样来调用
    <div id = "red">
        <p>hello world!</p>
    </div>
4. 通配符选择器
    通配符选择器是通过*来选择元素的。
    例如：
    * {
        color: red;
    }
    这个选择器可以选择所有的元素。
    通配符选择器的优先级为0。
    通配符选择器的优先级为0。
    通配符选择器只能被调用一次。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
5. 后代选择器
    后代选择器是通过空格来选择元素的。
    例如：
    div p {
        color: red;
    }
    这个选择器可以选择所有的p标签,但是前提是p标签是div标签的后代。
    后代选择器的优先级为10。
    后代选择器的优先级为10。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
    <p>hello world!</p>
6. 子选择器
    子选择器是通过>来选择元素的。
    例如：
    div > p {
        color: red;
    }
    这个选择器可以选择所有的p标签,但是前提是p标签是div标签的子元素。
    子选择器的优先级为10。
    子选择器的优先级为10。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
    <p>hello world!</p>
7. 相邻选择器
    相邻选择器是通过+来选择元素的。
    例如：
    div + p {
        color: red;
    }
    这个选择器可以选择所有的p标签,但是前提是p标签是div标签的相邻元素。
    相邻选择器的优先级为10。
    相邻选择器的优先级为10。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
    <p>hello world!</p>
8. 属性选择器
    属性选择器是通过[]来选择元素的。
    例如：
    [href] {
        color: red;
    }
    这个选择器可以选择所有的href属性的元素。
    属性选择器的优先级为10。
    属性选择器的优先级为10。
    可以这样来调用
    <div href = "https://blog.csdn.net/W2799401288?type=blog"></div>
9. 伪类选择器
    伪类选择器是通过:来选择元素的。
    例如：
    a:hover {
        color: red;
    }
    这个选择器可以选择所有的a标签,但是前提是鼠标悬停在a标签上。
    伪类选择器的优先级为10。
    伪类选择器的优先级为10。
    可以这样来调用
    <a href = "URL_ADDRESS    <a href = "https://blog.csdn.net/W2799401288?type=blog">hello world!</a>
    <a href = "URL_ADDRESS">hello world!</a>
10. 伪元素选择器
    伪元素选择器是通过::来选择元素的。
    例如：
    p::first-letter {
        color: red;
    }
    这个选择器可以选择所有的p标签的第一个字母。
    伪元素选择器的优先级为10。
    伪元素选择器的优先级为10。
    可以这样来调用
    <p>hello world!</p>
    <p>hello world!</p>
11. 选择器的优先级
    选择器的优先级是指选择器的权重。
    选择器的优先级是由选择器的种类和数量来决定的。
12. 选择器的组合
    选择器的组合是指选择器的种类和数量的组合。
    例如：
    div p {
        color: red;
    }
    这个选择器可以选择所有的p标签,但是前提是p标签是div标签的后代。
    选择器的组合的优先级是由选择器的种类和数量来决定的。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
13. 选择器的继承
    选择器的继承是指选择器的种类和数量的继承。
    例如：
    div p {
        color: red;
    }
    这个选择器可以选择所有的p标签,但是前提是p标签是div标签的后代。
    选择器的继承的优先级是由选择器的种类和数量来决定的。
    可以这样来调用
    <div>
        <p>hello world!</p>
    </div>
    -------------------------------------------------------------------------------------------------------

背景图片的设置  以<div></div>为容器为例
background-image: url("图片路径");//设置背景图片的路径
background-repeat: no-repeat;//设置背景图片的重复方式,默认是repeat,即重复
background-position: right top;//设置背景图片的位置,默认是left top,即左上角
background-attachment: fixed;//设置背景图片的滚动方式,默认是scroll,即滚动
background-color: #4682B4;//设置背景图片的颜色,默认是transparent,即透明
background: #4682B4 url("图片路径") no-repeat right top;//设置背景图片的颜色,重复方式,位置,滚动方式
background-size: 100% 100%;//设置背景图片的大小,默认是auto,即自动
background-size: cover;//设置背景图片的大小,即覆盖整个元素
background-size: contain;//设置背景图片的大小,即包含整个元素
background-size: 100px 100px;//设置背景图片的大小,即指定宽度和高度
background-size: 100% auto;//设置背景图片的大小,即指定宽度和高度,高度为auto,即自动
background-size: auto 100%;//设置背景图片的大小,即指定宽度和高度,宽度为auto,即自动

div {
    width: 1000px;
    height: 1000px;
    background-image: url("../image/douyin.png");
    background-repeat: no-repeat;
    background-size: 100%;//设置背景图片的大小,即覆盖整个父元素
    backgroune-size的参数也可以是cover,在不改变原图片比例的情况下，即尽可能覆盖整个父元素。
    background-position center;//设置背景图片的位置,即居中，可以决定图片渲染的位置。定位图片左上角渲染的位置。
    position 的参数也可以是top,bottom,left,right,即相对于父元素的位置。包括下方方位
    left top 
    left cebter
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom
    或者是百分比，即相对于父元素的位置。
    例如：
    background-position: 50% 50%;//设置背景图片的位置,即居中
    background-position: 50% 0%;//设置背景图片的位置,即顶部
-------------------------------------------------------------------------------------------------------
}
关于文本属性
-------------------------------------------------------------------------------------------------------
文本的垂直对齐方式
vertical-align: baseline;//设置文本的垂直对齐方式,即基线
vertical-align: sub;//设置文本的垂直对齐方式,即下标
vertical-align: super;//设置文本的垂直对齐方式,即上标
vertical-align: text-top;//设置文本的垂直对齐方式,即文本顶部
vertical-align: text-bottom;//设置文本的垂直对齐方式,即文本底部
vertical-align: middle;//设置文本的垂直对齐方式,即中间
vertical-align: top;//设置文本的垂直对齐方式,即顶部
vertical-align: bottom;//设置文本的垂直对齐方式,即底部
vertical-align: initial;//设置文本的垂直对齐方式,即初始值
vertical-align: inherit;//设置文本的垂直对齐方式,即继承
-------------------------------------------------------------------------------------------------------
文本对齐方式
text-align: center;//设置文本的对齐方式,即居中
text-align: left;//设置文本的对齐方式,即左对齐
text-align: right;//设置文本的对齐方式,即右对齐
text-align: justify;//设置文本的对齐方式,即两端对齐
-------------------------------------------------------------------------------------------------------
文本首行缩进
text-indent: 2em;//设置文本的缩进,即2个字符的缩进
text-indent: 20px;//设置文本的缩进,即20像素的缩进
text-indent: 20%;//设置文本的缩进,即20%的缩进
-------------------------------------------------------------------------------------------------------
文本划线
text-decoration: underline;//设置文本的下划线,即下划线
text-decoration: overline;//设置文本的上划线,即上划线
text-decoration: line-through;//设置文本的删除线,即删除线
text-decoration: none;//无
-------------------------------------------------------------------------------------------------------
文本大小写
text-transform: uppercase;//设置文本的大写,即大写
text-transform: lowercase;//设置文本的小写,即小写
text-transform: capitalize;//设置文本的首字母大写,即首字母大写
text-transform: none;//无
-------------------------------------------------------------------------------------------------------
文本行高
line-height: 1.5;//设置行高,即1.5倍
line-height: 1.5em;//设置行高,即1.5倍
line-height: 1.5px;//设置行高,即1.5像素
line-height: 1.5%;//设置行高,即1.5%
-------------------------------------------------------------------------------------------------------
关于字体属性
font-family: Arial, Helvetica, sans-serif;//设置字体,即Arial,Helvetica,sans-serif
font-size: 16px;//设置字体大小,即16像素
font-size: 16em;//设置字体大小,即16倍
font-size: 16%;//设置字体大小,即16%
font-weight: bold;//设置字体粗细,即加粗
font-weight: normal;//设置字体粗细,即正常
font-weight: 100;//设置字体粗细,即100
-------------------------------------------------------------------------------------------------------
边框样式
border: 1px solid black;//设置边框,即1像素实线黑色
border: 1px dotted black;//设置边框,即1像素点线黑色
border: 1px dashed black;//设置边框,即1像素虚线黑色
border: 1px double black;//设置边框,即1像素双实线黑色
border: 1px groove black;//设置边框,即1像素沟槽黑色
border: 1px ridge black;//设置边框,即1像素脊线黑色
border: 1px inset black;//设置边框,即1像素内凹黑色
border: 1px outset black;//设置边框,即1像素外凸黑色
border: 1px none black;//设置边框,即无边框
border: 1px hidden black;//设置边框,即隐藏边框
-------------------------------------------------------------------------------------------------------
将双边框折叠成一条边框
border-collape : collapse;//设置边框折叠,即折叠
border-collape : separate;//设置边框折叠,即不折叠
border-collape : initial;//设置边框折叠,即初始值
border-collape : inherit;//设置边框折叠,即继承
-------------------------------------------------------------------------------------------------------
边框颜色
border-color: red;//设置边框颜色,即红色
border-color: #FF0000;//设置边框颜色,即红色
border-color: rgb(255, 0, 0);//设置边框颜色,即红色
border-color: rgba(255, 0, 0, 0.5);//设置边框颜色,即红色
也可以针对某个方向
border-top-color: red;//设置上边边框颜色,即红色
border-right-color: red;//设置右边边框颜色,即红色
border-bottom-color: red;//设置下边边框颜色,即红色
border-left-color: red;//设置左边边框颜色,即红色
或者省略写法
border-color: red red red red;//设置上边,右边,下边,左边边框颜色,即红色
border-color: red red red;//设置上边,右边,下边边框颜色,即红色
border-color: red red;//设置上边,下边边框颜色,即红色
border-color: red;//设置上边,右边,下边,左边边框颜色,即红色
-------------------------------------------------------------------------------------------------------
边框宽度
border-width: 1px;//设置边框宽度,即1像素
border-width: 1em;//设置边框宽度,即1倍
border-width: 1%;//设置边框宽度,即1%
也可以针对某个方向
border-top-width: 1px;//设置上边边框宽度,即1像素
border-right-width: 1px;//设置右边边框宽度,即1像素
border-bottom-width: 1px;//设置下边边框宽度,即1像素
border-left-width: 1px;//设置左边边框宽度,即1像素
或者省略写法
border-width: 1px 1px 1px 1px;//设置上边,右边,下边,左边边框宽度,即1像素
border-width: 1px 1px 1px;//设置上边,右边,下边边框宽度,即1像素
border-width: 1px 1px;//设置上边,下边边框宽度,即1像素
-------------------------------------------------------------------------------------------------------
边框内边距
padding: 10px;//设置内边距,即10像素
padding: 10em;//设置内边距,即10倍
padding: 10%;//设置内边距,即10%
也可以针对某个方向
padding-top: 10px;//设置上边距,即10像素
padding-right: 10px;//设置右边距,即10像素
padding-bottom: 10px;//设置下边距,即10像素
padding-left: 10px;//设置左边距,即10像素
或者省略写法
padding: 10px 10px 10px 10px;//设置上边距,右边距,下边距,左边距,即10像素
padding: 10px 10px 10px;//设置上边距,右边距,下边距,即10像素
padding: 10px 10px;//设置上边距,下边距,即10像素
padding: 10px;//设置上边距,右边距,下边距,左边距,即10像素
-------------------------------------------------------------------------------------------------------
边框外边距
margin: 10px;//设置外边距,即10像素
margin: 10em;//设置外边距,即10倍
margin: 10%;//设置外边距,即10%
也可以针对某个方向
margin-top: 10px;//设置上边距,即10像素
margin-right: 10px;//设置右边距,即10像素
margin-bottom: 10px;//设置下边距,即10像素
margin-left: 10px;//设置左边距,即10像素
或者省略写法
margin: 10px 10px 10px 10px;//设置上边距,右边距,下边距,左边距,即10像素
margin: 10px 10px 10px;//设置上边距,右边距,下边距,即10像素
margin: 10px 10px;//设置上边距,下边距,即10像素
margin: 10px;//设置上边距,右边距,下边距,左边距,即10像素
-------------------------------------------------------------------------------------------------------
边框圆角
border-radius: 10px;//设置圆角,即10像素
border-radius: 10em;//设置圆角,即10倍
border-radius: 10%;//设置圆角,即10%
也可以针对某个方向
border-top-left-radius: 10px;//设置左上圆角,即10像素
border-top-right-radius: 10px;//设置右上圆角,即10像素
border-bottom-left-radius: 10px;//设置左下圆角,即10像素
border-bottom-right-radius: 10px;//设置右下圆角,即10像素
或者省略写法
border-radius: 10px 10px 10px 10px;//设置左上圆角,右上圆角,右下圆角,左下圆角,即10像素
border-radius: 10px 10px 10px;//设置左上圆角,右上圆角,右下圆角,即10像素
border-radius: 10px 10px;//设置左上圆角,右下圆角,即10像素
border-radius: 10px;//设置左上圆角,右上圆角,左下圆角,右下圆角,即10像素
-------------------------------------------------------------------------------------------------------
边框阴影
box-shadow: 10px 10px 5px #888888;//设置阴影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 inset;//设置阴影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 outset;//设置阴影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px;//设置阴影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px 10px;//设置阴影,即10像素10像素5像素888888
box-shadow: 10px 10px 5px #888888 10px 10px 10px;//设置阴影,即10像素10像素5像素888888
-------------------------------------------------------------------------------------------------------
CSS盒子模型
CSS盒子模型是指元素的内容、内边距、边框和外边距所组成的盒子。
CSS盒子模型的内容是指元素的文本或图像。
CSS盒子模型的内边距是指元素的内容与边框之间的空间。
CSS盒子模型的边框是指元素的内边距与外边距之间的空间。
CSS盒子模型的外边距是指元素与其他元素之间的空间。
CSS盒子模型的宽度是指元素的内容、内边距和边框的宽度之和。
CSS盒子模型的高度是指元素的内容、内边距和边框的高度之和。
CSS盒子模型的宽度和高度可以通过width和height属性来设置。
-------------------------------------------------------------------------------------------------------
CSS3弹性盒子内容
CSS3弹性盒子由display属性和flex属性组成。
display属性用于指定元素的显示方式。
flex属性用于指定元素的弹性布局方式。
弹性容器内包含了一个或多个弹性子元素。
弹性盒子只改变弹性布局，不改变渲染方式。
给盒子display:flex;后，盒子就变成了弹性盒子。
-------------------------------------------------------------------------------------------------------
CSS3弹性盒子的属性
flex-direction属性用于指定弹性子元素的排列方向。
排列方向有四种：
row:从左到右排列
row-reverse:从右到左排列
column:从上到下排列
column-reverse:从下到上排列 这两个垂直方向的排列方向是最常用的
-------------------------------------------------------------------------------------------------------
flex-wrap属性用于指定弹性子元素的换行方式。
换行方式有两种：
nowrap:不换行
wrap:换行
-------------------------------------------------------------------------------------------------------
justify-content属性用于指定弹性子元素在主轴上的对齐方式。
对齐方式有五种：
flex-start:从主轴起点开始
flex-end:从主轴终点开始
center:居中
space-between:两端对齐
space-around:每个子元素两侧的间隔相等
-------------------------------------------------------------------------------------------------------
指定justify-content和align-items的center之后实现上下左右都居中。
-------------------------------------------------------------------------------------------------------
align-items属性用于指定弹性子元素在交叉轴上的对齐方式。
对齐方式有五种：
flex-start:从交叉轴起点开始
flex-end:从交叉轴终点开始
center:居中
baseline:基线对齐
stretch:拉伸
-------------------------------------------------------------------------------------------------------
上述的弹性内容都是针对弹性容器（父元素）的，而不是针对弹性子元素的。
-------------------------------------------------------------------------------------------------------
flex-grow
flex-grow属性用于指定弹性子元素的放大比例。
放大比例默认为,即如果存在剩余空间，也不放大。
如果所有子元素的flex-grow属性都为1,则它们将等分剩余空间（如果有的话）。
如果一个子元素的flex-grow属性为2,其他子元素的flex-grow属性都为1,则前者占据的剩余空间将比其他子元素多一倍。
可以当成所占权重来理解。
分别为每个子元素设置flex-grow属性,可以让它们按照指定的比例来分配剩余空间。
box1{flex-grow:2} box2{flex-grow:1} box3{flex-grow:1} 则第一个盒子占50%,剩余两个分别占25%。
-------------------------------------------------------------------------------------------------------

将知识点优化分离

1. CSS 选择器

CSS 选择器的种类有很多种，这里介绍几种常用的选择器：

• 标签选择器：最基本的选择器，能选择所有相同标签的元素。例如 p { color: red; } 可以选择所有的 p 标签，其优先级为 1。

/* 标签选择器代码示例 */
p {
    color: red;
}

• 类选择器：通过 class 属性来选择元素。如 .red { color: red; } 可选择所有 class 属性为 red 的元素，优先级为 10。调用示例：<div class = "red"><p>hello world!</p></div>。

/* 类选择器代码示例 */
.red {
    color: red;
}

• id 选择器：依据 id 属性选择元素。像 #red { color: red; } 会选择所有 id 属性为 red 的元素，优先级为 100，且 id 选择器只能被调用一次。调用示例：<div id = "red"><p>hello world!</p></div>。

/* id选择器代码示例 */
#red {
    color: red;
}

• 通配符选择器：使用 * 来选择所有元素。例如 * { color: red; }，优先级为 0，只能被调用一次。调用示例：<div><p>hello world!</p></div>。

/* 通配符选择器代码示例 */
* {
    color: red;
}

• 后代选择器：通过空格来选择元素，如 div p { color: red; } 能选择所有作为 div 标签后代的 p 标签，优先级为 10。调用示例：<div><p>hello world!</p></div><p>hello world!</p>。

/* 后代选择器代码示例 */
div p {
    color: red;
}

• 子选择器：利用 > 选择元素，div > p { color: red; } 可选择所有作为 div 标签子元素的 p 标签，优先级为 10。调用示例：<div><p>hello world!</p></div><p>hello world!</p>。

/* 子选择器代码示例 */
div > p {
    color: red;
}

• 相邻选择器：借助 + 选择元素，div + p { color: red; } 会选择所有作为 div 标签相邻元素的 p 标签，优先级为 10。调用示例：<div><p>hello world!</p></div><p>hello world!</p>。

/* 相邻选择器代码示例 */
div + p {
    color: red;
}

• 属性选择器：通过 [] 来选择元素，[href] { color: red; } 能选择所有具有 href 属性的元素，优先级为 10。调用示例：<div href = "https://blog.csdn.net/W2799401288?type=blog"></div>。

/* 属性选择器代码示例 */
[href] {
    color: red;
}

• 伪类选择器：使用 : 来选择元素，a:hover { color: red; } 可选择所有鼠标悬停在上面的 a 标签，优先级为 10。调用示例：<a href = "https://blog.csdn.net/W2799401288?type=blog">hello world!</a>。

/* 伪类选择器代码示例 */
a:hover {
    color: red;
}

• 伪元素选择器：通过 :: 来选择元素，p::first-letter { color: red; } 会选择所有 p 标签的第一个字母，优先级为 10。调用示例：<p>hello world!</p>。

/* 伪元素选择器代码示例 */
p::first-letter {
    color: red;
}

• 选择器的优先级：选择器的优先级指的是选择器的权重，由选择器的种类和数量决定。

/* 选择器优先级示例，假设id选择器覆盖类选择器 */
#myId {
    color: blue; /* id选择器，优先级100 */
}
.myClass {
    color: red; /* 类选择器，优先级10 */
}

• 选择器的组合：即选择器的种类和数量的组合，如 div p { color: red; }，其优先级同样由选择器的种类和数量决定。调用示例：<div><p>hello world!</p></div>。

/* 选择器组合代码示例，后代选择器 */
div p {
    color: red;
}

• 选择器的继承：指选择器的种类和数量的继承，例如 div p { color: red; }，其优先级由选择器的种类和数量决定。调用示例：<div><p>hello world!</p></div>。

/* 选择器继承代码示例，假设p标签继承div的某些属性 */
div {
    font-family: Arial;
}
div p {
    color: red;
}

2. 背景图片的设置

以 <div></div> 为容器为例，相关属性有：

• background-image: url("图片路径");：设置背景图片的路径。
• background-repeat: no-repeat;：设置背景图片的重复方式，默认是 repeat（即重复）。
• background-position: right top;：设置背景图片的位置，默认是 left top（即左上角）。
• background-attachment: fixed;：设置背景图片的滚动方式，默认是 scroll（即滚动）。
• background-color: #4682B4;：设置背景图片的颜色，默认是 transparent（即透明）。
• background: #4682B4 url("图片路径") no-repeat right top;：可同时设置背景图片的颜色、重复方式、位置、滚动方式。
• background-size: 100% 100%;：设置背景图片的大小，默认是 auto（即自动）。还有 cover（覆盖整个元素）、contain（包含整个元素）等取值，也可以指定具体像素值如 100px 100px 或单方向 auto 如 100% auto、auto 100%。

/* 背景图片设置代码示例 */
div {
    width: 1000px;
    height: 1000px;
    background-image: url("../image/douyin.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-color: #f0f0f0;
    background-attachment: fixed;
}

3. 文本属性

• 文本的垂直对齐方式：
  • vertical-align: baseline;：设置文本的垂直对齐方式为基线。
  • vertical-align: sub;：设置为下标。
  • vertical-align: super;：设置为上标。
  • vertical-align: text-top;：设置为文本顶部。
  • vertical-align: text-bottom;：设置为文本底部。
  • vertical-align: middle;：设置为中间。
  • vertical-align: top;：设置为顶部。
  • vertical-align: bottom;：设置为底部。
  • vertical-align: initial;：设置为初始值。
  • vertical-align: inherit;：设置为继承。

/* 文本垂直对齐方式代码示例 */
p {
    vertical-align: middle;
    display: inline-block; /* 为了显示垂直对齐效果，设置为行内块元素 */
    height: 50px;
}

• 文本对齐方式：
  • text-align: center;：设置文本的对齐方式为居中。
  • text-align: left;：设置为左对齐。
  • text-align: right;：设置为右对齐。
  • text-align: justify;：设置为两端对齐。

/* 文本对齐方式代码示例 */
p {
    text-align: center;
}

• 文本首行缩进：
  • text-indent: 2em;：设置文本的缩进为 2 个字符的缩进。
  • text-indent: 20px;：设置为 20 像素的缩进。
  • text-indent: 20%;：设置为 20% 的缩进。

/* 文本首行缩进代码示例 */
p {
    text-indent: 2em;
}

• 文本划线：
  • text-decoration: underline;：设置文本的下划线。
  • text-decoration: overline;：设置文本的上划线。
  • text-decoration: line-through;：设置文本的删除线。
  • text-decoration: none;：无划线。

/* 文本划线代码示例 */
p {
    text-decoration: underline;
}

• 文本大小写：
  • text-transform: uppercase;：设置文本为大写。
  • text-transform: lowercase;：设置为小写。
  • text-transform: capitalize;：设置文本的首字母大写。
  • text-transform: none;：无变换。

/* 文本大小写代码示例 */
p {
    text-transform: capitalize;
}

• 文本行高：
  • line-height: 1.5;：设置行高为 1.5 倍。
  • line-height: 1.5em;：设置行高为 1.5 倍（相对于字体大小）。
  • line-height: 1.5px;：设置行高为 1.5 像素。
  • line-height: 1.5%;：设置行高为 1.5%（相对于父元素高度）。

/* 文本行高代码示例 */
p {
    line-height: 1.5;
}

4. 字体属性

• font-family: Arial, Helvetica, sans-serif;：设置字体为 Arial，若不可用则依次尝试 Helvetica、sans-serif。
• font-size: 16px;：设置字体大小为 16 像素。
• font-size: 16em;：设置字体大小为 16 倍（相对于父元素字体大小）。
• font-size: 16%;：设置字体大小为父元素字体大小的 16%。
• font-weight: bold;：设置字体粗细为加粗。
• font-weight: normal;：设置字体粗细为正常。
• font-weight: 100;：设置字体粗细为 100（取值范围 100-900）。

/* 字体属性代码示例 */
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

5. 边框样式

• border: 1px solid black;：设置边框为 1 像素实线黑色。
• border: 1px dotted black;：设置为 1 像素点线黑色。
• border: 1px dashed black;：设置为 1 像素虚线黑色。
• border: 1px double black;：设置为 1 像素双实线黑色。
• border: 1px groove black;：设置为 1 像素沟槽黑色。
• border: 1px ridge black;：设置为 1 像素脊线黑色。
• border: 1px inset black;：设置为 1 像素内凹黑色。
• border: 1px outset black;：设置为 1 像素外凸黑色。
• border: 1px none black;：设置为无边框。
• border: 1px hidden black;：设置为隐藏边框。

/* 边框样式代码示例 */
div {
    border: 1px solid black;
}

6. 将双边框折叠成一条边框

• border-collapse : collapse;：设置边框折叠（即折叠）。
• border-collapse : separate;：设置边框不折叠。
• border-collapse : initial;：设置为初始值。
• border-collapse : inherit;：设置为继承。

/* 边框折叠代码示例 */
table {
    border-collapse: collapse;
    border: 1px solid black;
}
th,
td {
    border: 1px solid black;
}

7. 边框颜色

• border-color: red;：设置边框颜色为红色。
• border-color: #FF0000;：设置为红色（十六进制表示）。
• border-color: rgb(255, 0, 0);：设置为红色（RGB 表示）。
• border-color: rgba(255, 0, 0, 0.5);：设置为红色（带透明度的 RGBA 表示）。
  也可针对某个方向设置：
• border-top-color: red;：设置上边边框颜色为红色。
• border-right-color: red;：设置右边边框颜色为红色。
• border-bottom-color: red;：设置下边边框颜色为红色。
• border-left-color: red;：设置左边边框颜色为红色。
  或者省略写法：
• border-color: red red red red;：设置上边、右边、下边、左边边框颜色为红色。
• border-color: red red red;：设置上边、右边、下边边框颜色为红色（左边同右边）。
• border-color: red red;：设置上边、下边边框颜色为红色（左边同右边，右边同下边）。
• border-color: red;：设置上边、右边、下边、左边边框颜色为红色。

/* 边框颜色代码示例 */
div {
    border: 1px solid;
    border-color: blue;
}

8. 边框宽度

• border-width: 1px;：设置边框宽度为 1 像素。
• border-width: 1em;：设置为 1 倍（相对于字体大小）。
• border-width: 1%;：设置为父元素宽度的 1%。
  也可针对某个方向设置：
• border-top-width: 1px;：设置上边边框宽度为 1 像素。
• border-right-width: 1px;：设置右边边框宽度为 1 像素。
• border-bottom-width: 1px;：设置下边边框宽度为 1 像素。
• border-left-width: 1px;：设置左边边框宽度为 1 像素。
  或者省略写法：
• border-width: 1px 1px 1px 1px;：设置上边、右边、下边、左边边框宽度为 1 像素。
• border-width: 1px 1px 1px;：设置上边、右边、下边边框宽度为 1 像素（左边同右边）。
• border-width: 1px 1px;：设置上边、下边边框宽度为 1 像素（左边同右边，右边同下边）。
• border-width: 1px;：设置上边、右边、下边、左边边框宽度为 1 像素。

/* 边框宽度代码示例 */
div {
    border: 1px solid black;
    border-width: 2px;
}

9. 边框内边距

/* 边框外边距代码示例 */
div {
    margin: 10px;
    border: 1px solid black;
}

11. 边框圆角

/* 边框圆角代码示例 */
div {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: lightblue;
}

12. 边框阴影

/* 边框阴影代码示例 */
div {
    width: 100px;
    height: 100px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    background-color: lightgreen;
}

13. CSS 盒子模型

CSS 盒子模型由元素的内容、内边距、边框和外边距组成：

/* CSS盒子模型代码示例 */
div {
    width: 200px; /* 内容宽度 */
    height: 150px; /* 内容高度 */
    padding: 10px; /* 内边距 */
    border: 1px solid black; /* 边框 */
    margin: 20px; /* 外边距 */
}

14. CSS3 弹性盒子

CSS3 弹性盒子由 display 属性和 flex 属性组成：

/* CSS3弹性盒子基础代码示例 */
.container {
    display: flex;
}
.item {
    width: 100px;
    height: 100px;
}

15. CSS3 弹性盒子的属性

/* flex-direction属性代码示例 */
.container {
    display: flex;
    flex-direction: column;
}
.item {
    width: 100px;
    height: 50px;
}

/* flex-wrap属性代码示例 */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}
.item {
    width: 150px;
    height: 100px;
}

/* justify-content属性代码示例 */
.container {
    display: flex;
    justify-content: space-between;
    width: 300px;
}
.item {
    width: 50px;
    height: 50px;
}

/* align-items属性代码示例 */
.container {
    display: flex;
    align-items: center;
    height: 200px;
}
.item {
    width: 80px;
    height: 50px;
}

/* flex-grow属性代码示例 */
.container {
    display: flex;
    width: 300px;
}
.item1 {
    flex-grow: 2;
    background-color: lightblue;
}
.item2 {
    flex-grow: 1;
    background-color: lightgreen;
}
.item3 {
    flex-grow: 1;
    background-color: lightcoral;
}

• padding: 10px;：设置内边距为 10 像素。
• padding: 10em;：设置为 10 倍（相对于字体大小）。
• padding: 10%;：设置为父元素宽度的 10%。
  也可针对某个方向设置：
• padding-top: 10px;：设置上边距为 10 像素。
• padding-right: 10px;：设置右边距为 10 像素。
• padding-bottom: 10px;：设置下边距为 10 像素。
• padding-left: 10px;：设置左边距为 10 像素。
  或者省略写法：
• padding: 10px 10px 10px 10px;：设置上边距、右边距、下边距、左边距为 10 像素。
• padding: 10px 10px 10px;：设置上边距、右边距、下边距为 10 像素（左边同右边）。
• padding: 10px 10px;：设置上边距、下边距为 10 像素（左边同右边，右边同下边）。
• padding: 10px;：设置上边距、右边距、下边距、左边距为 10 像素

• 10. 边框外边距

• margin: 10px;：设置外边距为 10 像素。
• margin: 10em;：设置为 10 倍（相对于字体大小）。
• margin: 10%;：设置为父元素宽度的 10%。
  也可针对某个方向设置：
• margin-top: 10px;：设置上边距为 10 像素。
• margin-right: 10px;：设置右边距为 10 像素。
• margin-bottom: 10px;：设置下边距为 10 像素。
• margin-left: 10px;：设置左边距为 10 像素。
  或者省略写法：
• margin: 10px 10px 10px 10px;：设置上、右、下、左边距为 10 像素。
• margin: 10px 10px 10px;：设置上、右、下边距为 10 像素（左边同右边）。
• margin: 10px 10px;：设置上、下边距为 10 像素（左、右边距相同）。
• margin: 10px;：设置四个方向边距均为 10 像素。
• border-radius: 10px;：设置圆角为 10 像素。
• border-radius: 10em;：设置为 10 倍（相对于字体大小）。
• border-radius: 10%;：设置为父元素宽度的 10%。
  也可针对某个方向设置：
• border-top-left-radius: 10px;：设置左上圆角为 10 像素。
• border-top-right-radius: 10px;：设置右上圆角为 10 像素。
• border-bottom-left-radius: 10px;：设置左下圆角为 10 像素。
• border-bottom-right-radius: 10px;：设置右下圆角为 10 像素。
  或者省略写法：
• border-radius: 10px 10px 10px 10px;：设置四个圆角均为 10 像素。
• border-radius: 10px 10px 10px;：设置左上、右上、右下圆角为 10 像素（左下同右下）。
• border-radius: 10px 10px;：设置左上、右下圆角为 10 像素（右上同左上，左下同右下）。
• border-radius: 10px;：四个圆角均设为 10 像素。
• box-shadow: 10px 10px 5px #888888;：设置阴影，依次为水平偏移、垂直偏移、模糊距离、阴影颜色。
• box-shadow: 10px 10px 5px #888888 inset;：设置内阴影。
• box-shadow: 10px 10px 5px #888888 outset;：设置外阴影（默认值，可省略 outset）。
• 还可添加扩展半径参数，例如 box-shadow: 10px 10px 5px 10px #888888;
• 内容：元素的文本或图像。
• 内边距：内容与边框之间的空间。
• 边框：内边距与外边距之间的空间。
• 外边距：元素与其他元素之间的空间。
• 宽度和高度：通过 width 和 height 属性设置，指内容、内边距和边框的宽度 / 高度之和。
• display 属性：用于指定元素的显示方式，设置为 display: flex; 后元素变为弹性容器。
• flex 属性：用于指定元素的弹性布局方式，弹性容器内包含一个或多个弹性子元素。弹性盒子只改变布局，不改变渲染方式。
• flex-direction属性：指定弹性子元素的排列方向，有四种取值：
  • row：从左到右排列
  • row-reverse：从右到左排列
  • column：从上到下排列
  • column-reverse：从下到上排列（垂直方向常用）
• flex-wrap属性：指定弹性子元素的换行方式，有两种取值：
  • nowrap：不换行
  • wrap：换行
• justify-content属性：指定弹性子元素在主轴上的对齐方式，有五种取值：
  • flex-start：从主轴起点开始
  • flex-end：从主轴终点开始
  • center：居中
  • space-between：两端对齐
  • space-around：每个子元素两侧的间隔相等
• align-items属性：指定弹性子元素在交叉轴上的对齐方式，有五种取值：
  • flex-start：从交叉轴起点开始
  • flex-end：从交叉轴终点开始
  • center：居中
  • baseline：基线对齐
  • stretch：拉伸（默认值，子元素占满交叉轴）
• flex-grow属性：指定弹性子元素的放大比例：
  • 默认值为 0，即存在剩余空间也不放大。
  • 若所有子元素 flex-grow 都为 1，则等分剩余空间。
  • 若某子元素 flex-grow 为 2，其他为 1，则该元素占据剩余空间比其他元素多一倍。