今日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 cebterleft bottomright topright centerright bottomcenter topcenter centercenter 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，则该元素占据剩余空间比其他元素多一倍。
- 默认值为