当前位置：首页 > news >正文

04--CSS基础(3)

news 2025/10/15 10:32:51

一.浏览器调试工具

查看CSS属性

1.打开

在网页上F12或者右键检查打开调试工具

2.标签页含义

elements 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

application 查看浏览器提供的一些扩展功能(本地存储等)

Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究

3.elements标签页使用

ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.

使用左上角箭头选中元素

右侧可以查看当前元素的属性, 包括引入的类.

右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如

字体大小, 可以使用方向键来微调数值.

此处的修改不会影响代码, 刷新就还原了~

如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)

二.元素显示模式

在CSS中,元素有很多显示模式,这里具体介绍两种

块级元素

行内元素

1.块级元素

常见元素

h1 - h6 p div ul ol li ...

特点

独占一行

高度, 宽度, 内外边距, 行高都可以控制.

宽度默认是父级元素宽度的 100% (和父元素一样宽)

是一个容器(盒子), 里面可以放行内和块级元素.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.demo .parent {width: 500px;height: 500px;background-color: green;}.demo .child1 {/* 不指明宽度就默认和父元素一样宽 */height: 200px;background-color: red;}.demo .child2 {/* 不指明高度就默认为0,看不到了 */background-color: blue;}.demo .child3 {background-color: darkgoldenrod;}</style>
</head>
<body><div class="demo"><div class="parent">parent<div class="child1"></div><div class="child2"></div><div class="child3">不指明高度</div></div></div>
</body>
</html>

注:文字类的元素内不能使用块级元素

p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

2.行内元素/内联元素

常见元素

strong

del

ins

span

...

特点

不独占一行, 一行可以显示多个

设置高度, 宽度, 行高无效

左右外边距有效(上下无效). 内边距有效.

默认宽度就是本身的内容

行内元素只能容纳文本和其他行内元素, 不能放块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.demo span {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div class="demo"><span>内容1</span><span>内容2</span><span>内容3</span></div>
</body>
</html>

a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).

a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素.

3.块级元素和行内元素的区别

块级元素独占一行, 行内元素不独占一行

块级元素可以设置宽高, 行内元素不能设置宽高.

块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

4.改变显示模式

使用 display 属性可以修改元素的显示模式.

可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.

display: block 改成块级元素 [常用]

display: inline 改成行内元素 [很少用]

display: inline-block 改成行内块元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.demo1 span {width: 200px;height: 200px;background-color: red;}.demo2 span {width: 200px;height: 200px;display: block;background-color: red;}</style>
</head>
<body><div class="demo1"><span>内容1</span><span>内容2</span><span>内容3</span></div><div class="demo2"><span>内容1</span><span>内容2</span><span>内容3</span></div>
</body>
</html>

三.盒模型

每个HTML元素都相当于一个盒子

1.盒子组成

边框 border

内容 content

内边距 padding

外边距 margin

2.边框

基础属性

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.size {width: 300px;height: 300px;}.test1 {border-style: solid;border-width: 10px;border-color: red;}.test2 {border: solid 2px green;}.test3 {border-top: red;border-bottom: blue;border-left: green;border-right: yellow;border-style: solid;border-width: 4px;}</style>
</head>
<body><div class="size test1">test1</div><div class="size test2">test2</div><div class="size test3">test3</div>
</body>
</html>

当对边框整体设置又对某个边框单独设置了,就近原则

谁在下面就是什么颜色

.test3 {border-top: red;border:green;border-bottom: blue;border-style: solid;border-width: 4px;}

边框撑大盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.set {background-color: yellow;border-style: solid;width: 400px;height: 400px;border-width: 10px;}.box {box-sizing: border-box;}</style>
</head>
<body><div class="set">边框撑大盒子</div><div class="box set">边框不撑大盒子</div>
</body>
</html>

可以看到第一个比400*400大个边框的距离,第二个就整整是400*400

* {
box-sizing: border-box;
}

一般来说这个设置是放在统配符选择器中的,修改浏览器的行为,使得边框不撑大盒子,这里为了演示就放在类里了

3.内边距

padding 设置内容和边框之间的距离

基础写法

默认内容是顶着边框来放置的. 用 padding 来控制这个距离

可以给四个方向都加上边距

padding-top

padding-bottom

padding-left

padding-right

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.set {width: 400px;height: 200px;background-color: yellow;}.pad {padding: 10px;}.box {box-sizing: border-box;}</style>
</head>
<body><div class="set"></div><br><div class="set pad"></div><br><div class="set pad box"></div>
</body>
</html>

复合写法

可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

控制台查看元素的盒模型

这个控制台显示的很清楚

4.外边距

控制盒子和盒子之间的距离

基础写法

可以给四个方向都加上边距

margin-top

margin-bottom

margin-left

margin-right

复合写法

规则与padding相同

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {box-sizing: border-box;}.set {width: 600px;height: 200px;background-color: green;border: red 3px solid;}.mar1 {margin-bottom: 10px;}.mar2 {margin: 4px;}.mar3 {margin:4px 7px 10px 20px;}.mar4 {margin-top: 20px;}</style>
</head>
<body><div class="set mar1"></div><div class="set mar2"></div><div class="set mar3"></div><div class="set mar4"></div>
</body>
</html>

5.块级元素水平居中

前提

指定宽度(如果不指定宽度, 默认和父元素一致)

把水平 margin 设为 auto

三种写法

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 500px;height: 300px;background-color: red;margin: 0 auto;}.div1 .div2 {width: 200px;height: 150px;background-color: rgb(38, 0, 255);text-align: center;/* margin: 0 auto; */}</style>
</head>
<body><div class="div1"><div class="div2">哈哈哈</div></div>
</body>
</html>

这里我们就要介绍一下text-align和margin:auto的区别了

margin: auto 是给块级元素用得到.

text-align: center 是让行内元素或者行内块元素居中的.

另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.

四.去除浏览器的默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.

为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.

使用通配符选择器即可完成这件事情

* {margin: 0;padding: 0;}

五.弹性布局

1.初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100%;height: 200px;background-color: green;}.div1 span {width: 100px;background-color: red;}.div2 {display: flex;}.div2 span {width: 100px;background-color: blue;}.div3 {display: flex;justify-content: space-around;}.div3 span {width: 100px;background-color: yellow;}.div4 {display: flex;justify-content: flex-end;}.div4 span {width: 100px;background-color: aquamarine;}.div5 {display: flex;justify-content: flex-start;}.div5 span {width: 100px;background-color: rgb(13, 112, 118);}</style>
</head>
<body><div class="div1"><span>span1</span><span>span2</span><span>span3</span></div><div class="div2"><span>span1</span><span>span2</span><span>span3</span></div><div class="div3"><span>span1</span><span>span2</span><span>span3</span></div><div class="div4"><span>span1</span><span>span2</span><span>span3</span></div><div class="div5"><span>span1</span><span>span2</span><span>span3</span></div>
</body>
</html>

2.flex布局基本概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子".

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式

基础概念

被设置为 display:flex 属性的元素, 称为 flex container

它的所有子元素立刻称为了该容器的成员, 称为 flex item

flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

注意:当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效

常用属性

justify-content

设置主轴上的子元素排列方式.

使用之前一定要确定好主轴是哪个方向

取值	效果
`flex-start`	子元素紧贴主轴起始端（默认）。
`flex-end`	子元素紧贴主轴结束端。
`center`	子元素在主轴上居中。
`space-between`	首尾贴边，中间等距。
`space-around`	每个子元素两侧间距相等（首尾间距为中间的一半）。
`space-evenly`	所有间距（包括首尾）完全相等。

未指定 justify-content 时, 默认按照从左到右的方向布局

align-items

设置侧轴上的元素排列方式

在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列.

取值	效果
`stretch`	子元素拉伸填满交叉轴（默认）。
`flex-start`	子元素紧贴交叉轴起始端（顶部或左侧）。
`flex-end`	子元素紧贴交叉轴结束端（底部或右侧）。
`center`	子元素在交叉轴上居中。
`baseline`	子元素根据文本基线对齐。
`first baseline`	明确使用首行基线对齐（CSS Grid 常用）。
`last baseline`	明确使用末行基线对齐（CSS Grid 常用）。

取值和 justify-content 差不多

理解 stretch(拉伸):

这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的

高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: red;width: 100%;height: 500px;display: flex;justify-content: space-around;/* 垂直居中 */align-items: center;}div span {width: 150px;height: 100px;background-color: rgb(82, 34, 179);
}</style>
</head>
<body><div><span>span1</span><span>span2</span><span>span3</span></div>
</body>
</html>