学习笔记：

基本属性

1. color: 设置文本的颜色。代码：color: red;
2. background-color: 设置元素的背景颜色。background-color: blue;
3. font-size: 设置文本的大小font-size: 16px;
4. font-family: 设置文本的字体font-family: Arial, sans-serif;
5. text-align: 设置文本的对齐方式text-align: center;
6. margin: 设置元素的外边距margin: 10px;
7. padding: 设置元素的内边距padding: 20px;
8. border: 设置元素的边框border: 1px solid black;

布局属性

1. display: 定义元素的显示类型。

display: block;

display: inline;

display: flex;

1. position: 定义元素的定位方式。

position: absolute;

position: relative;

position: fixed;

position: sticky;

1. top, right, bottom, left: 定义定位元素的偏移量。

top: 10px;

right: 20px;

1. float: 定义元素的浮动。

float: left;

float: right;

1. clear: 清除浮动clear: both;
2. flex: 定义弹性盒模型中的弹性子项。

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

尺寸属性

1. width: 设置元素的宽度。width: 100px;
2. height: 设置元素的高度。height: 50px;
3. max-width: 设置元素的最大宽度。max-width: 100%;
4. min-width: 设置元素的最小宽度。min-width: 300px;
5. max-height: 设置元素的最大高度。max-height: 500px;
6. min-height: 设置元素的最小高度。min-height: 200px;

高级属性

1. z-index: 设置元素的堆叠顺序。z-index: 10;
2. opacity: 设置元素的透明度opacity: 0.5;
3. overflow: 设置溢出内容的处理方式。

overflow: hidden;

overflow: scroll;

1. box-shadow: 设置元素的阴影效果。box-shadow: 10px 10px 5px #888888;
2. transition: 设置元素的过渡效果transition: all 0.3s ease-in-out;
3. transform: 设置元素的2D或3D转换。transform: rotate(45deg);
4. 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;}