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
,可以设置为left
、right
或none
。
浮动带来的主要问题是会影响标准文档流,导致父容器高度塌陷。解决此问题的常用方法包括"清除浮动"。
代码示例:
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: auto
或overflow: hidden
。
代码示例(伪元素清除法):
css
.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
代码示例:
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 50px
或50% 100%
。- 解释 :设置背景图像的尺寸。使用
cover
和contain
可以确保背景图像在不同屏幕尺寸上保持视觉吸引力。
10. 边框属性介绍
CSS边框属性可以定义边框的宽度、样式、颜色等。常用属性包括border-radius
(圆角)、border-width
、border-style
和border-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-height
或flex
布局。
代码示例:
方法一:设置行高和容器高度相同
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的学习......