Web开发-CSS篇-下

1. 盒子模型介绍

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

  • Content:内容区域,显示文本和图片。
  • Padding:内边距,围绕内容的空白区域。
  • Border:边框,包围内边距的边界线。
  • Margin:外边距,盒子与其他元素之间的空白区域。
代码示例:
html 复制代码
<!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来完成这一任务。

代码示例:
html 复制代码
/* CSS Reset Example */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

css 复制代码
/* 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盒子居中显示

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

代码示例:
水平居中(块级元素)
css 复制代码
.container {
    width: 300px;
    margin: 0 auto;
}
水平和垂直居中(块级元素):
css 复制代码
.container {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
水平和垂直居中(行内元素)
css 复制代码
.container {
    text-align: center;
    line-height: 200px;
    height: 200px;
}
.inline-box {
    display: inline-block;
    vertical-align: middle;
}

4. 浮动的介绍及其影响

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

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

代码示例:
css 复制代码
.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: autooverflow: hidden
代码示例(伪元素清除法):
css 复制代码
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

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

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

BFC的生成条件:
  • 浮动元素 (float 属性不为 none)
  • 绝对定位元素 (positionabsolutefixed)
  • display: inline-blocktable-cell
  • overflow 不为 visible
代码示例:
css 复制代码
.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):相对于浏览器窗口进行偏移,元素不随页面滚动。
代码示例:
css 复制代码
.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 仅在元素是定位元素时生效。

代码示例:
css 复制代码
.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中的背景属性用于设置元素的背景,包括颜色、图片、重复方式、位置等。

代码示例:
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 50px50% 100%
  • 解释 :设置背景图像的尺寸。使用 covercontain 可以确保背景图像在不同屏幕尺寸上保持视觉吸引力。

10. 边框属性介绍

CSS边框属性可以定义边框的宽度、样式、颜色等。常用属性包括border-radius(圆角)、border-widthborder-styleborder-color

代码示例:
css 复制代码
.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请求,提高页面加载速度。

代码示例:
css 复制代码
.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. 网页常见布局介绍

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

代码示例:
  • 单栏布局
css 复制代码
.single-column {
    width: 100%;
    padding: 20px;
    background-color: lightblue;
}
  • 多栏布局
css 复制代码
.two-columns {
    display: flex;
    justify-content: space-between;
}

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

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

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

代码示例:
方法一:设置行高和容器高度相同
css 复制代码
.inline-center {
    text-align: center;
    line-height: 100px; /* 行高设置为与容器高度相同 */
    height: 100px;
    border: 1px solid #000;
}
方法二:使用dispaly:tabel-cell
css 复制代码
.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

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

css 复制代码
.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 布局也可以方便地实现块级元素的居中。

css 复制代码
.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 自动

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

css 复制代码
.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%); /* 垂直居中 */
}
方法四:使用绝对定位

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

css 复制代码
.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; /* 背景颜色 */
}

总结

CSS的基础知识差不多已经写完了,感兴趣的可以自己深入了解,接下来开始Javascript的学习......

相关推荐
T^T尚20 分钟前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志42 分钟前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3921 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪1 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山1 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生1 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心1 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师1 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲1 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架
GIS好难学2 小时前
《Vue零基础入门教程》第二课:搭建开发环境
前端·javascript·vue.js·ecmascript·gis·web