2.css基础
css简介
网页分成三个部分：
结构 HTML
表现 css
行为 JavaScript
css 层叠样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 45px;
}
#co{
color: brown;
font-size: 60px;
}
</style>
</head>
<body>
<!--
网页分成三个部分：
结构 HTML
表现 css
行为 JavaScript
css
层叠样式表
-->
<p style="color: red; font-size: 45px;">少小离家老大回，乡音无改鬓毛催</p>
<p id="co">今天天气真不错</p>
<p>今天天气真不错</p>
<p>今天天气真不错</p>
</body>
</html>
css语法
css基本语法：
选择器 声明块
选择器： 通过选择器可以选中页面的指定元素
声明块： 通过声明块来指定要为元素设置的样式
声明块有一个一个的声明组成
声明是一个名值对结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<style>
/*
css中的注释
css基本语法：
选择器 声明块
选择器： 通过选择器可以选中页面的指定元素
声明块： 通过声明块来指定要为元素设置的样式
声明块有一个一个的声明组成
声明是一个名值对结构
*/
h1{
color: rgb(109, 14, 117);
}
</style>
</head>
<body>
<h1>我是h1</h1>
<p id="co">老婆爱你</p>
<p>老婆爱你</p>
<p>老婆爱你</p>
<p>老婆爱你</p>
</body>
</html>
css样式
flex布局
CSS Flexbox布局
- 块（Block），用于网页中的部分（节）
- 行内（Inline），用于文本
- 表，用于二维表数据
- 定位，用于元素的明确位置
Flexbox元素/容器
父元素（容器）
通过将 display 属性设置为 flex，flex 容器将可伸缩。
.flex-container {
display: flex;
}
以下是 flex 容器属性：
flex-direction定义容器在哪个方向堆叠flex项目flex-wrapflex-flowjustify-contentalign-itemsalign-content
flex-direction 属性
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
column 值设置垂直堆叠 flex 项目（从上到下）：
.flex-container {
display: flex;
flex-direction: column;
}
column-reverse 值垂直堆叠 flex 项目（但从下到上）：
.flex-container {
display: flex;
flex-direction: column-reverse;
}
row 值水平堆叠 flex 项目（从左到右）：
.flex-container {
display: flex;
flex-direction: row;
}
row-reverse 值水平堆叠 flex 项目（但从右到左）：
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 属性
flex-wrap 属性规定是否应该对 flex 项目换行。
wrap 值规定 flex 项目将在必要时进行换行：
.flex-container {
display: flex;
flex-wrap: wrap;
}
nowrap 值规定将不对 flex 项目换行（默认）：
.flex-container {
display: flex;
flex-wrap: nowrap;
}
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 属性
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content 属性
justify-content 属性用于对齐 flex 项目.
center 值将 flex 项目在容器的中心对齐：
.flex-container {
display: flex;
justify-content: center;
}
flex-start 值将 flex 项目在容器的开头对齐（默认）：
.flex-container {
display: flex;
justify-content: flex-start;
}
flex-end 值将 flex 项目在容器的末端对齐：
.flex-container {
display: flex;
justify-content: flex-end;
}
space-around 值显示行之前、之间和之后带有空格的 flex 项目：
.flex-container {
display: flex;
justify-content: space-around;
}
space-between 值显示行之间有空格的 flex 项目：
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 属性
align-items 属性用于垂直对齐 flex 项目。
center 值将 flex 项目在容器中间对齐：
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
flex-start 值将 flex 项目在容器顶部对齐：
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
flex-end 值将弹性项目在容器底部对齐：
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
stretch 值拉伸 flex 项目以填充容器（默认）：
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
baseline 值使 flex 项目基线对齐：
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
align-content 属性
align-content 属性用于对齐弹性线。
space-between 值显示的弹性线之间有相等的间距：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
space-around 值显示弹性线在其之前、之间和之后带有空格：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
stretch 值拉伸弹性线以占据剩余空间（默认）：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
center 值在容器中间显示弹性线：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
flex-start 值在容器开头显示弹性线：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
flex-end 值在容器的末尾显示弹性线：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
完美的居中
在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。
解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中:
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
子元素（项目）
flex 容器的直接子元素会自动成为弹性（flex）项目。
用于弹性项目的属性有：
orderflex-growflex-shrinkflex-basisflexalign-self
order 属性
order 属性规定 flex 项目的顺序。
代码中的首个 flex 项目不必在布局中显示为第一项。
order 值必须是数字，默认值是 0。
order 属性可以改变 flex 项目的顺序：
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aWEhP0jY-1661745444092)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1656228650439.png)]
flex-grow 属性
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
该值必须是数字，默认值是 0。
使第三个弹性项目的增长速度比其他弹性项目快八倍：
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OcHruNx-1661745444093)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1656228774462.png)]
flex-shrink 属性
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
该值必须是数字，默认值是 0。
不要让第三个弹性项目收缩得与其他弹性项目一样多：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igIbDxn8-1661745444093)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1656228863618.png)]
flex-basis 属性
flex-basis 属性规定 flex 项目的初始长度。
将第三个弹性项目的初始长度设置为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCq0A98U-1661745444094)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1656228907953.png)]
flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
align-self 属性
align-self 属性规定弹性容器内所选项目的对齐方式。
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。
把第三个弹性项目对齐到容器的中间：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
CSS Flexbox 属性
下表列出了与 flexbox 一起使用的 CSS 属性：
| 属性 | 描述 |
|---|---|
| display | 规定用于 HTML 元素的盒类型。 |
| flex-direction | 规定弹性容器内的弹性项目的方向。 |
| justify-content | 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。 |
| align-items | 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。 |
| flex-wrap | 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。 |
| align-content | 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。 |
| flex-flow | flex-direction 和 flex-wrap 的简写属性。 |
| order | 规定弹性项目相对于同一容器内其余弹性项目的顺序。 |
| align-self | 用于弹性项目。覆盖容器的 align-items 属性。 |
| flex | flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。 |
less
简介
less是css的预处理语言。
less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。
less兼容性不是特别好。
calc()计算函数，自动计算大小等。
<style>
html{
--color:#ff0;
--length:100px;
}
.box1{
width: var(--length);
height: 100px;
background-color: var(--color);
}
.box2{
width: 100px;
height: 100px;
color: var(--color);
}
.box3{
width: 100px;
height: 100px;
border: 10px solid var(--color);
}
</style>
作为变量：直接以 @变量名 的形式使用
作为类名：以 @{变量名} 的形式使用
变量发生重名时，会优先使用比较近的变量
可以在变量声明前使用变量
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
