一.CSS
- 格式：
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
} - 规则层叠于一个样式表中，优先权由低到高：
1.浏览器缺省设置
2.外部样式表 （例：<link rel="stylesheet" href="css文件">）
3.内部样式表（位于<head>标签内部）
4.内联样式（在 HTML 元素内部） - CSS 中的注释以
/*开头和*/结尾
（/* 设置h1的样式 */ h1 { color: red; background-color: yellow; border: 1px solid black; }）
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
| 类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
| ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
| 属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ } |
| 子级选择器 | > | 使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 | .top > li{ } | |
| 同级选择器 | ~ | 使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后续兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器相邻的后续兄弟元素 | .l1 + li{ } | |
| 通用选择器 | * | 匹配文档中的所有内容 | *{ } |
二. 页面布局
-
内容区域（content）：这是元素实际显示内容的区域，如文本、图片等。内容区域的宽度和高度可以通过
width和height属性来设置。 -
内边距（padding）：内边距位于内容区域与边框之间，它的宽度可以通过
padding-top、padding-right、padding-bottom和padding-left属性来分别设置。内边距会影响元素的实际尺寸，但不会影响其他元素的布局。 -
边框（border）：边框位于内边距与外边距之间，它的宽度、样式和颜色可以通过
border-width、border-style和border-color属性来分别设置。边框会影响元素的实际尺寸，也会影响元素周围的布局。 -
外边距（margin）：外边距位于边框与其他元素之间，它的宽度可以通过
margin-top、margin-right、margin-bottom和margin-left属性来分别设置。外边距会影响元素的布局，但不会影响元素的实际尺寸。 -
在计算元素的实际尺寸时，需要把盒模型的这四个部分都考虑进去。例如，一个元素的实际宽度为：
width + padding-left + padding-right + border-left-width + border-right-width。一个元素的实际高度为：height + padding-top + padding-bottom+ border-top-width + border-bottom-width。
2-1 display
- block：将元素显示为块级元素。块级元素会独占一行，宽度默认为父元素的宽度，可以设置宽度、高度、内外边距等属性。常见的块级元素有
<div>、<p>、<h1>等。 - inline：将元素显示为行内元素。行内元素不会独占一行，宽度仅为内容的宽度，不能设置宽度、高度、内外边距等属性。常见的行内元素有
<span>、<a>、<img>等。 - inline-block：将元素显示为行内块元素。行内块元素既不会独占一行，也可以设置宽度、高度、内外边距等属性，类似于块级元素。常见的行内块元素有
<input>、<button>等。 - none：将元素隐藏，不占据任何空间。通常用于隐藏不需要显示的元素。
- flex：将元素显示为弹性盒子。弹性盒子是一种现代布局方式，可以轻松实现响应式布局和自适应对齐。需要注意的是，
display: flex应用于父元素，而不是子元素。 - grid：将元素显示为网格容器。网格布局是一种二维布局方式，可以轻松实现复杂的布局需求。需要注意的是，
display: grid应用于父元素，而不是子元素。
<!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>Display</title>
<style>
.block {
display: block;
background-color: lightblue;
}
.inline {
display: inline;
background-color: lightgreen;
}
.inline-block {
display: inline-block;
background-color: lightyellow;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="block">
block将元素显示为块级元素
</div>
<span class="inline">
inline将元素显示为行内元素
</span>
<div class="inline-block">
inline-block将元素显示为行内块元素
</div>
<div class="none">
none将元素隐藏不占据任何空间
</div>
</body>
</html>
2-2 float
left：将元素浮动到其父元素的左边缘，文本和其他元素将围绕该元素排列。
right：将元素浮动到其父元素的右边缘，文本和其他元素将围绕该元素排列。
none：取消元素的浮动效果，使其回到正常的文档流中。
<!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>Float Layout Demo</title>
<style>
.container {
width: 100%;
background-color: lightgray;
}
.left {
float: left;
width: 30%;
background-color: lightblue;
padding: 10px;
margin: 10px;
}
.right {
float: right;
width: 30%;
background-color: lightgreen;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="left">
float:left
</div>
<div class="right">
float:right
</div>
</div>
<p>
只因你太美 baby 只因你太美 baby只因你实在是太美 baby只因你太美 baby迎面走来的你让我如此蠢蠢欲动这种感觉我从未有Cause I got a crush on you who you你是我的我是你的谁再多一眼看一眼就会爆炸再近一点靠近点快被融化想要把你占为己有 baby bae不管走到哪里都会想起的人是你 you you我应该拿你怎样Uh 所有人都在看着你我的心总是不安 Oh 我现在已病入膏肓
</p>
</div>
</body>
</html>
2-3 float 塌陷
指浮动元素的父元素高度不能自动适应浮动元素的高度，导致父元素高度塌陷的现象。这会影响到后续元素的布局，使它们与浮动元素重叠。
<!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>Float</title>
<style>
.rbox {
width: 10rem;
height: 5rem;
background-color: rgb(255, 0, 0);
float: left;
}
.ybox {
width: 10rem;
height: 10rem;
background-color: rgb(246, 255, 0);
float: right;
}
.box {
height: 10rem;
background-color: rgb(0, 255, 55);
}
</style>
</head>
<body>
<div>
<div class="rbox"></div>
<div class="ybox"></div>
<div class="box"></div>
</div>
</body>
</html>
现代布局中更推荐使用 Flexbox 或 Grid 布局来替代 Float布局。
2-4 弹性布局（Flexbox）
弹性布局的基本原理
- 弹性容器（Flex Container）和弹性项目（Flex Item）：弹性布局由弹性容器和弹性项目组成。任何元素通过设置display: flex或display:
inline-flex可以成为弹性容器，其直接子元素自动成为弹性项目。 - 主轴（Main Axis）和交叉轴（Cross Axis）：弹性布局沿着主轴和交叉轴进行布局。主轴是元素排列的方向，默认是水平的；交叉轴与主轴垂直。
| 1 | 2 | 3 |
|---|---|---|
| 主轴（Main Axis）默认方向 | display: inline-flex行内元素 | 主轴是水平的，从左到右 |
| display: flex块级元素 | 主轴是垂直的，从上到下 | |
| — | — | — |
| 主轴（Main Axis）方向通过flex-direction属性来控制 | row | 默认，水平从左到右 |
| row-reverse | 水平从右到左 | |
| column | 垂直从上到下 | |
| column-rerefse | 垂直从下到上 |
| 1 | 2 | 3 |
|---|---|---|
| 交叉轴（Cross Axis）默认方向 | 行内元素 | 主轴是水平的，从左到右 |
| 块级元素 | 交叉轴是水平的，从左到右 | |
| — | — | — |
| 交叉轴（Cross Axis）对齐方式通过align-items属性来控制 | flex-start | 交叉轴起点对齐 |
| flex-end | 交叉轴终点对立 | |
| center | 交叉轴中点对齐 | |
| baseline | 基线对齐 | |
| stretch | 拉伸填充整个容器 |
<!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>Flexbox Example</title><style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
background-color: lightgray;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
扫一扫
4857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
