1 css
1.1 布局1
01.分类
头部区域、菜单导航区域、内容区域、底部区域
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部区域 */
.header {
background-color: #F1F1F1;
text-align: center;
padding: 30px;
}
.header h1 {
font-size: 50px;
}
/* 菜单导航区域 */
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 内容区域 - 三列布局 */
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33.33%;
padding: 15px;
}
/* 响应式布局 */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
}
}
/* 不相等的列 */
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
/* 响应式布局 - 不相等的列 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
/* 底部区域 */
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
margin-top: 20px;
}
/* 完整响应式页面布局 */
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<!-- 头部区域 -->
<div class="header">
<h1>我的网站</h1>
</div>
<!-- 菜单导航区域 -->
<div class="topnav">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
<a href="#about">关于</a>
</div>
<!-- 内容区域 -->
<div class="row">
<div class="column side">
<h2>侧栏</h2>
<p>一些侧栏内容。</p>
</div>
<div class="column middle">
<h2>主要内容</h2>
<p>这里是主要内容区域。</p>
</div>
<div class="column side">
<h2>侧栏</h2>
<p>一些侧栏内容。</p>
</div>
</div>
<!-- 完整响应式页面布局 -->
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>标题</h2>
<h5>标题描述，日期</h5>
<div class="fakeimg" style="height:200px;">图像</div>
<p>一些文本内容..</p>
</div>
<div class="card">
<h2>另一个标题</h2>
<h5>标题描述，日期</h5>
<div class="fakeimg" style="height:200px;">图像</div>
<p>一些文本内容..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>关于我</h2>
<div class="fakeimg" style="height:100px;">图像</div>
<p>一些文本内容..</p>
</div>
<div class="card">
<h3>热门帖子</h3>
<div class="fakeimg">图像</div><br>
<div class="fakeimg">图像</div><br>
<div class="fakeimg">图像</div>
</div>
<div class="card">
<h3>关注我</h3>
<p>一些文本内容..</p>
</div>
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<h2>页脚</h2>
</div>
</body>
</html>
1.2 布局2
01.分类
a.两栏布局
浮动布局：使用 float 将两个元素并排显示。
浮动布局 + 负外边距：使用 float 和负外边距将两个元素重叠。
绝对定位：使用 position: absolute; 将两个元素固定在容器的两边。
Flex（推荐）：使用 Flexbox 实现两栏布局。
b.三栏布局
绝对定位：使用 position: absolute; 将三个元素分别固定在容器的左、中、右。
浮动 + 负外边距：使用 float 和负外边距将三个元素并排显示。
浮动定位法：使用 float 将三个元素并排显示。
Flexbox（推荐）：使用 Flexbox 实现三栏布局。
圣杯布局：使用绝对定位和设置宽度来实现圣杯布局（中间内容的宽度固定，两边内容自适应）。
---------------------------------------------------------------------------------------------------------
a.两栏布局：
方法1：浮动布局
方法2：浮动布局+负外边距（双飞翼布局的两栏版）
方法3：绝对定位
方法4：flex（推荐）
b.三栏布局：
方法1：绝对定位
方法2：浮动+负外边距（双飞翼布局）
方法3：浮动定位法
方法4：flexbox（推荐）
方法5：圣杯布局
---------------------------------------------------------------------------------------------------------
a.两栏布局：
方法1：浮动布局
优点：兼容性好，老旧浏览器也支持。
缺点：需要清除浮动（clearfix），可能导致代码复杂性增加。
方法2：浮动布局+负外边距（双飞翼布局的两栏版）
优点：可以创建自适应的两栏布局，适用于响应式设计。
缺点：负外边距可能导致布局问题，特别是在复杂页面中。
方法3：绝对定位
优点：定位精确，可以实现固定的两栏布局。
缺点：布局不随容器大小调整，不适合响应式设计。
方法4：flex
优点：实现简单，支持灵活的布局和响应式设计。
缺点：较新的浏览器支持，老旧浏览器可能需要前缀支持。
推荐方法：Flex。Flexbox 布局现代，易于实现响应式设计，能够处理各种复杂的布局需求，尤其适合现代网页设计。
b.三栏布局：
方法1：绝对定位
优点：可以精确控制每一列的位置，适合固定布局。
缺点：不适合响应式设计，列宽固定。
方法2：浮动+负外边距（双飞翼布局）
优点：适合创建自适应的三栏布局，利用负外边距可以解决列宽计算的问题。
缺点：代码复杂，可能需要清除浮动。
方法3：浮动定位法
优点：较简单，兼容性好。
缺点：不如 Flexbox 适应不同屏幕尺寸，布局调整可能较为繁琐。
方法4：flexbox
优点：简单易用，支持响应式设计，能够处理各种复杂的三栏布局。
缺点：较新的浏览器支持，老旧浏览器可能需要前缀支持。
方法5：圣杯布局
优点：适合固定宽度和响应式设计，能够有效地处理复杂的布局。
缺点：较为复杂，使用绝对定位和负外边距的组合可能会增加代码复杂性。
推荐方法：Flexbox。对于现代布局设计，Flexbox 提供了强大的功能，支持响应式设计，能够灵活处理三栏布局的需求。如果需要固定宽度的三栏布局并且有兼容性需求，可以考虑使用圣杯布局。
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* 两栏布局 - 浮动布局 */
.float-layout {
overflow: hidden;
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
}
.float-layout .left {
float: left;
width: 45%;
background-color: lightcoral;
padding: 10px;
margin-right: 5%;
}
.float-layout .right {
float: left;
width: 45%;
background-color: lightblue;
padding: 10px;
}
/* 两栏布局 - 浮动布局 + 负外边距 */
.double-fly-layout {
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.double-fly-layout .left {
float: left;
width: calc(50% + 20px);
background-color: lightcoral;
padding: 10px;
margin-right: -20px;
}
.double-fly-layout .right {
float: right;
width: calc(50% + 20px);
background-color: lightblue;
padding: 10px;
margin-left: -20px;
}
/* 两栏布局 - 绝对定位 */
.absolute-layout {
position: relative;
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
}
.absolute-layout .left,
.absolute-layout .right {
position: absolute;
width: 45%;
background-color: lightcoral;
padding: 10px;
}
.absolute-layout .left {
left: 0;
}
.absolute-layout .right {
right: 0;
}
/* 两栏布局 - Flex */
.flex-layout {
display: flex;
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
}
.flex-layout .left,
.flex-layout .right {
width: 50%;
background-color: lightcoral;
padding: 10px;
}
.flex-layout .right {
background-color: lightblue;
}
/* 三栏布局 - 绝对定位 */
.three-col-absolute {
position: relative;
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
}
.three-col-absolute .left,
.three-col-absolute .center,
.three-col-absolute .right {
position: absolute;
top: 0;
padding: 10px;
}
.three-col-absolute .left {
left: 0;
width: 25%;
background-color: lightcoral;
}
.three-col-absolute .center {
left: 25%;
width: 50%;
background-color: lightblue;
}
.three-col-absolute .right {
right: 0;
width: 25%;
background-color: lightgreen;
}
/* 三栏布局 - 浮动 + 负外边距 */
.three-col-float {
overflow: hidden;
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
}
.three-col-float .left,
.three-col-float .center,
.three-col-float .right {
float: left;
padding: 10px;
}
.three-col-float .left {
width: calc(33.33% + 20px);
background-color: lightcoral;
margin-right: -20px;
}
.three-col-float .center {
width: calc(33.33% + 20px);
background-color: lightblue;
margin-right: -20px;
}
.three-col-float .right {
width: calc(33.33% + 20px);
background-color: lightgreen;
margin-left: -20px;
}
/* 三栏布局 - 浮动定位法 */
.three-col-float-position {
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.three-col-float-position .left,
.three-col-float-position .center,
.three-col-float-position .right {
float: left;
width: 30%;
padding: 10px;
}
.three-col-float-position .left {
background-color: lightcoral;
}
.three-col-float-position .center {
background-color: lightblue;
}
.three-col-float-position .right {
background-color: lightgreen;
}
/* 三栏布局 - Flexbox */
.three-col-flexbox {
display: flex;
width: 100%;
}
.three-col-flexbox .left,
.three-col-flexbox .right {
flex: 1;
background-color: lightgray;
padding: 10px;
}
.three-col-flexbox .center {
flex: 2; /* 中间列占据更多空间 */
background-color: lightblue;
padding: 10px;
}
/* 三栏布局 - 圣杯布局 */
.three-col-saint-cup {
background-color: lightgrey;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.three-col-saint-cup .left,
.three-col-saint-cup .center,
.three-col-saint-cup .right {
padding: 10px;
position: absolute;
top: 0;
}
.three-col-saint-cup .left {
left: 0;
width: 20%;
background-color: lightcoral;
}
.three-col-saint-cup .center {
left: 20%;
width: 60%;
background-color: lightblue;
}
.three-col-saint-cup .right {
right: 0;
width: 20%;
background-color: lightgreen;
}
</style>
</head>
<body>
<!-- 两栏布局 - 浮动布局 -->
<div class="float-layout">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 两栏布局 - 浮动布局 + 负外边距 -->
<div class="double-fly-layout">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 两栏布局 - 绝对定位 -->
<div class="absolute-layout">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 两栏布局 - Flex -->
<div class="flex-layout">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 三栏布局 - 绝对定位 -->
<div class="three-col-absolute">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
<!-- 三栏布局 - 浮动 + 负外边距 -->
<div class="three-col-float">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
<!-- 三栏布局 - 浮动定位法 -->
<div class="three-col-float-position">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
<!-- 三栏布局 - Flexbox -->
<div class="three-col-flexbox">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
<!-- 三栏布局 - 圣杯布局 -->
<div class="three-col-saint-cup">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
</body>
</html>
1.3 导航栏
01.分类
垂直导航栏
垂直导航栏，带边框
水平导航栏
水平导航栏，带分割线
固定在顶部的导航栏
固定在底部的导航栏
灰色水平导航栏
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bars</title>
<style>
/* 基本样式 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* 垂直导航栏 */
.vertical-nav {
width: 200px;
background-color: #f1f1f1;
}
.vertical-nav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vertical-nav li a:hover {
background-color: #555;
color: white;
}
.vertical-nav li a.active {
background-color: #4CAF50;
color: white;
}
/* 垂直导航栏边框 */
.vertical-nav-bordered {
border: 1px solid #555;
}
.vertical-nav-bordered li {
text-align: center;
border-bottom: 1px solid #555;
}
.vertical-nav-bordered li:last-child {
border-bottom: none;
}
/* 水平导航栏 */
.horizontal-nav {
overflow: hidden;
background-color: #333;
}
.horizontal-nav li {
float: left;
}
.horizontal-nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.horizontal-nav li a:hover {
background-color: #111;
}
.horizontal-nav li a.active {
background-color: #4CAF50;
}
/* 链接右对齐 */
.horizontal-nav-right {
float: right;
}
/* 水平导航栏分割线 */
.horizontal-nav-split li {
border-right: 1px solid #bbb;
}
.horizontal-nav-split li:last-child {
border-right: none;
}
/* 固定导航栏 */
.fixed-top {
position: fixed;
top: 0;
width: 100%;
}
.fixed-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
/* 灰色水平导航栏 */
.grey-nav {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
.grey-nav li a {
color: #666;
}
</style>
</head>
<body>
<!-- 垂直导航栏 -->
<ul class="vertical-nav">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br>
<!-- 垂直导航栏，带边框 -->
<ul class="vertical-nav vertical-nav-bordered">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br>
<!-- 水平导航栏 -->
<ul class="horizontal-nav">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br>
<!-- 水平导航栏，带分割线 -->
<ul class="horizontal-nav horizontal-nav-split">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br>
<!-- 固定在顶部的导航栏 -->
<ul class="horizontal-nav fixed-top">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br><br><br><br><br><br><br><br>
<!-- 固定在底部的导航栏 -->
<ul class="horizontal-nav fixed-bottom">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<br><br><br><br><br><br><br><br>
<!-- 灰色水平导航栏 -->
<ul class="horizontal-nav grey-nav">
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
1.4 下拉菜单
01.分类
基本下拉菜单
下拉菜单带链接
图片下拉菜单
导航条下拉菜单
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 下拉菜单示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
/* 基本下拉菜单 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* 下拉菜单带链接 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
/* 图片下拉菜单 */
.dropdown img {
width: 100%;
}
/* 导航条下拉菜单 */
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content-nav {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-nav a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-nav a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content-nav {
display: block;
}
</style>
</head>
<body>
<h2>CSS 下拉菜单示例</h2>
<h3>基本下拉菜单</h3>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>菜鸟教程</p>
<p>www.runoob.com</p>
</div>
</div>
<h3>下拉菜单带链接</h3>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜鸟教程 1</a>
<a href="#">菜鸟教程 2</a>
<a href="#">菜鸟教程 3</a>
</div>
</div>
<h3>图片下拉菜单</h3>
<div class="dropdown">
<button class="dropbtn">图片下拉菜单</button>
<div class="dropdown-content">
<a href="#"><img src="https://www.runoob.com/wp-content/uploads/2014/07/trolltunga.jpg" alt="Trolltunga Norway"></a>
</div>
</div>
<h3>导航条下拉菜单</h3>
<div class="navbar">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<div class="dropdown">
<button class="dropbtn">更多
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-nav">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</div>
</body>
</html>
1.5 提示工具
01.分类
基础提示框(Tooltip)
右侧显示
左边显示
头部显示
底部显示
带箭头的提示工具
淡入效果的提示工具
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 提示工具示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 20px;
padding: 0;
}
/* 基本提示工具 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* 右侧提示工具 */
.tooltip-right .tooltiptext {
top: -5px;
left: 105%;
}
/* 左侧提示工具 */
.tooltip-left .tooltiptext {
top: -5px;
right: 105%;
}
/* 顶部提示工具 */
.tooltip-top .tooltiptext {
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
/* 底部提示工具 */
.tooltip-bottom .tooltiptext {
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
/* 带箭头的提示工具 */
.tooltip-arrow .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* 淡入效果的提示工具 */
.tooltip-fade .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip-fade:hover .tooltiptext {
opacity: 1;
}
</style>
</head>
<body>
<h2>CSS 提示工具示例</h2>
<h3>基础提示框(Tooltip)</h3>
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>右侧显示</h3>
<div class="tooltip tooltip-right">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>左边显示</h3>
<div class="tooltip tooltip-left">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>头部显示</h3>
<div class="tooltip tooltip-top">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>底部显示</h3>
<div class="tooltip tooltip-bottom">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>带箭头的提示工具</h3>
<div class="tooltip tooltip-arrow">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
<h3>淡入效果的提示工具</h3>
<div class="tooltip tooltip-fade">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
1.6 按钮
01.分类
基本按钮样式
按钮颜色
大小
圆角
边框颜色
悬停效果
阴影
禁用状态
按钮宽度
按钮组和按钮动画
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Buttons</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
/* Basic Button Style */
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
transition-duration: 0.4s;
}
/* Button Colors */
.button1 { background-color: #4CAF50; } /* Green */
.button2 { background-color: #008CBA; } /* Blue */
.button3 { background-color: #f44336; } /* Red */
.button4 { background-color: #e7e7e7; color: black; } /* Gray */
.button5 { background-color: #555555; } /* Black */
/* Button Sizes */
.button1 { font-size: 10px; }
.button2 { font-size: 12px; }
.button3 { font-size: 16px; }
.button4 { font-size: 20px; }
.button5 { font-size: 24px; }
/* Rounded Buttons */
.button1 { border-radius: 2px; }
.button2 { border-radius: 4px; }
.button3 { border-radius: 8px; }
.button4 { border-radius: 12px; }
.button5 { border-radius: 50%; }
/* Button Border Colors */
.button1 { border: 2px solid #4CAF50; } /* Green Border */
.button2 { border: 2px solid #008CBA; } /* Blue Border */
.button3 { border: 2px solid #f44336; } /* Red Border */
.button4 { border: 2px solid #e7e7e7; } /* Gray Border */
.button5 { border: 2px solid #555555; } /* Black Border */
/* Hover Effects */
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
/* Button Shadow */
.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }
/* Disabled Button */
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Button Width */
.button-width1 { width: 250px; }
.button-width2 { width: 50%; }
.button-width3 { width: 100%; }
/* Button Group */
.btn-group .button {
float: left;
margin: 0;
}
/* Button Group with Borders */
.btn-group-border .button {
float: left;
border: 1px solid green; /* Green Border */
}
/* Button Animation */
.animate-button {
position: relative;
overflow: hidden;
}
.animate-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: rgba(0, 0, 0, 0.1);
transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.animate-button:hover::after {
width: 0;
height: 0;
top: 50%;
left: 50%;
}
.animate-button:hover {
background-color: #333;
color: white;
}
/* Button Press Effect */
.press-button {
position: relative;
overflow: hidden;
}
.press-button:active {
background-color: #555;
transform: scale(0.95);
}
/* Arrow Effect on Hover */
.arrow-button {
position: relative;
overflow: hidden;
}
.arrow-button::before {
content: '→';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
opacity: 0;
transition: opacity 0.4s;
}
.arrow-button:hover::before {
opacity: 1;
}
</style>
</head>
<body>
<h1>CSS Buttons Examples</h1>
<h2>Basic Button Style</h2>
<button class="button">Default Button</button>
<h2>Button Colors</h2>
<button class="button1">Green Button</button>
<button class="button2">Blue Button</button>
<button class="button3">Red Button</button>
<button class="button4">Gray Button</button>
<button class="button5">Black Button</button>
<h2>Button Sizes</h2>
<button class="button1">Small Button</button>
<button class="button2">Medium Button</button>
<button class="button3">Large Button</button>
<button class="button4">Extra Large Button</button>
<button class="button5">Huge Button</button>
<h2>Rounded Buttons</h2>
<button class="button1">2px Radius</button>
<button class="button2">4px Radius</button>
<button class="button3">8px Radius</button>
<button class="button4">12px Radius</button>
<button class="button5">50% Radius</button>
<h2>Button Border Colors</h2>
<button class="button1">Green Border</button>
<button class="button2">Blue Border</button>
<button class="button3">Red Border</button>
<button class="button4">Gray Border</button>
<button class="button5">Black Border</button>
<h2>Hover Effects</h2>
<button class="button animate-button">Hover Animation</button>
<h2>Button Shadow</h2>
<button class="button1">Button with Shadow</button>
<button class="button2 hover">Button with Hover Shadow</button>
<h2>Disabled Button</h2>
<button class="button disabled">Disabled Button</button>
<h2>Button Width</h2>
<button class="button-width1">Fixed Width</button>
<button class="button-width2">50% Width</button>
<button class="button-width3">Full Width</button>
<h2>Button Group</h2>
<div class="btn-group">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
</div>
<h2>Button Group with Borders</h2>
<div class="btn-group-border">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
</div>
<h2>Button Animations</h2>
<button class="button animate-button">Hover Arrow</button>
<button class="button press-button">Press Effect</button>
<button class="button arrow-button">Click Arrow</button>
</body>
</html>
1.7 分页
01.分类
简单分页
点击及鼠标悬停分页样式
圆角样式
鼠标悬停过渡效果
带边框分页
圆角边框
分页间隔
分页字体大小
居中分页
面包屑导航
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页和面包屑导航示例</title>
<style>
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* 分页容器样式 */
.pagination {
display: flex;
justify-content: center; /* 居中分页 */
list-style: none; /* 去除列表样式 */
padding: 0;
margin: 20px 0; /* 分页间隔 */
}
/* 分页项样式 */
.pagination li {
margin: 0 5px; /* 分页间隔 */
}
/* 分页链接基础样式 */
.pagination a {
text-decoration: none; /* 去除下划线 */
padding: 10px 15px; /* 内边距 */
color: #007bff; /* 字体颜色 */
transition: background-color 0.3s, color 0.3s; /* 鼠标悬停过渡效果 */
}
/* 简单分页 */
.pagination.simple a {
border: 1px solid #007bff; /* 带边框分页 */
border-radius: 5px; /* 圆角样式 */
}
/* 点击及鼠标悬停分页样式 */
.pagination.hover a {
background-color: #f0f0f0; /* 鼠标悬停时背景颜色 */
}
.pagination.hover a:hover {
background-color: #007bff; /* 鼠标悬停时背景颜色 */
color: #fff; /* 鼠标悬停时字体颜色 */
}
/* 圆角样式 */
.pagination.round a {
border-radius: 20px; /* 更大的圆角 */
border: 2px solid #007bff; /* 带边框 */
}
/* 鼠标悬停过渡效果 */
.pagination.transition a {
transition: background-color 0.5s, transform 0.3s; /* 过渡效果 */
}
.pagination.transition a:hover {
background-color: #007bff; /* 鼠标悬停时背景颜色 */
color: #fff; /* 鼠标悬停时字体颜色 */
transform: scale(1.1); /* 鼠标悬停时放大 */
}
/* 带边框分页 */
.pagination.bordered a {
border: 2px solid #007bff; /* 带边框 */
}
/* 分页字体大小示例 */
.pagination.large a {
font-size: 20px; /* 增大字体 */
}
/* 面包屑导航样式 */
.breadcrumb {
display: flex;
list-style: none;
padding: 10px 0; /* 面包屑内边距 */
}
.breadcrumb li {
margin-right: 10px; /* 面包屑间隔 */
}
.breadcrumb a {
text-decoration: none; /* 去除下划线 */
color: #007bff; /* 字体颜色 */
}
.breadcrumb a:hover {
text-decoration: underline; /* 鼠标悬停时下划线 */
}
.breadcrumb li::after {
content: '>'; /* 分隔符 */
margin-left: 10px; /* 分隔符间隔 */
}
.breadcrumb li:last-child::after {
content: ''; /* 最后一个元素不显示分隔符 */
}
</style>
</head>
<body>
<h1>分页示例</h1>
<!-- 简单分页示例 -->
<h2>1. 简单分页</h2>
<ul class="pagination simple">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 点击及鼠标悬停分页样式示例 -->
<h2>2. 点击及鼠标悬停分页样式</h2>
<ul class="pagination hover">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 圆角样式示例 -->
<h2>3. 圆角样式</h2>
<ul class="pagination round">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 鼠标悬停过渡效果示例 -->
<h2>4. 鼠标悬停过渡效果</h2>
<ul class="pagination transition">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 带边框分页示例 -->
<h2>5. 带边框分页</h2>
<ul class="pagination bordered">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 分页字体大小示例 -->
<h2>6. 分页字体大小</h2>
<ul class="pagination large">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- 面包屑导航示例 -->
<h2>7. 面包屑导航</h2>
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">当前页面</a></li>
</ul>
</body>
</html>
1.8 响应式布局
01.普通布局
布局固定，不会根据屏幕大小调整。
使用固定宽度或浮动的列。
适用于屏幕宽度较为一致的设备，无法提供良好的跨设备用户体验。
---------------------------------------------------------------------------------------------------------
主要有以下3类：
静态布局(Static Layout)：最传统、原始的Web布局设计
流式布局(Liquid Layout)：俗称百分比布局
弹性布局(Flex Layout)
02.响应式布局
布局灵活，使用百分比宽度和媒体查询进行调整。
使用 flex 或 flex-wrap 等 CSS 特性。
在不同屏幕尺寸下提供一致的用户体验，适用于各种设备（PC、平板、手机等）。
03.代码示例
a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>响应式布局</h1>
</div>
<div class="topnav">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
<a href="#about">关于</a>
</div>
<div class="row">
<div class="column left">左栏内容</div>
<div class="column middle">中间栏内容</div>
<div class="column right">右栏内容</div>
</div>
<div class="footer">
<p>页脚内容</p>
</div>
</body>
</html>
b.css
/* 全局样式 */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
text-align: center;
padding: 20px;
}
/* 导航栏样式 */
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 布局样式 */
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33.33%;
padding: 20px;
}
.left {
background-color: #aaa;
}
.middle {
background-color: #bbb;
}
.right {
background-color: #ccc;
}
/* 底部样式 */
.footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
/* 响应式布局 */
@media screen and (max-width: 800px) {
.column {
flex: 100%;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
c.具体实现方法解析
a.视口元数据
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这段代码确保视口宽度与设备宽度一致，并设置初始缩放级别为1。这样可以确保页面在不同设备上正确缩放和显示。
b.全局样式
* {
box-sizing: border-box;
}
使用box-sizing: border-box;，确保所有元素的padding和border都包含在元素的总宽度和高度内。
c.弹性盒子布局
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33.33%;
padding: 20px;
}
使用flex和flex-wrap创建一个弹性容器，使得列在小屏幕上可以换行。每个列使用flex: 33.33%;来设置宽度
d.媒体查询
@media screen and (max-width: 800px) {
.column {
flex: 100%;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
第一个媒体查询：当屏幕宽度小于800px时，将每个列的宽度设置为100%，使得列在小屏幕设备上垂直排列。
第二个媒体查询：当屏幕宽度小于400px时，将导航栏的链接设置为块级元素，并使它们占满整个宽度，从而在小屏幕设备上垂直排列导航链接。
1.9 div居中1
00.属性
元素居中对齐
文本居中对齐
图片居中对齐
左右对齐 - 使用定位方式
左右对齐 - 使用 float 方式
垂直居中对齐 - 使用 padding
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
01.属性选项
a.元素居中对齐
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
b.文本居中对齐
.text-center {
text-align: center;
border: 3px solid green;
}
c.图片居中对齐
img {
display: block;
margin: auto;
width: 40%;
}
d.左右对齐 - 使用定位方式
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
e.左右对齐 - 使用 float 方式
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
f.垂直居中对齐 - 使用 padding
.center {
padding: 70px 0;
border: 3px solid green;
}
g.垂直居中 - 使用 line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
h.垂直居中 - 使用 position 和 transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 对齐示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.text-center {
text-align: center;
border: 3px solid green;
}
img {
display: block;
margin: auto;
width: 40%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.float-right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.padding-center {
padding: 70px 0;
border: 3px solid green;
}
.line-height-center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.transform-center {
height: 200px;
position: relative;
border: 3px solid green;
}
.transform-center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>CSS 对齐示例</h2>
<div class="center">我是居中的元素</div>
<div class="text-center">文本居中对齐</div>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<div class="right">右对齐的元素</div>
<div class="float-right">浮动右侧的元素</div>
<div class="padding-center">我是垂直居中的元素</div>
<div class="line-height-center">我是垂直居中的元素</div>
<div class="transform-center">
<p>我是使用transform垂直居中的元素</p>
</div>
</body>
</html>
1.10 div居中2
00.总结
a.水平居中
行内元素水平居中
块级元素水平居中：
定义宽度块元素
不定义宽度块元素：
方法1：设置 display: table
方法2：设置inline-block（多个块状元素）
方法3：设置flex布局 推荐
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
b.垂直居中
单行文本垂直居中
多行文本垂直居中
块级元素垂直
方法1：flex布局 推荐
方法2：利用position和top和负margin（需知宽高）
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
方法4：利用position和top和transform
c.水平垂直居中
方法1：绝对定位+margin:auto
方法2：绝对定位+负margin
方法3：绝对定位+transform
方法4:flex布局 推荐
方法5：table-cell实现居中
01.水平居中
a.行内元素水平居中
行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。
<div class="center">水平居中</div>
.center{
text-align:center;
}
b.块级元素水平居中
a.定义宽度块元素
<div class="width-box"></div>
.width-box {
width: 100px;
margin: 0 auto;
border: 1px solid red;
}
b.不定义宽度块元素
方法1：设置 display: table
<div class="no-width">不确定宽度1</div>
.no-width {
display: table;
margin: 0 auto;
border: 1px solid red;
}
-------------------------------------------------------------------------------------------------
方法2：设置inline-block（多个块状元素）
<div class="no-width2">
<div class="inlineblock-div">不确定宽度2</div>
<div class="inlineblock-div">不确定宽度2</div>
</div>
.no-width2 {
text-align: center;
}
.inlineblock-div {
display: inline-block;
}
-------------------------------------------------------------------------------------------------
方法3：设置flex布局 推荐
<div class="no-width3">
<div class="flex-div">不确定宽度3</div>
<div class="flex-div">不确定宽度3</div>
</div>
.no-width3 {
display: flex;
justify-content: center;
}
-------------------------------------------------------------------------------------------------
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
02.垂直居中
a.单行文本垂直居中
设置padding-top=padding-bottom
设置line-height=height
b.多行文本垂直居中
通过设置父元素dislpay:table，子元素display:table-cell和vertical-align:middle;
<div class="center">
<div class="table-div">多行文本垂直居中</div></div>
.center {
width: 100px;
height: 100px;
display: table;
border: 1px solid red;
}
.table-div {
display: table-cell;
vertical-align: middle;
}
c.块级元素垂直
方法1：flex布局 推荐
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值
<div class="center">
<div>文本垂直居中</div>
</div>
.center {
width: 100px;
height: 100px;
display: flex;
aligin-items: center;
border: 1px solid red;
}
-----------------------------------------------------------------------------------------------------
方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
width: 150px;
height: 50px;
line-height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background: red;
}
-----------------------------------------------------------------------------------------------------
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
width: 150px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
-----------------------------------------------------------------------------------------------------
方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
line-height: 50px;
position: absolute;
top: 50%;
transform: translate(0,-50%);
background: red;
}
上述的块级垂直居中方法，稍加改动，即可成为块级水平居中方法，如top/bottom换成left/right
transform方法，可用于未知元素大小的居中
03.水平垂直居中
方法1：绝对定位+margin:auto
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
---------------------------------------------------------------------------------------------------------
方法2：绝对定位+负margin
div{
width:200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
---------------------------------------------------------------------------------------------------------
方法3：绝对定位+transform
div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%; /* 定位父级的50% */
top: 50%;
transform: translate(-50%,-50%); /*自己的50% */
}
---------------------------------------------------------------------------------------------------------
方法4:flex布局 推荐
.box {
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* 只要三句话就可以实现不定宽高水平垂直居中 */
}
.box > div {
background: red;
width: 200px;
height: 200px;
}
---------------------------------------------------------------------------------------------------------
方法5：table-cell实现居中
设置
display:table-cell;
text-align:center;
vertical-align: middle;
1.11 浮动清除
00.清除浮动有哪些方式？比较好的方式是哪一种？
（1）父级div定义height（高度）；
（2）父级div也浮动，需要定义width（宽度）；
（3）父级div定义 伪类:after 和 设置属性zoom:1；（比较好的方式）
（4）父级div定义，设置属性 overflow:hidden、overflow:auto、overflow:scroll；
（5）父级div定义，设置属性 display:table、display:flex；
（6）结尾处加空div标签，设置属性 clear:both；
（7）结尾处加<br>（换行标签）设置属性 clear:both。
01.示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动示例</title>
<style>
.container {
width: 100%;
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
}
.box {
float: left;
width: 45%;
height: 100px;
margin: 10px;
background-color: #f4f4f4;
border: 1px solid #ccc;
}
/* 方法 3: 使用伪类 :after 和 zoom:1 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1; /* IE 6/7 支持 */
}
/* 方法 4: 使用 overflow: hidden */
.overflow-hidden {
overflow: hidden;
}
/* 方法 5: 使用 display: table 和 display: flex */
.display-table {
display: table;
width: 100%;
}
.display-flex {
display: flex;
}
/* 方法 6: 使用 clear: both 的空 div */
.clear-empty-div {
clear: both;
height: 0;
visibility: hidden;
}
/* 方法 7: 使用 <br> 标签清除浮动 */
.clear-br {
clear: both;
}
</style>
</head>
<body>
<!-- 方法 1: 父级 div 定义高度 -->
<div class="container" style="height: 150px;">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 2: 父级 div 也浮动，需要定义宽度 -->
<div class="container" style="float: left; width: 100%;">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 3: 使用伪类 :after 和 zoom:1 -->
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 4: 使用 overflow: hidden -->
<div class="container overflow-hidden">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 5: 使用 display: table 和 display: flex -->
<div class="display-table">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="display-flex">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 6: 使用 clear: both 的空 div -->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="clear-empty-div"></div> <!-- 空 div -->
</div>
<!-- 方法 7: 使用 <br> 标签清除浮动 -->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<br class="clear-br" />
</div>
</body>
</html>
1.12 滚动条隐藏
01.使用 overflow: hidden
将 overflow 属性设置为 hidden，可以完全隐藏滚动条。
a.隐藏整个页面的滚动条
在 body 元素上应用以下样式：
body {
overflow: hidden;
}
b.隐藏特定元素的滚动条
在你想隐藏滚动条的特定元素上应用以下样式：
.container {
overflow: hidden;
}
02.使用 overflow-x 和 overflow-y
如果你只想隐藏水平或垂直滚动条，可以分别使用 overflow-x 和 overflow-y。
a.隐藏水平滚动条
body {
overflow-x: hidden;
}
b.隐藏垂直滚动条
body {
overflow-y: hidden;
}
03.结合使用 overflow 和 position
在某些情况下，你可能需要结合使用 overflow 和 position 来处理滚动条。以下示例使用 position: fixed 和 overflow: hidden 隐藏滚动条：
html, body {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
04.伪元素隐藏滚动条（仅适用于 Webkit 浏览器）
对于 Webkit 浏览器（如 Chrome 和 Safari），你可以通过伪元素隐藏滚动条
/* 隐藏水平滚动条 */
::-webkit-scrollbar {
display: none;
}
/* 隐藏垂直滚动条 */
body::-webkit-scrollbar {
display: none;
}
1.13 [新]css引入
00.总结
a.分类1
1.在页面上用<link>标签引用文件；
2.当前页面<style>css样式</style>标签里写；
3.标签的style属性里写样式，(行内样式，优先级最高的一种，一般其他方式引入的样式很难影响到行内的元素)
b.分类2
内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS
外部样式表：使用外部 CSS 文件
c.分类3
a.内联样式
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
b.内部样式表
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue;
}
</style>
</head>
c.外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
01.link和@import
1.link写在html页面中，只能存在于<head>头</head>里面，而@import写在css文件中；
2.link属于XHTML标签，除了加载css外，还能用于定义rss，定义rel连接属性等作用，而@import是css提供的，只能用于加载css；
3.一般情况下，开发时把css样式文件的引用放在页面顶部，link会按照顺序加载，而@import引用的css会等到页面被加载完再加载；
4.@import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
<!-- 使用 link 引入外部 CSS 文件 -->
<link rel="stylesheet" href="styles.css">
<style>
/* 使用 @import 引入外部 CSS 文件 */
@import url('imported-styles.css');
/* 内联样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>45</td>
</tr>
</tbody>
</table>
</body>
</html>
1.14 [新]css单位
00.汇总
a.相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
-----------------------------------------------------------------------------------------------------
单位 描述
em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex 依赖于英文字母小 x 的高度
ch 数字 0 的宽度
rem rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小
vw Viewport Width，视窗宽度，1vw=视窗宽度的1%
vh Viewport Height，视窗高度，1vh=视窗高度的1%
vmin vw和vh中较小的那个
vmax vw和vh中较大的那个
%
b.绝对长度
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）
-----------------------------------------------------------------------------------------------------
单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px * 像素 (1px = 1/96th of 1in)
pt point，大约1/72英寸； (1pt = 1/72in)
pc pica，大约 12pt，1/6英寸； (1pc = 12 pt)
1.15 [新]css颜色
00.汇总
十六进制颜色
RGB颜色
RGBA颜色
RGBA（红，绿，蓝，alpha）
Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称
黑色 black #000000 rgba(0, 0, 0, 1)
白色 white #FFFFFF rgba(255, 255, 255, 1)
红色 red #FF0000 rgba(255,0,0,1)
紫色 purple #800080 rgba(128, 0, 128, 1)
绿色 green #008000 rgba(0,255,0,1)
黄色 yellow #FFFF00 rgba(255,255,0,1)
蓝色 blue #0000FF rgba(0,0,255,1)
灰色 gray #808080 rgba(128,128,128,1)
1.16 [新]css函数
00.汇总
attr() 返回选择元素的属性值
calc() 允许计算 CSS 的属性值，比如动态计算长度值
cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)
conic-gradient() 定义了一个圆锥渐变
counter() 设置计数器
hsl() 使用色相、饱和度、亮度来定义颜色
hsla() 使用色相、饱和度、亮度、透明度来定义颜色
linear-gradient() 创建一个线性渐变的图像
max() 从一个逗号分隔的表达式列表中选择最大的值作为属性的值
min() 从一个逗号分隔的表达式列表中选择最小的值作为属性的值
radial-gradient() 用径向渐变创建图像
repeating-linear-gradient() 用重复的线性渐变创建图像
repeating-radial-gradient() 类似 radial-gradient()，用重复的径向渐变创建图像
repeating-conic-gradient() 重复的圆锥渐变
rgb() 使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色
rgba() 使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色
var() 用于插入自定义的属性值
repeat() 表示轨道列表的重复片段
minmax() 定义了一个长宽范围的闭区间
1.17 [新]css计数器
01.说明
a.初始化计数器
.chapter {
counter-reset: section;
}
在 .chapter 元素中初始化名为 section 的计数器。每次遇到 .chapter 元素时，计数器 section 都会被重置。
b.设置章节标题样式
.chapter > h1 {
font-size: 24px;
margin-bottom: 20px;
}
为章节标题（h1 元素）设置样式。
c.为部分标题设置样式并使用计数器：
.chapter .section h2::before {
counter-increment: section;
content: "部分 " counter(section) ": ";
font-weight: bold;
}
在 .section 元素内的 h2 元素的 ::before 伪元素中，每次遇到 h2 元素时，增加 section 计数器的值。
使用 content 属性插入计数器的值，并在其前面添加 "部分 " 和后面添加 ": "。
设置 font-weight: bold; 使编号加粗。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 计数器示例</title>
<style>
/* 初始化计数器 */
.chapter {
counter-reset: section; /* 初始化名为 section 的计数器 */
}
/* 为章节标题设置样式 */
.chapter > h1 {
font-size: 24px;
margin-bottom: 20px;
}
/* 为部分标题设置样式并使用计数器 */
.chapter .section {
margin-bottom: 20px;
}
.chapter .section h2::before {
counter-increment: section; /* 增加 section 计数器的值 */
content: "部分 " counter(section) ": "; /* 使用计数器的值作为内容 */
font-weight: bold;
}
</style>
</head>
<body>
<div class="chapter">
<h1>章节标题</h1>
<div class="section">
<h2>部分 1</h2>
<p>这是部分 1 的内容。</p>
</div>
<div class="section">
<h2>部分 2</h2>
<p>这是部分 2 的内容。</p>
</div>
<div class="section">
<h2>部分 3</h2>
<p>这是部分 3 的内容。</p>
</div>
</div>
</body>
</html>
1.18 [新]!important
01.定义
CSS 中的 !important 规则用于增加样式的权重。
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
02.使用建议
一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important
03.何时使用!important
如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。
比如我们要让网站上所有按钮的样式都一样：
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
1.19 附：css布局
00.汇总
01.布局1
02.布局2
03.导航栏
03.导航栏
04.下拉菜单
05.提示工具
06.按钮
07.分页
08.响应式布局
09.div居中1
10.div居中2
11.浮动清除
12.滚动条隐藏
01.布局1
头部区域、菜单导航区域、内容区域、底部区域
02.布局2
a.两栏布局
浮动布局：使用 float 将两个元素并排显示。
浮动布局 + 负外边距：使用 float 和负外边距将两个元素重叠。
绝对定位：使用 position: absolute; 将两个元素固定在容器的两边。
Flex（推荐）：使用 Flexbox 实现两栏布局。
b.三栏布局
绝对定位：使用 position: absolute; 将三个元素分别固定在容器的左、中、右。
浮动 + 负外边距：使用 float 和负外边距将三个元素并排显示。
浮动定位法：使用 float 将三个元素并排显示。
Flexbox（推荐）：使用 Flexbox 实现三栏布局。
圣杯布局：使用绝对定位和设置宽度来实现圣杯布局（中间内容的宽度固定，两边内容自适应）。
03.导航栏
垂直导航栏
垂直导航栏，带边框
水平导航栏
水平导航栏，带分割线
固定在顶部的导航栏
固定在底部的导航栏
灰色水平导航栏
04.下拉菜单
基本下拉菜单
下拉菜单带链接
图片下拉菜单
导航条下拉菜单
05.提示工具
基础提示框(Tooltip)
右侧显示
左边显示
头部显示
底部显示
带箭头的提示工具
淡入效果的提示工具
06.按钮
基本按钮样式
按钮颜色
大小
圆角
边框颜色
悬停效果
阴影
禁用状态
按钮宽度
按钮组和按钮动画
07.分页
简单分页
点击及鼠标悬停分页样式
圆角样式
鼠标悬停过渡效果
带边框分页
圆角边框
分页间隔
分页字体大小
居中分页
面包屑导航
08.响应式布局
a.普通布局
布局固定，不会根据屏幕大小调整。
使用固定宽度或浮动的列。
适用于屏幕宽度较为一致的设备，无法提供良好的跨设备用户体验。
---------------------------------------------------------------------------------------------------------
主要有以下3类：
静态布局(Static Layout)：最传统、原始的Web布局设计
流式布局(Liquid Layout)：俗称百分比布局
弹性布局(Flex Layout)
b.响应式布局
布局灵活，使用百分比宽度和媒体查询进行调整。
使用 flex 或 flex-wrap 等 CSS 特性。
在不同屏幕尺寸下提供一致的用户体验，适用于各种设备（PC、平板、手机等）。
09.div居中1
元素居中对齐
文本居中对齐
图片居中对齐
左右对齐 - 使用定位方式
左右对齐 - 使用 float 方式
垂直居中对齐 - 使用 padding
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
10.div居中2
a.水平居中
行内元素水平居中
块级元素水平居中：
定义宽度块元素
不定义宽度块元素：
方法1：设置 display: table
方法2：设置inline-block（多个块状元素）
方法3：设置flex布局 推荐
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
b.垂直居中
单行文本垂直居中
多行文本垂直居中
块级元素垂直
方法1：flex布局 推荐
方法2：利用position和top和负margin（需知宽高）
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
方法4：利用position和top和transform
c.水平垂直居中
方法1：绝对定位+margin:auto
方法2：绝对定位+负margin
方法3：绝对定位+transform
方法4:flex布局 推荐
方法5：table-cell实现居中
11.浮动清除
（1）父级div定义height（高度）；
（2）父级div也浮动，需要定义width（宽度）；
（3）父级div定义 伪类:after 和 设置属性zoom:1；（比较好的方式）
（4）父级div定义，设置属性 overflow:hidden、overflow:auto、overflow:scroll；
（5）父级div定义，设置属性 display:table、display:flex；
（6）结尾处加空div标签，设置属性 clear:both；
（7）结尾处加<br>（换行标签）设置属性 clear:both。
12.滚动条隐藏
a.使用 overflow: hidden
将 overflow 属性设置为 hidden，可以完全隐藏滚动条。
a.隐藏整个页面的滚动条
在 body 元素上应用以下样式：
body {
overflow: hidden;
}
b.隐藏特定元素的滚动条
在你想隐藏滚动条的特定元素上应用以下样式：
.container {
overflow: hidden;
}
b.使用 overflow-x 和 overflow-y
如果你只想隐藏水平或垂直滚动条，可以分别使用 overflow-x 和 overflow-y。
a.隐藏水平滚动条
body {
overflow-x: hidden;
}
b.隐藏垂直滚动条
body {
overflow-y: hidden;
}
c.结合使用 overflow 和 position
在某些情况下，你可能需要结合使用 overflow 和 position 来处理滚动条。以下示例使用 position: fixed 和 overflow: hidden 隐藏滚动条：
html, body {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
d.伪元素隐藏滚动条（仅适用于 Webkit 浏览器）
对于 Webkit 浏览器（如 Chrome 和 Safari），你可以通过伪元素隐藏滚动条
/* 隐藏水平滚动条 */
::-webkit-scrollbar {
display: none;
}
/* 隐藏垂直滚动条 */
body::-webkit-scrollbar {
display: none;
}
1.20 附：css列表1
00.汇总
01.背景
02.字体
03.文本
04.链接
05.列表：li属性
06.表格
07.表单
08.盒子继承
09.行内元素/块级元素/空元素
10.框大小box-sizing
11.弹性盒子flexbox
12.显示方式display
13.选择器
01.背景
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
---------------------------------------------------------------------------------------------------------
css3：
background-clip 规定背景的绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景图片的尺寸
02.字体
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
---------------------------------------------------------------------------------------------------------
css3：
font-family 指定字体名称
src 定义字体文件的 URL
font-stretch 定义字体的拉伸方式
font-style 定义字体的样式
font-weight 定义字体的粗细
unicode-range 定义字体支持的 Unicode 字符范围
03.文本
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本 水平
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐 垂直
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
---------------------------------------------------------------------------------------------------------
css3：
hanging-punctuation 规定标点字符是否位于线框之外
punctuation-trim 规定是否对标点字符进行修剪
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-shadow 向文本添加阴影
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
04.链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
05.列表：li属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
06.表格
表格边框 指定CSS表格边框，使用border属性。
折叠边框 border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
表格宽度和高度 Width和height属性定义表格的宽度和高度。
表格文字对齐 表格中的文本对齐和垂直对齐属性。 text-align属性设置水平对齐方式，向左，右，或中心：
表格填充 如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
表格颜色 指定边框的颜色，和th元素的文本和背景颜色：
07.表单
输入框样式 使用 width 属性来设置输入框的宽度：
输入框填充 使用 padding 属性可以在输入框中添加内边距。
输入框边框 使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角
输入框颜色 可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色
输入框聚焦 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。 使用 :focus 选择器可以设置输入框在获取焦点时的样式
输入框图标 如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：
带动画的搜索框 以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。
文本框样式(textarea) 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）
下拉菜单样式(select)
按钮样式(button)
08.盒子继承
01.只定义每层盒子特性，垂直瀑布
a.区别
IE盒模型和标准盒模型的区别：两者的区别在于content的不同，IE盒模型的content包括border、padding
当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式；
当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式；
当使用inherit时：页面将从父元素继承box-sizing的值；
b.计算公式
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
c.下面的例子中的元素的总宽度为 450px：
div {
width: 300px; content
border: 25px solid green; border
padding: 25px; padding
margin: 25px; margin
}
---------------------------------------------------------------------------------------------------------
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
02.属性继承
a.可继承属性
a.字体属性
font-family: 字体系列
font-size: 字体大小
font-style: 字体样式（正常、斜体等）
font-weight: 字体粗细
font-variant: 字体变体（小型大写等）
line-height: 行高
b.文本属性
text-align: 文本对齐方式
text-indent: 首行缩进
text-transform: 文本转换（大写、小写等）
white-space: 空格处理
word-spacing: 单词间距
c.颜色和背景
color: 文本颜色
visibility: 可见性
list-style: 列表样式
quotes: 引用样式（引号）
d.表格属性
border-collapse: 边框合并
border-spacing: 边框间距
caption-side: 表格标题位置
empty-cells: 空单元格的显示
table-layout: 表格布局
e.其他属性
inherit: 强制继承父元素的属性值
direction: 文本方向（从左到右或从右到左）
text-decoration: 文本装饰（下划线等）
text-shadow: 文本阴影
02.不可继承的属性：
a.盒子模型属性
margin: 外边距
padding: 内边距
border: 边框
width: 宽度
height: 高度
max-width: 最大宽度
max-height: 最大高度
min-width: 最小宽度
min-height: 最小高度
b.背景属性
background: 背景（简写属性）
background-color: 背景颜色
background-image: 背景图像
background-repeat: 背景图像重复
background-position: 背景图像位置
background-size: 背景图像大小
c.布局属性
display: 显示类型（块、行内、行内块等）
position: 定位类型（静态、相对、绝对、固定）
top, right, bottom, left: 定位偏移量
float: 浮动
clear: 清除浮动
overflow: 溢出处理
flex, grid: 布局模型
d.视觉效果属性
opacity: 不透明度
visibility: 可见性
z-index: 层叠顺序
box-shadow: 盒子阴影
text-shadow: 文本阴影
e.列表属性
list-style: 列表样式（简写属性）
list-style-type: 列表项标记类型
list-style-position: 列表项标记位置
list-style-image: 列表项标记图像
f.其他属性
cursor: 鼠标指针样式
float: 浮动
clip: 裁剪区域
resize: 调整大小
transition: 过渡效果
transform: 变形
03.优先级算法
a.总结1
1.优先级就近原则，同权重情况下样式定义最近者为准
2.载入样式以最后载入的定位为准
3.!important > id > class > tag
4.!important > style行内样式 > 内联样式 > 外联样式【根据css放置位置计算权重】
b.总结2
a.优先级规则
!important：最高优先级，不管其他规则的优先级如何，只要声明了!important，该规则都会被应用。
内联样式（元素的style属性）：权重为1000。
ID选择器：权重为100。
类选择器、属性选择器和伪类：权重为10。
元素选择器和伪元素：权重为1。
通配符选择器（*）、子选择器（>）、相邻兄弟选择器（+）、一般兄弟选择器（~）：权重为0。
b.CSS优先级的计算
权重的计算方式是基于选择器的各个部分来进行的。例如，选择器#id .class的权重为100（ID选择器） + 10（类选择器） = 110。
当两个选择器的优先级相同时，后定义的规则会覆盖先定义的规则。
09.行内元素/块级元素/空元素
a.行内元素
css的display属性是inline，
不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，
其宽度随元素的内容而变化，
设置高度和宽度的话会不起作用，
水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，
但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
b.块级元素
css的display属性是block，会独占一行。
默认情况下，其宽度自动填满其父元素宽度，宽高可以设置，但设置了宽度还是独占一行。
-----------------------------------------------------------------------------------------------------
修改display为block，可以把行内元素变成块级元素，
修改display为inline，可以把块级元素变成行内元素。
修改display为inline-block时，可以使行内元素保持在一行内，但具有块级元素的特点。
c.行内块元素的兼容性使用
div {
display:inline-block;
*display:inline;
*zoom:1;
}
10.框大小box-sizing
属性: box-sizing
属性值: content-box（默认值）
计算方式：width 和 height 仅指内容区域的宽度和高度，内边距（padding）和边框（border）会在这些尺寸之外额外加上，从而使实际的盒子大小变得更大。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box;
}
实际计算方式：实际宽度 = width + padding-left + padding-right + border-left + border-right
属性值: border-box
计算方式：width 和 height 包括内边距和边框，所以设置的宽度和高度包括所有的内边距和边框，从而使盒子在页面上显示的大小更为精确。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}
实际计算方式：实际宽度 = width（包括 padding 和 border）
属性值: inherit
inherit: 当 box-sizing 设置为 inherit 时，当前元素的 box-sizing 属性值将继承自其父元素。
如果父元素的 box-sizing 值是 border-box，则当前元素也会是 border-box。
如果父元素的 box-sizing 值是 content-box，则当前元素也会是 content-box
11.弹性盒子flexbox
少用浮动、相对位置、绝对位置
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
a.flex-direction 规定元素排列方向
row：从左往右排列（默认值）
row-reverse：从右往左排列
column：从上往下排列
column-reverse：从下往上排列
b.flex-wrap 规定元素是否换
nowrap：不换行（默认值）
wrap：换行，第一行在上面
wrap-reverse：反向换行，第一行在下面
c.flex-flow（flex-direction + flex-wrap）
默认row + nowrap
d.justify-content 横向排列
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
e.align-items 纵向排列
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
f.align-content 行与行之间的排列分布
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
g.单独设置子民
a.order子民单独排序
order:8; order:1; order:-2;
b.flex-grow 子民分配剩余空间比例
flex-grow:2; flex-grow:1
c.flex-shrink 子民如何收缩空间
flex-shrink:2; felx-shrink:1;
d.align-self 单独设置子民的位置
auto
flex-start
flex-end
center
baseline
strech
12.显示方式display
block：块级元素，会占据一整行。
inline：行内元素，不会占据整行。
inline-block：行内块元素，既具有块级元素的特性，又具有行内元素的特性。
flex：弹性盒子布局。
grid：块级网格容器。
inline-grid：行内网格容器。
none：隐藏元素，元素不占据空间。
---------------------------------------------------------------------------------------------------------
none: 元素不显示，且不占据任何空间。
block: 元素作为块级元素显示，占据父元素的全部宽度，并在前后添加换行符。
inline: 元素作为内联元素显示，只占据其内容所需的宽度，不会在前后添加换行符。
inline-block: 元素以内联形式显示，但可以设置宽度和高度，同时保持内联元素的特性。
flex: 元素作为弹性盒子容器显示，启用弹性布局模型。
inline-flex: 元素以内联形式显示，作为弹性盒子容器。
grid: 元素作为网格容器显示，启用网格布局模型。
inline-grid: 元素以内联形式显示，作为网格容器。
table: 元素以表格形式显示。
table-row: 元素以表格行形式显示。
table-cell: 元素以表格单元格形式显示。
list-item: 元素作为列表项显示。
contents: 元素的子元素作为它们的父元素显示，元素本身消失但子元素仍然保留。
run-in: 元素根据上下文显示为块级或内联级（较少使用）。
initial: 将 display 属性重置为其初始值。
inherit: 继承父元素的 display 属性值。
revert: 将 display 属性重置为用户代理样式表中的值。
unset: 移除当前元素上的 display 属性，行为类似于 initial 和 inherit 的组合。
---------------------------------------------------------------------------------------------------------
隐藏元素：display:none 或 visibility:hidden
13.选择器
01.总结
通配符选择器 *
id选择器 #id
类选择器 .class 类.
标签选择器 div、h1-h6、p、span
---------------------------------------------------------------------------------------------------------
后代选择器 li a 子代、孙子代、... 样式会继承，选择<ul>，会给<ul>下面的<li>起作用
交集选择器 h1.hidden-display 样式不会继承，ul.mystyle{...}无法定位样式，会失效
并集选择器 h1,h2,p h1，h2会一起使这两个标签拥有一样的样式
---------------------------------------------------------------------------------------------------------
相邻兄弟选择器 h1 + p 只对后面的元素有效，无法选中前面的元素
普通兄弟选择器 e1 ~ e2 只对后面的元素有效，无法选中前面的元素
子元素选择器 ul > li 子代
---------------------------------------------------------------------------------------------------------
属性选择器 a[rel = "external"]
伪类选择器 a: hover、li:nth-child、li:nth-of-type
02.属性选择器
选择具有指定属性的元素 选择所有具有 href 属性的 <a> 元素 a[href] {color: blue;}
选择具有指定属性且其值完全匹配的元素 选择所有 type 属性值为 text 的 <input> 元素 input[type="text"] {border: 1px solid gray;}
选择具有指定属性且其值以指定的值开头的元素 选择所有 id 属性值以 btn- 开头的元素 [id^="btn-"] {background-color: lightblue;}
择具有指定属性且其值以指定的值结尾的元素 选择所有 href 属性值以 .jpg 结尾的链接 a[href$=".jpg"] { border: 2px solid red;}
选择具有指定属性且其值包含指定的值(用空格分隔)的元素 选择所有 class 属性值包含 highlight 的元素 [class~="highlight"] {background-color: yellow;}
选择具有指定属性且其值包含指定的值(以分隔符分隔)的元素 选择所有 lang 属性值以 en 开头的元素 [lang|="en"] {color: green;}
03.CSS伪类选择器
:after 在每个 <p> 元素之后插入内容。 p:after {content: " - Suffix";color: orange;}
:before 在每个 <p> 元素之前插入内容。 p:before {content: "Prefix: ";color: orange;}
:hover 选择鼠标悬停在元素上时的状态。 a:hover { color: red; }
:active 选择被用户点击的元素状态。 a:active { color: green; }
:focus 选择具有输入焦点的元素（如被选中的文本框）。 input:focus { border-color: blue; }
:visited 选择用户访问过的链接。 a:visited { color: purple; }
:link 选择尚未访问的链接。 a:link { color: blue; }
:first-child 选择父元素中的第一个子元素。 p:first-child { color: orange; }
:last-child 选择父元素中的最后一个子元素。 p:last-child { color: orange; }
:nth-child(n) 选择父元素中的第 n 个子元素（n 可以是数字、公式或关键词） li:nth-child(2) { color: red; }
:nth-of-type(n) 选择父元素中指定类型的第 n 个子元素（与 :nth-child 类似，但只计算特定类型的元素） p:nth-of-type(2) { color: red; }
:not(selector) 选择不匹配指定选择器的元素。 p:not(.special) { color: gray; }
:first-letter 选择每个 <p> 元素的第一个字母 p:first-letter {font-size: 2em;color: red;}
:first-line 选择每个 <p> 元素的第一行。 p:first-line {font-weight: bold;color: blue;}
:first-child 选择父元素中的第一个子元素为 <p> 元素的情况下的 <p> 元素。 p:first-child {color: green;}
04.CSS3伪类选择器
:nth-last-child(n) 选择从父元素末尾开始的第 n 个子元素。 li:nth-last-child(2) { color: red; }
:nth-last-of-type(n) 选择父元素中从末尾开始的第 n 个指定类型的子元素。 p:nth-last-of-type(2) { color: red; }
:first-of-type 选择父元素中第一个指定类型的子元素。 p:first-of-type { color: red; }
:last-of-type 选择父元素中最后一个指定类型的子元素。 p:last-of-type { color: red; }
:checked 选择已选中的 <input> 或 <option> 元素。 input:checked { background-color: yellow; }
:enabled 选择启用的表单元素。 input:enabled { border-color: blue; }
:disabled 选择禁用的表单元素。 input:disabled { background-color: gray; }
:required 选择必填表单元素。 input:required { border: 2px solid red; }
:optional 选择非必填表单元素。 input:optional { border: 2px solid green; }
:valid 选择验证通过的表单元素。 input:valid { border-color: green; }
:invalid 选择验证失败的表单元素。 input:invalid { border-color: red; }
:target 选择当前URL中的目标元素（即URL中包含的片段标识符对应的元素）。 #section:target { background-color: lightblue; }
:lang(language) 选择使用特定语言的元素。 p:lang(en) { color: blue; }
1.21 附：css列表2
00.汇总
01.div尺寸
02.边框
03.轮廓
04.外边距
05.内边距
06.定位（相对位置，父div移动，子div也会移动）
07.溢出：Overflow属性
08.浮动
09.网格布局
10.网格容器
11.网格元素
01.div尺寸
width 设置元素的宽度。
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
02.边框
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-radius 设置圆角的边框。
---------------------------------------------------------------------------------------------------------
css3边框：
border-image 设置所有边框图像的速记属性
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影
---------------------------------------------------------------------------------------------------------
css3圆角：
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
03.轮廓
outline 一个简写属性，用于在一个声明中设置所有的轮廓属性。
outline-color 用于设置轮廓的颜色
outline-style 用于设置轮廓的样式
outline-width 用于设置轮廓的宽度
04.外边距
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
一个值： 四个方向的边距相同。 margin: 20px;
两个值： 第一个值设置上下边距，第二个值设置左右边距。 margin: 20px 10px;
三个值： 第一个值设置上边距，第二个值设置左右边距，第三个值设置下边距。 margin: 20px 10px 30px;
四个值： 顺时针方向依次为上、右、下、左边距。（顺时针） margin: 20px 10px 30px 40px;
05.内边距
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充
06.定位（相对位置，父div移动，子div也会移动）
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移
clip 用于裁剪一个绝对定位的元素（已被 clip-path 取代，clip 已过时）
cursor 定义当鼠标悬停在元素上时显示的光标样式
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移
overflow 定义当元素的内容溢出其区域时的处理方式
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域
position 指定元素的定位类型
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移
top 定义了定位元素的上外边距边界与其包含块上边界之间的偏移
z-index 设置元素的堆叠顺序，控制元素在 Z 轴上的层次关系
07.溢出：Overflow属性
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
08.浮动
float 指定一个元素是否允许浮动，以及浮动的方向
clear 属性控制一个元素的浮动行为，指定元素周围不允许出现浮动元素
09.网格布局
display 用于定义元素是否为网格容器
column-gap 指定列之间的间隙
gap row-gap 和 column-gap 的简写属性
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns 指的默认的列尺寸
grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows 指的默认的行尺寸
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-column-end 指定网格元素列的结束位置
grid-column-gap 指定网格元素的间距大小
grid-column-start 指定网格元素列的开始位置
grid-gap grid-row-gap 和 grid-column-gap 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
grid-row-end 指定网格元素行的结束位置
grid-row-gap 指定网格元素的行间距
grid-row-start 指定网格元素行的开始位置
grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas 指定如何显示行和列，使用命名的网格元素
grid-template-columns 指定列的大小，以及网格布局中设置列的数量
grid-template-rows 指定网格布局中行的大小
row-gap 指定两个行之间的间距
10.网格容器
grid-template-columns 定义网格中的列数量和宽度
grid-template-rows 定义网格中的行数量和高度
grid-template-areas 定义网格区域的布局
grid-column-gap 指定网格元素的间距大小
grid-row-gap 指定网格元素的行间距
justify-items 定义网格单元在每个单元格内的水平对齐方式
align-items 定义网格单元在每个单元格内的垂直对齐方式
justify-content 定义整个网格在容器内的水平对齐方式
align-content 定义整个网格在容器内的垂直对齐方式
11.网格元素
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
1.22 附：css3列表
00.汇总
01.[扩]边框
02.[扩]圆角
03.[扩]背景
04.渐变
05.[扩]文本效果
06.[扩]字体
07.2D转换
08.3D转换
09.过渡
10.动画
11.多列
12.用户界面
13.图片
01.[扩]边框
border-image 设置所有边框图像的速记属性
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影
02.[扩]圆角
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
03.[扩]背景
background-clip 规定背景的绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景图片的尺寸
04.渐变
a.CSS3线性渐变
线性渐变 - 从上到下（默认情况下）
属性：background-image: linear-gradient(color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(#e66465, #9198e5);
-----------------------------------------------------------------------------------------------------
线性渐变 - 从左到右
属性：background-image: linear-gradient(to direction, color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(to right, red, yellow);
-----------------------------------------------------------------------------------------------------
线性渐变 - 对角
属性：background-image: linear-gradient(to direction, color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(to bottom right, red, yellow);
-----------------------------------------------------------------------------------------------------
使用角度
属性：background-image: linear-gradient(angle, color-stop1, color-stop2);
示例：background-image: linear-gradient(-90deg, red, yellow);
-----------------------------------------------------------------------------------------------------
使用多个颜色节点
属性：background-image: linear-gradient(color-stop1, color-stop2, color-stop3, ...);
示例：background-image: linear-gradient(red, yellow, green);
-----------------------------------------------------------------------------------------------------
使用透明度（transparent）
属性：background-image: linear-gradient(to direction, rgba(color, transparency), rgba(color, transparency));
示例：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
-----------------------------------------------------------------------------------------------------
重复的线性渐变
属性：background-image: repeating-linear-gradient(color-stop1, color-stop2, ...);
示例：background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
b.CSS3 径向渐变
设置形状
属性：background-image: radial-gradient(shape, color-stop1, color-stop2, ...);
选项：
circle: 圆形
ellipse: 椭圆形
示例：background-image: radial-gradient(circle, red, yellow, green);
-----------------------------------------------------------------------------------------------------
不同尺寸大小关键字的使用
属性：background-image: radial-gradient(size at position, color-stop1, color-stop2, ...);
选项：
closest-side: 渐变区域到最近的边
farthest-side: 渐变区域到最远的边
closest-corner: 渐变区域到最近的角落
farthest-corner: 渐变区域到最远的角落
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
-----------------------------------------------------------------------------------------------------
重复的径向渐变
属性：background-image: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
示例：background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
05.[扩]文本效果
hanging-punctuation 规定标点字符是否位于线框之外
punctuation-trim 规定是否对标点字符进行修剪
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-shadow 向文本添加阴影
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
06.[扩]字体
font-family 指定字体名称
src 定义字体文件的 URL
font-stretch 定义字体的拉伸方式
font-style 定义字体的样式
font-weight 定义字体的粗细
unicode-range 定义字体支持的 Unicode 字符范围
07.2D转换
a.新转换属性
transform 适用于2D或3D转换的元素 用于将元素进行各种转换（如移动、旋转、缩放和倾斜）。
transform-origin 允许您更改转化元素位置 用于设置转换的原点，默认值为元素的中心，可以使用 px 或 % 来设置。
b.2D转换方法
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 n1 到 n6 为数值，表示转换的参数。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 x: 水平移动的距离，y: 垂直移动的距离。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 n: 水平移动的距离
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 n: 垂直移动的距离。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 x: 水平缩放因子，y: 垂直缩放因子。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 n: 水平缩放因子。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。 n: 垂直缩放因子。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 angle: 旋转角度，可以是负值或正值。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 x-angle: X 轴的倾斜角度，y-angle: Y 轴的倾斜角度。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 angle: X 轴的倾斜角度。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。 angle: Y 轴的倾斜角度。
08.3D转换
a.转换属性
transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
b.3D转换方法
matrix3d(n,n,n,n,n,n,,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
09.过渡
transition 简写属性，用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认是 0
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
transition-delay 规定过渡效果何时开始。默认是 0
10.动画
@keyframes 规定动画
animation 所有动画属性的简写属性
animation-name 规定 @keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function 规定动画的速度曲线。默认是 "ease"
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-delay 规定动画何时开始。默认是 0
animation-iteration-count 规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"
11.多列
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性
12.用户界面
appearance 允许您使一个元素的外观像一个标准的用户界面元素
box-sizing 允许你以适应区域而用某种方式定义某些元素
icon 为创作者提供了将元素设置为图标等价物的能力
nav-down 指定在何处使用箭头向下导航键时进行导航
nav-index 指定一个元素的Tab的顺序
nav-left 指定在何处使用左侧的箭头导航键进行导航
nav-right 指定在何处使用右侧的箭头导航键进行导航
nav-up 指定在何处使用箭头向上导航键时进行导航
outline-offset 外轮廓修饰并绘制超出边框的边缘
resize 指定一个元素是否是由用户调整大小
13.图片
a.css图片属性
background 用于设置背景图像、颜色、位置等。 background: url(image.jpg) no-repeat center center;
background-color 设置背景颜色。 background-color: #fff;
background-image 设置背景图像。 background-image: url(image.jpg);
background-position 设置背景图像的位置。 background-position: center;
background-repeat 设置背景图像的重复方式。 background-repeat: no-repeat;
background-size 设置背景图像的尺寸。 background-size: cover;
border-image 允许你将图像用作边框。 border-image: url(border.png) 30 round;
border-image-source 设置用作边框的图像。 border-image-source: url(border.png);
border-image-slice 定义图像的哪些部分用作边框。 border-image-slice: 30%;
border-image-width 设置边框图像的宽度。 border-image-width: 10px;
border-image-outset 设置边框图像的外扩。 border-image-outset: 10px;
border-image-repeat 设置边框图像的重复方式。 border-image-repeat: repeat;
clip 控制元素的可视区域（已废弃，使用 clip-path 代替）。 clip: rect(0, 100px, 100px, 0);
mask 用于应用遮罩效果。 mask: url(mask.svg);
mask-image 设置用于遮罩的图像。 mask-image: url(mask.svg);
mask-size 设置遮罩图像的尺寸。 mask-size: cover;
mask-repeat 设置遮罩图像的重复方式。 mask-repeat: no-repeat;
mask-position 设置遮罩图像的位置。 mask-position: center;
mask-composite 控制遮罩图像的合成模式（已废弃，使用 mask-mode 代替） mask-composite: add;
mask-mode 设置遮罩图像的模式。 mask-mode: alpha;
mask-origin 设置遮罩图像的原点。 mask-origin: content-box;
mask-clip 设置遮罩图像的剪切区域。 mask-clip: border-box;
mask-border 设置边框遮罩效果。 mask-border: url(border-mask.svg);
mask-border-source 设置用于边框遮罩的图像。 mask-border-source: url(border-mask.svg);
mask-border-slice 设置边框遮罩的切片区域。 mask-border-slice: 30%;
mask-border-width 设置边框遮罩的宽度。 mask-border-width: 10px;
mask-border-outset 设置边框遮罩的外扩。 mask-border-outset: 10px;
mask-border-repeat 设置边框遮罩的重复方式。 mask-border-repeat: repeat;
b.css3图片属性
background-attachment 设置背景图像是否固定在视口中。 background-attachment: fixed;
background-clip 设置背景的绘制区域。 background-clip: border-box;
background-origin 设置背景图像的原点。 background-origin: padding-box;
background-size CSS3 扩展了背景图像的尺寸控制。 background-size: contain;
object-fit 控制替代元素的内容如何适配其盒子。 object-fit: cover;
object-position 控制替代元素内容的位置。 object-position: center;
clip-path 定义元素的可视区域。 clip-path: circle(50% at 50% 50%);
mask-type 指定遮罩图像的类型。 mask-type: luminance;
mask-mode 允许指定遮罩模式。 mask-mode: alpha;
mask-composite 定义多个遮罩的合成方式（CSS2废弃，CSS3mask-mode替代） mask-composite: add;
mask-image 允许使用图像作为遮罩。 mask-image: url(mask.svg);
2 css
2.1 css引入
01.总结1
1.在页面上用<link>标签引用文件；
2.当前页面<style>css样式</style>标签里写；
3.标签的style属性里写样式，(行内样式，优先级最高的一种，一般其他方式引入的样式很难影响到行内的元素)
02.总结2
内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS
外部样式表：使用外部 CSS 文件
03.总结3
a.内联样式
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
b.内部样式表
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue;
}
</style>
</head>
c.外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
04.link和@import
1.link写在html页面中，只能存在于<head>头</head>里面，而@import写在css文件中；
2.link属于XHTML标签，除了加载css外，还能用于定义rss，定义rel连接属性等作用，而@import是css提供的，只能用于加载css；
3.一般情况下，开发时把css样式文件的引用放在页面顶部，link会按照顺序加载，而@import引用的css会等到页面被加载完再加载；
4.@import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
2.2 css优化
01.总结
1.避免过度约束；
2.避免后代选择符；
3.避免链式选择符；
4.使用紧凑的语法；
5.避免不必要的命名空间；
6.避免不必要的重复；
7.最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么；
8.避免！important，可以选择其他选择器；
9.尽可能的精简规则，你可以合并不同类里的重复规则；
2.3 css选择器
01.总结
通配符选择器 *
id选择器 #id
类选择器 .class 类.
标签选择器 div、h1-h6、p、span
---------------------------------------------------------------------------------------------------------
后代选择器 li a 子代、孙子代、... 样式会继承，选择<ul>，会给<ul>下面的<li>起作用
交集选择器 h1.hidden-display 样式不会继承，ul.mystyle{...}无法定位样式，会失效
并集选择器 h1,h2,p h1，h2会一起使这两个标签拥有一样的样式
---------------------------------------------------------------------------------------------------------
相邻兄弟选择器 h1 + p 只对后面的元素有效，无法选中前面的元素
普通兄弟选择器 e1 ~ e2 只对后面的元素有效，无法选中前面的元素
子元素选择器 ul > li 子代
---------------------------------------------------------------------------------------------------------
属性选择器 a[rel = "external"]
伪类选择器 a: hover、li:nth-child、li:nth-of-type
02.并集选择器
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
每个选择器用逗号分隔，对以上代码使用分组选择器
h1,h2,p
{
color:green;
}
03.嵌套选择器：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
04.属性选择器
选择具有指定属性的元素 选择所有具有 href 属性的 <a> 元素 a[href] {color: blue;}
选择具有指定属性且其值完全匹配的元素 选择所有 type 属性值为 text 的 <input> 元素 input[type="text"] {border: 1px solid gray;}
选择具有指定属性且其值以指定的值开头的元素 选择所有 id 属性值以 btn- 开头的元素 [id^="btn-"] {background-color: lightblue;}
择具有指定属性且其值以指定的值结尾的元素 选择所有 href 属性值以 .jpg 结尾的链接 a[href$=".jpg"] { border: 2px solid red;}
选择具有指定属性且其值包含指定的值(用空格分隔)的元素 选择所有 class 属性值包含 highlight 的元素 [class~="highlight"] {background-color: yellow;}
选择具有指定属性且其值包含指定的值(以分隔符分隔)的元素 选择所有 lang 属性值以 en 开头的元素 [lang|="en"] {color: green;}
05.CSS伪类选择器
:after 在每个 <p> 元素之后插入内容。 p:after {content: " - Suffix";color: orange;}
:before 在每个 <p> 元素之前插入内容。 p:before {content: "Prefix: ";color: orange;}
:hover 选择鼠标悬停在元素上时的状态。 a:hover { color: red; }
:active 选择被用户点击的元素状态。 a:active { color: green; }
:focus 选择具有输入焦点的元素（如被选中的文本框）。 input:focus { border-color: blue; }
:visited 选择用户访问过的链接。 a:visited { color: purple; }
:link 选择尚未访问的链接。 a:link { color: blue; }
:first-child 选择父元素中的第一个子元素。 p:first-child { color: orange; }
:last-child 选择父元素中的最后一个子元素。 p:last-child { color: orange; }
:nth-child(n) 选择父元素中的第 n 个子元素（n 可以是数字、公式或关键词） li:nth-child(2) { color: red; }
:nth-of-type(n) 选择父元素中指定类型的第 n 个子元素（与 :nth-child 类似，但只计算特定类型的元素） p:nth-of-type(2) { color: red; }
:not(selector) 选择不匹配指定选择器的元素。 p:not(.special) { color: gray; }
:first-letter 选择每个 <p> 元素的第一个字母 p:first-letter {font-size: 2em;color: red;}
:first-line 选择每个 <p> 元素的第一行。 p:first-line {font-weight: bold;color: blue;}
:first-child 选择父元素中的第一个子元素为 <p> 元素的情况下的 <p> 元素。 p:first-child {color: green;}
06.CSS3伪类选择器
:nth-last-child(n) 选择从父元素末尾开始的第 n 个子元素。 li:nth-last-child(2) { color: red; }
:nth-last-of-type(n) 选择父元素中从末尾开始的第 n 个指定类型的子元素。 p:nth-last-of-type(2) { color: red; }
:first-of-type 选择父元素中第一个指定类型的子元素。 p:first-of-type { color: red; }
:last-of-type 选择父元素中最后一个指定类型的子元素。 p:last-of-type { color: red; }
:checked 选择已选中的 <input> 或 <option> 元素。 input:checked { background-color: yellow; }
:enabled 选择启用的表单元素。 input:enabled { border-color: blue; }
:disabled 选择禁用的表单元素。 input:disabled { background-color: gray; }
:required 选择必填表单元素。 input:required { border: 2px solid red; }
:optional 选择非必填表单元素。 input:optional { border: 2px solid green; }
:valid 选择验证通过的表单元素。 input:valid { border-color: green; }
:invalid 选择验证失败的表单元素。 input:invalid { border-color: red; }
:target 选择当前URL中的目标元素（即URL中包含的片段标识符对应的元素）。 #section:target { background-color: lightblue; }
:lang(language) 选择使用特定语言的元素。 p:lang(en) { color: blue; }
07.解释
a.tr:nth-child 属于伪类选择器
具体来说，nth-child 是一种结构性伪类选择器，用于选取某个元素的特定子元素。
例如，tr:nth-child(2) 会选择父元素中的第二个 <tr> 元素。
b.input[type="text"]:focus 是一个复合选择器
属性选择器：input[type="text"]
选择具有特定属性值的元素。在这个例子中，input[type="text"] 选择所有 type 属性为 text 的 input 元素。
-----------------------------------------------------------------------------------------------------
伪类选择器：:focus
选择当前获得焦点的元素。在这个例子中，:focus 选择当 input[type="text"] 元素获得焦点时应用的样式。
c.h1.hidden-display实际上是 标签选择器 与 类选择器 的组合：
h1 是标签选择器，选择所有 <h1> 元素。
.hidden-display 是类选择器，选择所有具有 hidden-display 类的元素。
此，h1.hidden-display 选择所有同时具有 h1 标签和 hidden-display 类的元素。在这个例子中，它将作用于所有 <h1> 标签且具有 hidden-display 类的元素。
2.4 css新特性
01.总结
1.CSS3实现圆角：（border-radius），阴影（box-shadow），
2.对文字加特效：阴影（text-shadow）、线性渐变（gradient）、旋转（transform）
3.旋转：transform:rotate(9deg) 、缩放：scale(0.85,0.90)、定位：translate(0px,-30px) 、倾斜：skew(-9deg,0deg)；
4.增加了更多的CSS选择器 多背景 rgba
5.在CSS3中唯一引入的伪元素是 ::selection.
6.媒体查询，多栏布局
7.border-image
2.5 css汇总
00.总结
a.分类1
a.行内元素
行内元素不会在其前后生成换行符，它们通常只占据它们对应标签的内容所需的宽度
b.块级元素
块级元素在其前后会生成换行符，并占据其父元素（容器）的全部宽度。
c.空元素
空元素（或自闭合元素）是没有内容的元素，即它们没有闭合标签
b.分类2
a.行内元素
a、b、span、img、input、strong、select、label、em、button、textarea
b.块级元素
div、ul、li、dl、dt、dd、p、h1-h6、blockquote、table
c.空元素：即系没有内容的HTML元素
br、meta、hr、link、input、img
c.分类3
a.行内元素
<a>：锚标签，用于定义超链接。
<abbr>：缩写标签，用于定义缩写。
<b>：加粗文本。
<bdo>：文本方向控制。
<br>：换行符。
<cite>：引用。
<code>：代码片段。
<em>：强调文本。
<i>：斜体文本。
<img>：图像。
<input>：输入控件。
<label>：表单标签。
<q>：短引用。
<small>：小号文本。
<span>：通用行内容器。
<strong>：强调的重要文本。
<sub>：下标文本。
<sup>：上标文本。
<time>：时间。
<u>：下划线文本。
b.块级元素
<address>：地址。
<article>：文章。
<aside>：侧边内容。
<blockquote>：长引用。
<canvas>：绘图区域。
<dd>：定义列表中的定义描述。
<div>：通用块级容器。
<dl>：定义列表。
<dt>：定义列表中的定义项。
<fieldset>：表单控制组。
<figcaption>：图注。
<figure>：图示。
<footer>：页脚。
<form>：表单。
<h1>到<h6>：标题。
<header>：页眉。
<hr>：水平线。
<li>：列表项。
<main>：页面主内容。
<nav>：导航链接。
<ol>：有序列表。
<p>：段落。
<pre>：预格式化文本。
<section>：节。
<table>：表格。
<ul>：无序列表。
c.空元素：即系没有内容的HTML元素
<area>：图像映射中的区域。
<base>：为所有页面上的链接规定默认地址或默认目标。
<br>：换行符。
<col>：表格中一列。
<embed>：嵌入外部内容。
<hr>：水平线。
<img>：图像。
<input>：输入控件。
<link>：链接到外部资源。
<meta>：元数据。
<param>：对象的参数。
<source>：媒体元素的媒体资源。
<track>：视频文本轨道。
<wbr>：建议的换行点。
01.行内元素
css的display属性是inline，
不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，
其宽度随元素的内容而变化，
设置高度和宽度的话会不起作用，
水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，
但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
02.块级元素
css的display属性是block，会独占一行。
默认情况下，其宽度自动填满其父元素宽度，宽高可以设置，但设置了宽度还是独占一行。
---------------------------------------------------------------------------------------------------------
修改display为block，可以把行内元素变成块级元素，
修改display为inline，可以把块级元素变成行内元素。
修改display为inline-block时，可以使行内元素保持在一行内，但具有块级元素的特点。
03.行内块元素的兼容性使用
div {
display:inline-block;
*display:inline;
*zoom:1;
}
2.6 css盒子继承
01.只定义每层盒子特性，垂直瀑布
a.区别
IE盒模型和标准盒模型的区别：两者的区别在于content的不同，IE盒模型的content包括border、padding
当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式；
当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式；
当使用inherit时：页面将从父元素继承box-sizing的值；
b.计算公式
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
c.下面的例子中的元素的总宽度为 450px：
div {
width: 300px; content
border: 25px solid green; border
padding: 25px; padding
margin: 25px; margin
}
---------------------------------------------------------------------------------------------------------
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
02.属性继承
a.可继承属性
a.字体属性
font-family: 字体系列
font-size: 字体大小
font-style: 字体样式（正常、斜体等）
font-weight: 字体粗细
font-variant: 字体变体（小型大写等）
line-height: 行高
b.文本属性
text-align: 文本对齐方式
text-indent: 首行缩进
text-transform: 文本转换（大写、小写等）
white-space: 空格处理
word-spacing: 单词间距
c.颜色和背景
color: 文本颜色
visibility: 可见性
list-style: 列表样式
quotes: 引用样式（引号）
d.表格属性
border-collapse: 边框合并
border-spacing: 边框间距
caption-side: 表格标题位置
empty-cells: 空单元格的显示
table-layout: 表格布局
e.其他属性
inherit: 强制继承父元素的属性值
direction: 文本方向（从左到右或从右到左）
text-decoration: 文本装饰（下划线等）
text-shadow: 文本阴影
02.不可继承的属性：
a.盒子模型属性
margin: 外边距
padding: 内边距
border: 边框
width: 宽度
height: 高度
max-width: 最大宽度
max-height: 最大高度
min-width: 最小宽度
min-height: 最小高度
b.背景属性
background: 背景（简写属性）
background-color: 背景颜色
background-image: 背景图像
background-repeat: 背景图像重复
background-position: 背景图像位置
background-size: 背景图像大小
c.布局属性
display: 显示类型（块、行内、行内块等）
position: 定位类型（静态、相对、绝对、固定）
top, right, bottom, left: 定位偏移量
float: 浮动
clear: 清除浮动
overflow: 溢出处理
flex, grid: 布局模型
d.视觉效果属性
opacity: 不透明度
visibility: 可见性
z-index: 层叠顺序
box-shadow: 盒子阴影
text-shadow: 文本阴影
e.列表属性
list-style: 列表样式（简写属性）
list-style-type: 列表项标记类型
list-style-position: 列表项标记位置
list-style-image: 列表项标记图像
f.其他属性
cursor: 鼠标指针样式
float: 浮动
clip: 裁剪区域
resize: 调整大小
transition: 过渡效果
transform: 变形
03.优先级算法
a.总结1
1.优先级就近原则，同权重情况下样式定义最近者为准
2.载入样式以最后载入的定位为准
3.!important > id > class > tag
4.!important > style行内样式 > 内联样式 > 外联样式【根据css放置位置计算权重】
b.总结2
a.优先级规则
!important：最高优先级，不管其他规则的优先级如何，只要声明了!important，该规则都会被应用。
内联样式（元素的style属性）：权重为1000。
ID选择器：权重为100。
类选择器、属性选择器和伪类：权重为10。
元素选择器和伪元素：权重为1。
通配符选择器（*）、子选择器（>）、相邻兄弟选择器（+）、一般兄弟选择器（~）：权重为0。
b.CSS优先级的计算
权重的计算方式是基于选择器的各个部分来进行的。例如，选择器#id .class的权重为100（ID选择器） + 10（类选择器） = 110。
当两个选择器的优先级相同时，后定义的规则会覆盖先定义的规则。
2.7 css弹性盒子
00.说明
a.定义（少用浮动、相对位置、绝对位置）
flexbox（弹性盒布局）可以简便、完整、响应式地实现各种页面布局，主要思想是给予容器控制内部元素高度和宽度的能力
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
b.使用
Webkit 内核的浏览器，必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
flex容器属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持
c.flex布局
flex布局是W3C提出的一种新的布局方法，它能够解决传统布局难以控制的问题
01.flex-direction 规定元素排列方向
row：从左往右排列（默认值）
row-reverse：从右往左排列
column：从上往下排列
column-reverse：从下往上排列
02.flex-wrap 规定元素是否换
nowrap：不换行（默认值）
wrap：换行，第一行在上面
wrap-reverse：反向换行，第一行在下面
03.flex-flow（flex-direction + flex-wrap）
默认row + nowrap
04.justify-content 横向排列
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
05.align-items 纵向排列
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
06.align-content 行与行之间的排列分布
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
07.单独设置子民
a.order子民单独排序
order:8; order:1; order:-2;
b.flex-grow 子民分配剩余空间比例
flex-grow:2; flex-grow:1
c.flex-shrink 子民如何收缩空间
flex-shrink:2; felx-shrink:1;
d.align-self 单独设置子民的位置
auto
flex-start
flex-end
center
baseline
strech
2.8 div居中
00.总结
a.水平居中
行内元素水平居中
块级元素水平居中：
定义宽度块元素
不定义宽度块元素：
方法1：设置 display: table
方法2：设置inline-block（多个块状元素）
方法3：设置flex布局 推荐
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
b.垂直居中
单行文本垂直居中
多行文本垂直居中
块级元素垂直
方法1：flex布局 推荐
方法2：利用position和top和负margin（需知宽高）
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
方法4：利用position和top和transform
c.水平垂直居中
方法1：绝对定位+margin:auto
方法2：绝对定位+负margin
方法3：绝对定位+transform
方法4:flex布局 推荐
方法5：table-cell实现居中
01.水平居中
a.行内元素水平居中
行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。
<div class="center">水平居中</div>
.center{
text-align:center;
}
b.块级元素水平居中
a.定义宽度块元素
<div class="width-box"></div>
.width-box {
width: 100px;
margin: 0 auto;
border: 1px solid red;
}
b.不定义宽度块元素
方法1：设置 display: table
<div class="no-width">不确定宽度1</div>
.no-width {
display: table;
margin: 0 auto;
border: 1px solid red;
}
-------------------------------------------------------------------------------------------------
方法2：设置inline-block（多个块状元素）
<div class="no-width2">
<div class="inlineblock-div">不确定宽度2</div>
<div class="inlineblock-div">不确定宽度2</div>
</div>
.no-width2 {
text-align: center;
}
.inlineblock-div {
display: inline-block;
}
-------------------------------------------------------------------------------------------------
方法3：设置flex布局 推荐
<div class="no-width3">
<div class="flex-div">不确定宽度3</div>
<div class="flex-div">不确定宽度3</div>
</div>
.no-width3 {
display: flex;
justify-content: center;
}
-------------------------------------------------------------------------------------------------
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
02.垂直居中
a.单行文本垂直居中
设置padding-top=padding-bottom
设置line-height=height
b.多行文本垂直居中
通过设置父元素dislpay:table，子元素display:table-cell和vertical-align:middle;
<div class="center">
<div class="table-div">多行文本垂直居中</div></div>
.center {
width: 100px;
height: 100px;
display: table;
border: 1px solid red;
}
.table-div {
display: table-cell;
vertical-align: middle;
}
c.块级元素垂直
方法1：flex布局 推荐
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值
<div class="center">
<div>文本垂直居中</div>
</div>
.center {
width: 100px;
height: 100px;
display: flex;
aligin-items: center;
border: 1px solid red;
}
-----------------------------------------------------------------------------------------------------
方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
width: 150px;
height: 50px;
line-height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background: red;
}
-----------------------------------------------------------------------------------------------------
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
width: 150px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
-----------------------------------------------------------------------------------------------------
方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
.parent {
width: 100px;
height: 100px;
position: relative;
border: 1px solid red;
}
.child {
line-height: 50px;
position: absolute;
top: 50%;
transform: translate(0,-50%);
background: red;
}
上述的块级垂直居中方法，稍加改动，即可成为块级水平居中方法，如top/bottom换成left/right
transform方法，可用于未知元素大小的居中
03.水平垂直居中
方法1：绝对定位+margin:auto
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
---------------------------------------------------------------------------------------------------------
方法2：绝对定位+负margin
div{
width:200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
---------------------------------------------------------------------------------------------------------
方法3：绝对定位+transform
div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%; /* 定位父级的50% */
top: 50%;
transform: translate(-50%,-50%); /*自己的50% */
}
---------------------------------------------------------------------------------------------------------
方法4:flex布局 推荐
.box {
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* 只要三句话就可以实现不定宽高水平垂直居中 */
}
.box > div {
background: red;
width: 200px;
height: 200px;
}
---------------------------------------------------------------------------------------------------------
方法5：table-cell实现居中
设置
display:table-cell;
text-align:center;
vertical-align: middle;
2.9 css定位：5种
00.汇总
1.static
2.relative
3.fixed
4.sticky
5.absolute
01.Static定位
a.定义
默认定位方式，元素按照正常的文档流进行排列
b.原理
不受 top、bottom、left、right 属性影响
c.常用API
无需特殊 API，使用默认的 CSS 属性即可
d.使用步骤
无需特别设置，所有元素默认即为 static 定位。=
e.场景代码示例
<div style="position: static;">
Static positioned element
</div>
02.Relative定位
a.定义
相对定位，元素相对于其正常位置进行偏移
b.原理
使用 top、bottom、left、right 属性来调整元素的位置，但仍占据原来的空间
c.常用API
position: relative;
top, bottom, left, right
d.使用步骤
设置 position: relative;
使用 top、bottom、left、right 调整位置
e.场景代码示例
<div style="position: relative; top: 10px; left: 20px;">
Relative positioned element
</div>
03.Fixed定位
a.定义
固定定位，元素相对于浏览器窗口进行定位
b.原理
元素位置不随页面滚动而改变
c.常用API
position: fixed;
top, bottom, left, right
d.使用步骤
设置 position: fixed;
使用 top、bottom、left、right 确定位置
e.场景代码示例
<div style="position: fixed; top: 0; right: 0;">
Fixed positioned element
</div>
04.Sticky定位
a.定义
粘性定位，元素在特定的滚动位置时表现为固定定位
b.原理
元素在跨越特定阈值时从相对定位变为固定定位
c.常用API
position: sticky;
top, bottom, left, right
d.使用步骤
设置 position: sticky;
使用 top、bottom、left、right 设置触发固定的阈值
e.场景代码示例
<div style="position: sticky; top: 10px;">
Sticky positioned element
</div>
05.Absolute定位
a.定义
绝对定位，元素相对于最近的已定位祖先元素进行定位
b.原理
如果没有已定位的祖先元素，则相对于初始包含块（通常是文档的 <html> 元素）定位
c.常用API
position: absolute;
top, bottom, left, right
d.使用步骤
设置 position: absolute;
使用 top、bottom、left、right 确定位置
确保有一个已定位的祖先元素（如 relative 或 absolute）
e.场景代码示例
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px;">
Absolute positioned element
</div>
</div>
2.10 浮动清除
00.清除浮动有哪些方式？比较好的方式是哪一种？
（1）父级div定义height（高度）；
（2）父级div也浮动，需要定义width（宽度）；
（3）父级div定义 伪类:after 和 设置属性zoom:1；（比较好的方式）
（4）父级div定义，设置属性 overflow:hidden、overflow:auto、overflow:scroll；
（5）父级div定义，设置属性 display:table、display:flex；
（6）结尾处加空div标签，设置属性 clear:both；
（7）结尾处加<br>（换行标签）设置属性 clear:both。
01.示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动示例</title>
<style>
.container {
width: 100%;
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
}
.box {
float: left;
width: 45%;
height: 100px;
margin: 10px;
background-color: #f4f4f4;
border: 1px solid #ccc;
}
/* 方法 3: 使用伪类 :after 和 zoom:1 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1; /* IE 6/7 支持 */
}
/* 方法 4: 使用 overflow: hidden */
.overflow-hidden {
overflow: hidden;
}
/* 方法 5: 使用 display: table 和 display: flex */
.display-table {
display: table;
width: 100%;
}
.display-flex {
display: flex;
}
/* 方法 6: 使用 clear: both 的空 div */
.clear-empty-div {
clear: both;
height: 0;
visibility: hidden;
}
/* 方法 7: 使用 <br> 标签清除浮动 */
.clear-br {
clear: both;
}
</style>
</head>
<body>
<!-- 方法 1: 父级 div 定义高度 -->
<div class="container" style="height: 150px;">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 2: 父级 div 也浮动，需要定义宽度 -->
<div class="container" style="float: left; width: 100%;">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 3: 使用伪类 :after 和 zoom:1 -->
<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 4: 使用 overflow: hidden -->
<div class="container overflow-hidden">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 5: 使用 display: table 和 display: flex -->
<div class="display-table">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="display-flex">
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 方法 6: 使用 clear: both 的空 div -->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="clear-empty-div"></div> <!-- 空 div -->
</div>
<!-- 方法 7: 使用 <br> 标签清除浮动 -->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<br class="clear-br" />
</div>
</body>
</html>
2.11 滚动条隐藏
01.使用overflow: hidden
将 overflow 属性设置为 hidden，可以完全隐藏滚动条。
a.隐藏整个页面的滚动条
在 body 元素上应用以下样式：
body {
overflow: hidden;
}
b.隐藏特定元素的滚动条
在你想隐藏滚动条的特定元素上应用以下样式：
.container {
overflow: hidden;
}
02.使用overflow-x和overflow-y
如果你只想隐藏水平或垂直滚动条，可以分别使用 overflow-x 和 overflow-y。
a.隐藏水平滚动条
body {
overflow-x: hidden;
}
b.隐藏垂直滚动条
body {
overflow-y: hidden;
}
03.结合使用overflow和position
在某些情况下，你可能需要结合使用 overflow 和 position 来处理滚动条。以下示例使用 position: fixed 和 overflow: hidden 隐藏滚动条：
html, body {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
04.伪元素隐藏滚动条（仅适用于 Webkit 浏览器）
对于 Webkit 浏览器（如 Chrome 和 Safari），你可以通过伪元素隐藏滚动条
/* 隐藏水平滚动条 */
::-webkit-scrollbar {
display: none;
}
/* 隐藏垂直滚动条 */
body::-webkit-scrollbar {
display: none;
}
2.12 边框1px问题
01.问题1
媒体查询利用设备像素比缩放，设置小数像素
缺点：对设备有要求，小数像素目前兼容性较差。
02.问题2
viewport + rem 方案
缺点：以为缩放涉及全局的rem单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。
03.问题3
设置 border-image 方案
缺点：需要制作图片，圆角可能出现模糊
04.问题4
background-image 渐变实现
缺点：因为每个边框都是线性渐变颜色实现，因此无法实现圆角
05.问题5
box-shadow 方案，利用阴影也可以实现
优点：是没有圆角问题，
缺点：是颜色不好控制
06.问题6
transform: scale(0.5) 方案 - 推荐: 很灵活
2.13 margin外边距折叠
01.问题描述
在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。
02.外边距叠加存在两种情况
一是父子外边距叠加；二是兄弟外边距叠加；
03.如何避免外间距：只要破坏上面讲到的四个条件中的任何一个即可
毗邻、两个或多个、普通流和垂直方向。
2.14 inline-block相邻节点间隔
01.出现原因：
这是一个西文排版的问题，它由空格、换行或回车所产生空白符所致；
02.解决方法：
改变书写方式
使用margin负值
使用font-size:0
使用letter-spacing
使用word-spacing