1.语法：浮动float：
left//元素向左浮动;
right//元素向左浮动;
none//默认值，元素不浮动，并会显示在文本的位置
inherit//元素继承其父元素的float值
2.语法：外边距margin
（margin-top）（margin-right) （margin-bottom) （margin-left)
：{长度}//外边距多长，没写方向默认上右下左
{百分数}//基于父类百分比值
{auto}//浏览器自动计算
3.语法：内边距padding
（padding-top）（padding-right) （padding-bottom) （padding-left)
：{长度}//内边距多长，没写方向默认上右下左
{百分数}//基于包含块的百分比值
4.语法：背景background
background-color
描述：设置元素的背景颜色。
值：颜色值，如#ff0000、rgb(255, 0, 0)、red等。
background-image
描述：设置元素的背景图片。
值：图片的URL，如url('image.jpg')。
background-repeat
描述：设置背景图片是否及如何重复。
值：repeat、repeat-x、repeat-y、no-repeat、space、round。
background-position
描述：设置背景图片的起始位置。
值：关键字（如top、bottom、left、right、center）或精确位置（如50px 100px）。
background-size
描述：设置背景图片的大小。
值：具体的长度（如50px 100px）、百分比（如50% 100%）、auto、cover、contain。
background-attachment
描述：设置背景图片是否固定或者随着页面的其余部分滚动。
值：scroll、fixed、local。
background-origin
描述：设置背景图片的定位区域。
值：padding-box、border-box、content-box。
background-clip
描述：设置背景图片的绘制区域。
值：border-box、padding-box、content-box。
5.语法：字体font
font-family
描述：指定元素的字体系列。
值：可以是一个或多个字体名称，由逗号分隔。如果浏览器不支持第一个字体，它会尝试使用列表中的下一个字体。常见的字体包括"Arial”, “Times New Roman”, “sans-serif”, “serif”, “monospace"等。
font-size
描述：设置文本的大小。
值：可以是绝对单位（如px, pt, cm等），也可以是相对单位（如em, rem, %等），或者是预定义的关键字（如larger, smaller）。
font-style
描述：设置文本的样式。
值：可以是normal（默认）、italic（斜体）或oblique（倾斜）。
font-weight
描述：设置文本的粗细。
值：可以是预定义的关键字（如normal, bold, bolder, lighter），也可以是数值（如100, 200, …, 900，其中400相当于normal，700相当于bold）。
font-variant
描述：设置小型大写字母的文本。
值：主要是normal（默认）或small-caps（小型大写字母）。
line-height
描述：设置行与行之间的距离（行高）。
值：可以是正常文本大小的倍数（如1.5），也可以是绝对或相对单位（如20px, 1.5em），或者是预定义的关键字（如normal）。
font-size-adjust（较少使用）
描述：为元素提供字体大小调整比率。主要用于当首选字体不可用时，使用备选字体时的字体大小调整。
值：一个数字，通常与font-family中的font-aspect-value一起使用。
6.语法：边框样式border
border-width
描述：设置边框的宽度。
值：可以是thin、medium、thick或具体的长度值（如1px、2em等）。你可以分别为每个边框设置宽度，如border-top-width、border-right-width、border-bottom-width、border-left-width。
border-style
描述：设置边框的样式。
值：可以是none（无边框）、solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（凹槽边框）、ridge（垄状边框）、inset（内嵌边框）、outset（外嵌边框）等。同样，你可以分别为每个边框设置样式。
border-color
描述：设置边框的颜色。
值：可以是任何有效的CSS颜色值，如十六进制颜色（如#ff0000）、颜色名称（如red）、RGB、RGBA、HSL、HSLA等。你也可以分别为每个边框设置颜色。
border-radius
描述：设置边框的圆角。
值：可以是单个值（应用于所有四个角），也可以是四个值（分别应用于左上角、右上角、右下角和左下角）。每个值可以是一个长度值或百分比值。
border
描述：这是一个简写属性，用于同时设置border-width、border-style和border-color。
值：你可以按照border-width、border-style、border-color的顺序设置值，例如1px solid red。你也可以分别为每个边框设置这些值。
border-top、border-right、border-bottom、border-left
描述：这些属性是简写属性，允许你同时为一个边的border-width、border-style和border-color设置值。
值：与border属性的值类似，但仅应用于指定的边。
border-image
描述：使用图像作为边框。
值：这是一个复杂的属性，允许你设置图像的源、切片、宽度、外间距和重复模式等。
7.语法：鼠标悬浮hover
hover 伪类选择器
描述：:hover 伪类选择器应用于用户鼠标指针悬停在其上的元素。这通常用于改变元素在鼠标悬停时的样式，如改变颜色、背景或边框。
用法：选择器 :hover 必须附加到另一个选择器之后，以指定哪些元素在鼠标悬停时应获得样式。
示例
改变文字颜色
p:hover {
color: red;
}
当用户将鼠标悬停在
元素上时，文本颜色将变为红色。
改变背景色
button:hover {
background-color: #ddd;
}
当用户将鼠标悬停在
改变边框
div:hover {
border: 1px solid black;
}
当用户将鼠标悬停在
结合其他选择器
你可以将 :hover 与其他选择器结合使用，如类选择器、ID选择器或属性选择器。
.my-class:hover {
cursor: pointer;
}
my-id:hover {
opacity: 0.8;
}
a[href^=“http://“]:hover {
text-decoration: underline;
}
在上面的示例中，鼠标悬停在具有 .my-class 类的元素上时，鼠标指针将变为手形图标；悬停在ID为 my-id 的元素上时，元素的透明度将变为0.8；悬停在 href 属性以 http:// 开头的 链接上时，链接文本将加下划线。
8.语法：文本控制text
文本颜色
color: 设置文本颜色。
文本对齐
text-align: 设置文本的水平对齐方式，如left、right、center、justify。
vertical-align: 设置元素的垂直对齐方式，如top、bottom、middle、baseline等。注意，这个属性通常用于内联元素或表格单元格。
文本装饰
text-decoration: 添加文本装饰，如none、underline、overline、line-through、blink（虽然blink并不常用且不被一些浏览器支持）。
text-shadow: 为文本添加阴影效果。
文本转换
text-transform: 控制文本的大小写，如none、uppercase、lowercase、capitalize。
文本缩进和间距
text-indent: 设置文本的首行缩进。
letter-spacing: 设置字符之间的间距。
word-spacing: 设置单词之间的间距。
line-height: 设置行高，即文本行之间的垂直间距。
文本换行和溢出
white-space: 控制如何处理元素内的空白和换行，如normal、nowrap、pre、pre-wrap、pre-line。
overflow-wrap (或 word-wrap): 控制长单词和URL是否换行。
word-break: 控制单词内换行。
text-overflow: 当文本溢出其容器时，决定如何显示溢出的文本，常与overflow: hidden;一起使用。
文本方向
direction: 设置文本的方向，如ltr（从左到右）和rtl（从右到左）。
unicode-bidi: 与direction一起使用，用于控制Unicode双向文本的处理。
文本内容
content: 用于:before和:after伪元素，插入生成的内容。
字体特性
@font-face: 用于加载服务器上的字体文件，以在网页上使用自定义字体。
文本渲染
text-rendering: 控制文本如何渲染，如auto、optimizeSpeed、optimizeLegibility、geometricPrecision。
文本对齐（多行）
text-align-last: 设置文本最后一行的对齐方式。
9.盒子模型box
box-sizing: 控制元素的宽度和高度如何计算，如content-box（默认，宽度和高度仅包括内容）和border-box（宽度和高度包括内容、内边距和边框）。
display: 控制元素如何显示，如block、inline、inline-block等，间接影响盒子模型的渲染方式。
position: 控制元素的定位方式，如static、relative、absolute、fixed和sticky，也间接影响盒子模型的布局。
float: 控制元素浮动到其父元素的左侧或右侧，通常与clear属性一起使用来管理浮动元素。
clear: 控制元素是否应出现在浮动元素之前或之后。
盒子阴影
box-shadow: 在元素周围添加阴影效果，可以包括多个阴影，每个阴影由水平偏移、垂直偏移、模糊半径、扩展半径和颜色值组成。
溢出处理
overflow: 控制当内容溢出元素框时如何显示内容，如visible、hidden、scroll、auto。
overflow-x 和 overflow-y: 分别控制水平和垂直方向的溢出处理。
可见性
visibility: 控制元素是否可见，但即使设置为hidden，元素仍然占据页面上的空间。
10.定位方式position
static
默认值：所有元素在默认情况下都是静态定位。
特点：元素出现在正常的文档流中，按照其在HTML文档中的顺序进行布局。top、right、bottom、left 和 z-index 属性在静态定位的元素上无效。
relative
相对定位：元素相对于其正常位置进行定位。
特点：即使进行了相对定位，元素仍然会保留在文档流中的空间。top、right、bottom 和 left 属性用于指定元素相对于其正常位置（即原始位置）的偏移量。（父盒子）
absolute
绝对定位：元素相对于最近的已定位祖先元素（而非正常流中的父元素）进行定位。
特点：如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。top、right、bottom 和 left 属性用于指定元素相对于最近的已定位祖先元素的偏移量。绝对定位的元素会脱离文档流，不占据空间。（子盒子）
fixed
固定定位：元素相对于浏览器窗口进行定位，即使页面滚动，它也会始终位于同一的位置。
特点：top、right、bottom 和 left 属性用于指定元素相对于浏览器窗口的偏移量。固定定位的元素会脱离文档流，不占据空间。
sticky
粘性定位：粘性定位可以被视为相对定位和固定定位的混合。
特点：元素在跨越特定阈值之前为相对定位，之后为固定定位。这个阈值通常通过 top、right、bottom 或 left 属性来定义。例如，一个设置了 position: sticky; top: 0; 的元素在滚动到页面顶部之前会相对于其正常位置定位，但一旦滚动到页面顶部，它就会"粘"在那里，就像使用了 position: fixed; 一样。
11.列表样式list
list-style-type
定义列表项标记的类型。
可能的值包括：disc（默认，实心圆点）、circle（空心圆）、square（实心方块）、decimal（数字）、decimal-leading-zero（带前导零的数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）、none（无标记）等。
/* 设置列表项标记为数字，并且位于文本内 */
ul {
list-style-type: decimal;
list-style-position: inside;
}
list-style-image
使用图像作为列表项标记。
需要指定图像的URL。
/* 使用图像作为列表项标记 */
ul {
list-style-image: url('bullet.png');
}
list-style-position
定义列表项标记的位置。
可能的值包括：inside（标记位于文本内）、outside（标记位于文本外，这是默认值）。
list-style
是list-style-type、list-style-image和list-style-position的简写属性。
允许你在一个声明中设置所有的列表样式属性。
list-style-shorthand
这不是一个正式的CSS属性，但经常作为简写使用，如list-style: none;来移除列表项标记。
/* 使用伪元素为无标记的列表项添加自定义标记 */
ul li::before {
content: '► '; /* 在文本前添加自定义标记 */
}
原文链接: https://blog.csdn.net/daibadetianshi/article/details/138034339