定位
- static 基础定位
- relative 相对定位，通过top,left,right,bottom调整位置，但仍占用原来的位置。
- absolute 绝对定位，飞到天上，默认以body为参考，要以谁为参考需将父元素调为非static（通常采用relative，影响最小）
- 可使用z-index调节非static元素的层叠关系
- fixed 参考点为屏幕左上角，不受滚动条影响
二级菜单
二级菜单的li直接写在一级菜单的li中，设置为display:none; position:absolute;相对导航栏定位，导航栏设为relative。
悬停显示：.nav>ul>li:hover ul { display: block; }
响应式
Flexbox 布局：灵活的容器布局
Flexbox（弹性盒子布局）是 CSS3 中推出的一种布局模型，它允许容器内的元素在一个方向上灵活地分配空间。Flexbox 最适合用于一维布局，解决了传统布局方式中的很多问题。
- Flexbox 基本概念
Flexbox 的核心概念是“容器”和“项目”。在 Flexbox 中，容器内的项目会沿着主轴或交叉轴对齐和分布。
常用的 Flexbox 属性有：
display: flex：启用 Flexbox 布局。
flex-direction：设置主轴方向（默认水平，row），还可以设置为 column（垂直方向）。
justify-content：设置主轴上的对齐方式。
align-items：设置交叉轴上的对齐方式。 - 实际应用
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between; /* 主轴方向上的间距分布 */
align-items: center; /* 交叉轴方向上的对齐 */
}
.item {
padding: 10px;
background-color: #4CAF50;
color: white;
}
</style>
- 响应式设计
Flexbox 非常适合响应式布局，可以轻松调整布局元素的对齐方式或排列顺序。例如，可以利用 flex-wrap 使容器中的元素在小屏幕上换行。
.container { display: flex; flex-wrap: wrap; /* 元素换行 */ }
Grid 布局：二维网格布局
CSS Grid 布局适用于二维布局（即同时处理行和列）。它可以让你更加精确地控制布局。
- Grid 布局允许你定义一个容器的行和列，并将项目放置在这些行列交汇的区域内。常用的 Grid 属性包括：
display: grid：启用 Grid 布局。 grid-template-rows / grid-template-columns：定义网格的行和列。 grid-gap：设置网格项之间的间距。 = 实际应用
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 两列布局 */
grid-gap: 10px;
}
.grid-item {
padding: 10px;
background-color: #2196F3;
color: white;
}
</style>
- 响应式设计 Grid 也能很好地支持响应式设计，通过 media query 动态调整网格的行列数：
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* 小屏幕下只显示一列 */
}
}
媒体查询（Media Queries）：根据设备调整布局
媒体查询是 CSS 中一种非常重要的响应式设计工具。它可以根据不同的屏幕尺寸、分辨率等条件应用不同的样式。
- 媒体查询基本语法 媒体查询通过 @media 规则进行定义，可以根据设备的宽度、像素密度等条件加载不同的 CSS 样式：
@media (max-width: 768px) {
/* 在屏幕宽度小于 768px 时应用 */
.container {
flex-direction: column; /* 切换为纵向布局 */
}
}
百分比布局：灵活的相对单位
百分比布局是一种常见的响应式布局方式，尤其适用于需要根据容器的宽度或高度自适应调整的场景。
- 使用百分比作为宽度和高度单位，可以使元素根据父容器的大小自动调整。它非常适合那些需要自适应屏幕大小的布局。比如，在小屏幕下，我们可以调整元素的百分比宽度：
@media (max-width: 600px) {
.item {
width: 100%; /* 小屏幕时占满全宽 */
}
}
rem/em 布局：相对单位的使用
rem 和 em 是相对单位，相比像素（px）单位，它们具有更好的响应性和灵活性。rem 是相对于根元素（html）的字体大小，em 是相对于父元素的字体大小。
- 默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。
通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。设置方法如下：
Html{font-size:62.5%}
- 响应式设计 通过调整根元素的字体大小，可以实现全局的响应式调整：
html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}
vw/vh 单位的使用：视口相对单位
vw（视口宽度）和 vh（视口高度）是相对于视口的宽度和高度的单位。它们可以用于实现全屏或自适应布局，尤其在响应式设计中非常有用。
- vw/vh 的应用
<div class="container">
<div class="item">Item 1</div>
</div>
<style>
.container {
width: 100vw; /* 宽度为视口的100% */
height: 100vh; /* 高度为视口的100% */
}
.item {
font-size: 5vw; /* 字体大小为视口宽度的5% */
}
@media (max-width: 600px) {
.item {
font-size: 8vw; /* 小屏幕时字体变大 */
}
}
</style>
CSS 框架：Bootstrap 和 Tailwind 的布局方案
在实际项目中，CSS 框架如 Bootstrap 和 Tailwind CSS 提供了现成的响应式布局工具，可以大大简化布局工作。
- Bootstrap 布局 Bootstrap 提供了响应式的网格系统，可以轻松实现响应式布局。
<div class="container">
<div class="row">
<div class="col-md-4">Item 1</div>
<div class="col-md-4">Item 2</div>
<div class="col-md-4">Item 3</div>
</div>
</div>
- Tailwind CSS 布局 Tailwind CSS 提供了丰富的响应式设计类，可以根据不同的屏幕大小调整布局：
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
伪元素
::before或::after都必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline，可以自己改.
用法
1.利用content的值：
（1）content：“字符串”；
可以统一在字前面或后面加一些字符
(2) content:url(…)
可以在字前面加一些小的图标，通过定位把位置调合适
(3)通过attr()属性调用当元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
attr() 函数返回选择元素的属性值。
a::after{
content:"(" attr(href) ")";
}
p:after{
content:attr(class);
}
<p><a href="https://wx.qq.com/">微信</a></p>
<p class="hello"></p>
2.实现对话框效果：
<style>
.left,.right{
position: relative;
display: table;
min-height: 40px;
text-align: center;
background-color: #9EEA6A;
margin: 0;
border-radius: 7px;
}
.left{
left:10px;
}
.left::before,.right::after{
position: absolute;
display: inline-block;
content: "";
width: 0px;
height: 0px;
border: 8px solid transparent; //盒子宽高为0时边框即为宽高
top: 15px; /*移到中间*/
}
.left::before{
border-right-color: #9EEA6A;
left: -16px;
}
.right::after{
border-left-color: #9EEA6A;
right: -16px;
}
.left p,.right p{
padding:0px 10px;
}
.right{
right:-150px;
}
</style>
<div class="left">
<p>你好啊</p>
</div>
<div class="right">
<p>好久不见~</p>
</div>
3.实现箭头
.box{
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
.box::before{
position: absolute;
content:"";
width: 12px;
height: 12px;
border: 1px solid black;
border-bottom-color: transparent;
border-right-color: transparent;
transform: translate(-50%, -50%) rotate(-45deg);
left: 20px;
top: 50%;
}
<body>
<div class="box"></div>
</body>
4.清除浮动
原理：利用:after和:before在元素内部插入两个元素块，从而达到清除浮动的效果。
.outer:after {
clear:both; /*清除浮动*/
content:'';
display:block; /*显示伪元素*/
width:0;
height:0; /*不占位置*/
visibility:hidden; /*允许浏览器渲染它，但是不显示出来*/
}
5.画分割线：画一条分割线
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
