Web开发-CSS篇-下

最新推荐文章于 2024-10-16 11:23:07 发布

Bro_cat

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量1k

点赞数 16

分类专栏： Web 文章标签：前端 css html

本文链接：https://blog.csdn.net/Broken_x/article/details/141142964

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 盒子模型介绍

盒子模型是CSS布局的基础，每个HTML元素都被看作是一个矩形盒子。盒子模型主要由以下四个部分组成：

Content：内容区域，显示文本和图片。
Padding：内边距，围绕内容的空白区域。
Border：边框，包围内边距的边界线。
Margin：外边距，盒子与其他元素之间的空白区域。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #000;
            margin: 15px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">Content Area</div>
</body>
</html>

2. 清除HTML中元素的默认样式

许多浏览器为HTML元素提供了默认样式。为了确保一致的样式表现，常常需要清除这些默认样式。通常使用CSS Reset或Normalize.css来完成这一任务。

代码示例：

/* CSS Reset Example */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

这有一份大佬写好的拿过来用一下

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. HTML盒子居中显示

居中显示盒子通常有几种方法，取决于盒子的类型（块级元素或行内元素）和所需的居中方式（水平或垂直）。

代码示例：

水平居中（块级元素）：

.container {
    width: 300px;
    margin: 0 auto;
}

水平和垂直居中（块级元素）：

.container {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

水平和垂直居中（行内元素）：

.container {
    text-align: center;
    line-height: 200px;
    height: 200px;
}
.inline-box {
    display: inline-block;
    vertical-align: middle;
}

4. 浮动的介绍及其影响

浮动元素脱离了标准文档流，可以左右浮动以实现图文环绕效果。浮动的主要属性是float，可以设置为left、right或none。

浮动带来的主要问题是会影响标准文档流，导致父容器高度塌陷。解决此问题的常用方法包括“清除浮动”。

代码示例：

.float-left {
    float: left;
    width: 200px;
    height: 100px;
    background-color: lightcoral;
}

.float-right {
    float: right;
    width: 200px;
    height: 100px;
    background-color: lightgreen;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

5. 清除浮动带来的影响的四种方法

浮动元素会导致其父容器无法正确包裹子元素，因此需要清除浮动。常用的方法包括：

固定高度法：给父容器设置固定高度，不推荐，因为内容高度变化时会产生问题。
内墙法：在浮动元素之后添加一个空的、带有clear属性的元素。
伪元素清除法：使用伪元素::after清除浮动。
overflow清除法：设置父容器overflow: auto或overflow: hidden。

代码示例（伪元素清除法）：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

6. 标准文档流与BFC（块级格式化上下文）

标准文档流是指元素按照代码中的顺序从上到下、从左到右排列。BFC（Block Formatting Context）是一个独立的渲染区域，元素在这个区域内不会影响到外部元素。

BFC的生成条件：

浮动元素 (float 属性不为 none)
绝对定位元素 (position 为 absolute 或 fixed)
display: inline-block 或 table-cell
overflow 不为 visible

代码示例：

.bfc-container {
    overflow: hidden;
    background-color: lightgray;
}

.bfc-item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: coral;
    margin: 10px;
}

7. 定位的介绍及其特点

CSS定位属性有三种常用形式：

相对定位 (position: relative)：相对于元素自身的原始位置进行偏移。
绝对定位 (position: absolute)：相对于最近的定位祖先进行偏移，若无定位祖先则相对于视口。
固定定位 (position: fixed)：相对于浏览器窗口进行偏移，元素不随页面滚动。

代码示例：

.relative-box {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: lightblue;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: lightgreen;
}

.fixed-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: lightcoral;
}

8. `z-index` 属性介绍和使用规则

z-index 属性用于控制元素在Z轴上的堆叠顺序，数值越大，元素越靠前。需要注意的是，z-index 仅在元素是定位元素时生效。

代码示例：

.z-index-1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
    background-color: lightblue;
}

.z-index-10 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 10;
    background-color: lightgreen;
}

9. 背景属性介绍

CSS中的背景属性用于设置元素的背景，包括颜色、图片、重复方式、位置等。

代码示例：

.background-example {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

1. background-color

可用值：
颜色名称：如 red, blue, lightblue 等。
十六进制值：如 #ff0000（红色）、#00ff00（绿色）等。
RGB：如 rgb(255, 0, 0)（红色），可以设置透明度 rgba(255, 0, 0, 0.5)。
解释：设置元素的背景颜色。如果指定了背景图像，该颜色将在图像未加载或透明区域显示。

2. background-image

可用值：
URL：如 url('image.png') 指定图像文件。
多个图像：可以用逗号分隔多个图像，如 url('image1.png'), url('image2.png')。
解释：设置元素的背景图像。可以为元素设置一个或多个背景图像。

3. background-repeat

可用值：
repeat：背景图像在水平和垂直方向上重复（默认值）。
repeat-x：背景图像在水平方向上重复。
repeat-y：背景图像在垂直方向上重复。
no-repeat：背景图像不重复，只显示一次。
解释：指定背景图像是否重复填充元素的背景区域。

4. background-position

可用值：
关键字：如 top, right, bottom, left, center。
组合：如 top left, bottom right, center center。
像素或百分比：如 50% 50% 或 10px 20px。
解释：设置背景图像在元素中的位置。可以根据需要调整图像的位置。

5. background-size

可用值：
auto：默认值，背景图像以原始尺寸显示。
cover：图像按比例缩放，以覆盖整个元素，可能会裁剪图像。
contain：图像按比例缩放，以完全包含在元素内，不裁剪图像。
具体尺寸：如 100px 50px 或 50% 100%。
解释：设置背景图像的尺寸。使用 cover 和 contain 可以确保背景图像在不同屏幕尺寸上保持视觉吸引力。

10. 边框属性介绍

CSS边框属性可以定义边框的宽度、样式、颜色等。常用属性包括border-radius（圆角）、border-width、border-style和border-color。

代码示例：

.border-box {
    border: 2px solid #000;
    border-radius: 10px; /* 生成圆角 */
}

.half-circle {
    width: 100px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 50px 50px 0 0; /* 生成半圆 */
}

1. border-width

语法：border-width: [width];
可用值：
具体像素值：如 1px, 2px, 3px 等，表示边框的厚度。
关键字：
thin：表示细边框，通常等于 1px。
medium：表示中等边框，通常等于 3px。
thick：表示粗边框，通常等于 5px。
四个值：可以为上、右、下、左分别设置边框宽度，如 1px 2px 3px 4px，分别对应上、右、下、左。

2. border-style

语法：border-style: [style];
可用值：
none：无边框。
solid：实线边框。
dashed：虚线边框。
dotted：点线边框。
double：双实线边框。
groove：凹槽边框，根据背景色显示阴影效果。
ridge：凸起边框，与凹槽相反。
inset：嵌入式边框，表现为凹陷效果。
outset：外突边框，表现为突出效果。

3. border-color

语法：border-color: [color];
可用值：
颜色名称：如 red, blue, green 等。
十六进制值：如 #000000（黑色）、#ff0000（红色）等。
RGB：如 rgb(0, 0, 0)（黑色），可以设置透明度 rgba(0, 0, 0, 0.5)。

4. border-radius

语法：border-radius: [radius];
可用值：
具体像素值：如 5px, 10px，表示圆角的半径。
百分比：如 50%，用于创建完全圆形（适用于正方形元素）。
四个值：可以设置四个圆角的不同半径，如 10px 20px 30px 40px，分别对应左上、右上、右下、左下的圆角半径。

5. border-image

语法：border-image: [source] [slice] [width] [outset] [repeat];
可用值：
source：图像的URL，如 url('image.png')。
slice：用于切割图像的值，定义边框区域的尺寸（如 10 表示从每个边切割10像素）。
width：边框图像的宽度，可以是像素值或百分比。
outset：边框图像向外延伸的距离。
repeat：定义图像如何重复，可以是 stretch, repeat, round, space。

6. border-collapse

语法：border-collapse: [collapse|separate];
可用值：
collapse：合并相邻单元格的边框，形成一个边框。
separate：每个单元格都有独立的边框。

7. border-spacing

语法：border-spacing: [length];
可用值：
长度值：如 5px，用于设置相邻单元格之间的间距，仅在 border-collapse: separate; 时有效。

因为文本属性和字体属性我在上篇说过，这里就简单提一下，不做示例了

11.文本属性

color

语法：color: [color];
可用值：
颜色名称：如 red, blue, green 等。
十六进制值：如 #000000（黑色）、#ff0000（红色）等。
RGB：如 rgb(0, 0, 0)（黑色），可以设置透明度 rgba(0, 0, 0, 0.5)。
解释：设置文本的颜色。

text-align

语法：text-align: [align];
可用值：
left：文本左对齐。
right：文本右对齐。
center：文本居中对齐。
justify：文本两端对齐。
解释：设置文本在其容器内的对齐方式。

text-decoration

语法：text-decoration: [decoration];
可用值：
none：无装饰（默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
解释：设置文本的装饰样式。

text-transform

语法：text-transform: [transform];
可用值：
none：不进行任何转换。
capitalize：每个单词的首字母大写。
uppercase：所有字母大写。
lowercase：所有字母小写。
解释：控制文本的大小写样式。

line-height

语法：line-height: [height];
可用值：
具体像素值：如 20px。
数字：如 1.5，表示行高与字体大小的比例。
百分比：如 150%。
解释：设置文本行间的高度，影响行与行之间的垂直空间。

letter-spacing

语法：letter-spacing: [spacing];
可用值：
具体像素值：如 1px，用于设置字母之间的间距。
解释：增加或减少字母之间的间距。

word-spacing

语法：word-spacing: [spacing];
可用值：
具体像素值：如 1px，用于设置单词之间的间距。
解释：增加或减少单词之间的间距。

12.字体属性

font-family

语法：font-family: [font];
可用值：
字体名称：如 Arial, Times New Roman, Helvetica 等。
字体组：如 serif, sans-serif, monospace。
解释：设置文本的字体类型。

font-size

语法：font-size: [size];
可用值：
具体像素值：如 12px, 16px。
相对单位：如 em, rem, %。
解释：设置文本的字号。

font-weight

语法：font-weight: [weight];
可用值：
normal：正常字体（默认值）。
bold：加粗。
bolder：比父元素更粗。
lighter：比父元素更细。
具体数字：如 100, 200, 400, 700 等（通常使用 400 表示正常，700 表示加粗）。
解释：设置字体的粗细程度。

font-style

语法：font-style: [style];
可用值：
normal：正常字体（默认值）。
italic：斜体。
oblique：倾斜字体（比斜体更倾斜）。
解释：设置字体的样式。

font-variant

语法：font-variant: [variant];
可用值：
normal：正常字体（默认值）。
small-caps：小型大写字母。
解释：控制字体的变体样式。

font

语法：font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];
可用值：结合上述所有字体属性，可以在一行中设置多个属性。
解释：简写形式，用于同时设置字体的多个属性。

13. CSS Sprite（雪碧图）技术介绍

CSS Sprite是将多个图标整合到一张图片中，通过background-position定位显示不同部分的图片。这种技术可以减少HTTP请求，提高页面加载速度。

代码示例：

.sprite {
    width: 50px;
    height: 50px;
    background-image: url('sprite.png');
    background-position: 0 0;
}

.sprite-icon1 {
    background-position: -50px 0;
}

.sprite-icon2 {
    background-position: -100px 0;
}

14. 网页常见布局介绍

常见布局包括单栏布局、多栏布局、响应式布局等。

代码示例：

单栏布局：

.single-column {
    width: 100%;
    padding: 20px;
    background-color: lightblue;
}

多栏布局：

.two-columns {
    display: flex;
    justify-content: space-between;
}

.column {
    width: 48%;
    background-color: lightgreen;
    padding: 20px;
}

15. 行内元素水平垂直居中的方法

行内元素水平居中可以使用text-align: center，垂直居中通常结合line-height或flex布局。

代码示例：

方法一：设置行高和容器高度相同

.inline-center {
    text-align: center;
    line-height: 100px; /* 行高设置为与容器高度相同 */
    height: 100px;
    border: 1px solid #000;
}

方法二：使用dispaly:tabel-cell

.table {
    display: table;             /* 将父元素设置为表格 */
    width: 300px;              /* 容器宽度 */
    height: 100px;             /* 容器高度 */
    border: 1px solid #000;    /* 边框用于视觉效果 */
}

.table-cell {
    display: table-cell;        /* 将子元素设置为表格单元格 */
    text-align: center;        /* 水平居中 */
    vertical-align: middle;     /* 垂直居中 */
}

.inline-element {
    display: inline;           /* 行内元素 */
}

当然还有其他方法我就不演示了……

16. 块级元素水平垂直居中的方法

方法一：使用 Flexbox

这种方法非常灵活，适用于各种布局情况。

.flex-container {
    display: flex;               /* 使用 Flexbox 布局 */
    justify-content: center;     /* 水平居中 */
    align-items: center;         /* 垂直居中 */
    width: 300px;                /* 容器宽度 */
    height: 100px;               /* 容器高度 */
    border: 1px solid #000;      /* 边框用于视觉效果 */
}

.block-element {
    width: 100px;                /* 块级元素宽度 */
    height: 50px;                /* 块级元素高度 */
    background-color: lightblue; /* 背景颜色 */
}

方法二：使用 Grid

CSS Grid 布局也可以方便地实现块级元素的居中。

.grid-container {
    display: grid;               /* 使用 Grid 布局 */
    place-items: center;         /* 水平和垂直居中 */
    width: 300px;                /* 容器宽度 */
    height: 100px;               /* 容器高度 */
    border: 1px solid #000;      /* 边框用于视觉效果 */
}

.block-element {
    width: 100px;                /* 块级元素宽度 */
    height: 50px;                /* 块级元素高度 */
    background-color: lightblue; /* 背景颜色 */
}

方法三：使用 Margin 自动

这种方法适用于块级元素已知宽度的情况。

.margin-container {
    width: 300px;               /* 容器宽度 */
    height: 100px;              /* 容器高度 */
    border: 1px solid #000;     /* 边框用于视觉效果 */
    position: relative;          /* 设置为相对定位以使内部绝对定位生效 */
}

.block-element {
    width: 100px;               /* 块级元素宽度 */
    height: 50px;               /* 块级元素高度 */
    background-color: lightblue; /* 背景颜色 */
    margin: auto;               /* 水平居中 */
    position: absolute;          /* 设置为绝对定位 */
    top: 50%;                   /* 距离顶部50% */
    transform: translateY(-50%); /* 垂直居中 */
}

方法四：使用绝对定位

这种方法适用于需要精确控制位置的情况

.relative-container {
    position: relative;          /* 设置父元素为相对定位 */
    width: 300px;               /* 容器宽度 */
    height: 100px;              /* 容器高度 */
    border: 1px solid #000;     /* 边框用于视觉效果 */
}

.block-element {
    position: absolute;          /* 设置为绝对定位 */
    top: 50%;                   /* 距离顶部50% */
    left: 50%;                  /* 距离左侧50% */
    transform: translate(-50%, -50%); /* 使用 transform 调整居中 */
    width: 100px;                /* 块级元素宽度 */
    height: 50px;                /* 块级元素高度 */
    background-color: lightblue; /* 背景颜色 */
}