学习笔记：
基本属性
- color: 设置文本的颜色。代码：color: red;
- background-color: 设置元素的背景颜色。background-color: blue;
- font-size: 设置文本的大小font-size: 16px;
- font-family: 设置文本的字体font-family: Arial, sans-serif;
- text-align: 设置文本的对齐方式text-align: center;
- margin: 设置元素的外边距margin: 10px;
- padding: 设置元素的内边距padding: 20px;
- border: 设置元素的边框border: 1px solid black;
布局属性
- display: 定义元素的显示类型。
display: block;
display: inline;
display: flex;
- position: 定义元素的定位方式。
position: absolute;
position: relative;
position: fixed;
position: sticky;
- top, right, bottom, left: 定义定位元素的偏移量。
top: 10px;
right: 20px;
- float: 定义元素的浮动。
float: left;
float: right;
- clear: 清除浮动clear: both;
- flex: 定义弹性盒模型中的弹性子项。
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
尺寸属性
- width: 设置元素的宽度。width: 100px;
- height: 设置元素的高度。height: 50px;
- max-width: 设置元素的最大宽度。max-width: 100%;
- min-width: 设置元素的最小宽度。min-width: 300px;
- max-height: 设置元素的最大高度。max-height: 500px;
- min-height: 设置元素的最小高度。min-height: 200px;
高级属性
- z-index: 设置元素的堆叠顺序。z-index: 10;
- opacity: 设置元素的透明度opacity: 0.5;
- overflow: 设置溢出内容的处理方式。
overflow: hidden;
overflow: scroll;
- box-shadow: 设置元素的阴影效果。box-shadow: 10px 10px 5px #888888;
- transition: 设置元素的过渡效果transition: all 0.3s ease-in-out;
- transform: 设置元素的2D或3D转换。transform: rotate(45deg);
- animation: 设置元素的动画。
animation: mymove 5s infinite;
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
行内元素（Inline Elements）
· <a> - 超链接
· <span> - 通用行内容器
· <em> - 强调文本（斜体）
· <strong> - 强调文本（加粗）
· <img> - 图片
· <input> - 输入控件
· <label> - 标签
块级元素（Block Elements）
· <div> - 通用块级容器
· <p> - 段落
· <h1> - <h6> - 标题
· <ul> - 无序列表
· <ol> - 有序列表
· <li> - 列表项
· <header> - 页眉
· <footer> - 页脚
· <section> - 区块
将块级元素变为行内元素：
.block-to-inline { display: inline;}
将行内元素变为块级元素：.inline-to-block {display: block;}
inline-block: 结合了行内和块级元素的特点，元素会像行内元素一样排列，但可以设置宽高。.inline-block-element {display: inline-block;width: 100px;height: 50px;}
flex: 用于创建弹性布局容器。.flex-container {display: flex;}
grid: 用于创建网格布局容器。.grid-container {display: grid;}