CSS基础知识

最新推荐文章于 2024-09-17 22:59:44 发布
最新推荐文章于 2024-09-17 22:59:44 发布
阅读量412 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhp19513507633/article/details/131972364
版权

CSS

CSS 层叠样式表

Cascading style sheets

语法规则

选择器 {
    属性名: 属性值
}

书写位置

<head>
    <title></title>

    <style>
        /* 这里写css */
    </style>
<head>

CSS 引入方式

引入方式书写位置作用范围使用场景
内嵌式style 标签当前页面小案例
外链式link 标签引入单独 css 文件多个页面项目中
行内式标签 style 属性中当前标签配合 js 使用

（1）内嵌式

  • CSS 写在 style 标签中
  • style 标签可以写在页面任意位置，一般放在 head 标签中
<!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>Document</title>

    <style>
        p {
            /* 这里是注释，快捷键ctrl + /  */
            /* 文字颜色设置为红色 */
            color: red;

            /* 字体大小设置为30像素 */
            font-size: 30px;

            /* 背景颜色 */
            background-color: green;

            /* 设置宽度和高度 */
            width: 600px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
    </style>

</head>

<body>
    <p>这是一段设置了css样式的文字</p>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRslG9Ev-1690503691915)(E:\图片\JavaScript\3b4cd496cf47a27989d9e69f59f61819421233b2.png)]

（2）外链式

  • CSS 写在单独的.css文件中
  • 通过 link 标签引入到网页中
/* css-2.css */

p {
  color: red;
}
 
<!DOCTYPE html>
<html lang="en">

<head>
	<!-- 关系: 样式表 -->
    <link rel="stylesheet" href="./css-2.css">
</head>

<body>
    <p>这是一段设置了css样式的文字</p>
</body>

</html>

这是一段设置了css样式的文字

（3）行内式

  • CSS 写在标签 style 属性中
<div style="color: green; background-color: #f1f1f1;">
  这是一段设置了css样式的文字
</div>
这是一段设置了css样式的文字

基础选择器

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器

（1）标签选择器

标签名 {
    属性名：属性值;
} 
<style>
    p {
        color: red;
    }
</style>


<p>你好，世界</p>

你好，世界

（2）类选择器

.类名{
    属性名：属性值;
}
  • 合法的类名：数字、字母、下划线、中划线
  • 一个元素可以有多个类名，空格隔开
<style>
    .red {
        color: red;
    }

    .size {
        font-size: 60px;
    }
</style>

<div class="red">你好，世界</div>
<div class="red size">你好，世界</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgD9mKXQ-1690503691916)(E:\图片\JavaScript\2ce97b84723a05a85088fad53e742851a7900d4d.png)]

（3）id 选择器

#元素id{
    属性名：属性值;
}
  • 页面中唯一，不能重复
  • 一个标签只能有一个 id
  • id 选择器一般与 js 配合使用
<style>
    #name {
        color: green;
    }
</style>

<div id="name">你好，世界</div>
你好，世界

（4）通配符选择器

*{
   属性名：属性值;
}
  • 选中页面所有标签
  • 一般用于统一设置页面样式
/* 清除内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

CSS 字体和文本样式

字体大小

/* 浏览器默认字体大小 16px */
font-size: 16px; 
<div style="font-size: 16px;">Hello World!</div>
<div style="font-size: 26px;">Hello World!</div>
Hello World!
Hello World!

字体粗细

font-weight: 400;
属性值数值效果
normal400正常
bold700加粗
<div style="font-weight: normal">Hello World!</div>
<div style="font-weight: bold">Hello World!</div>
Hello World!
Hello World!

字体样式

font-style: normal;
属性值效果
normal正常
italic倾斜
<div style="font-style: normal;">Hello World!</div>
<div style="font-style: italic;">Hello World!</div>
Hello World!
Hello World!

字体系列

/* 优先使用：微软雅黑 > 黑体 */
/* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
/* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑, 黑体, sans-serif;
操作系统默认字体
windows微软雅黑
MacPingFang SC

常见字体系列

常见字体系列特点场景该系列常见字体
无衬线字体（sans-serif）文字笔画粗细均匀，并且首尾无装饰网页黑体、Arial
衬线字体（serif）文字笔画粗细不均匀，并且首尾有装饰报刊书籍宋体、Times New Roman
等宽字体（monospace）每个字母或文字的宽度相等程序代码编写Consolas、 fira Code
<div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div>
<div style="font-family: 宋体, Times New Roman, serif;">Hello World!</div>
<div style="font-family: Consolas, fira Code, monospace;">Hello World!</div>
Hello World!
Hello World!
Hello World!

文本缩进

/* 首行缩进2个字符 */
text-indent: 2em;

取值

  • 数字 + px
  • 数字 + em(推荐：1em = 当前标签的 font-size 大小)
<p>Hello World!</p>
<p style="text-indent: 2em;">Hello World!</p>

Hello World!

Hello World!

文本水平对齐方式

text-align: center;
属性值效果
left左对齐（默认）
center居中对齐
right右对齐

可居中的标签

  • 文本
  • span标签 、a标签
  • input标签 、img标签

注意: 内容居中需要给父元素设置居中属性

<p>Hello World!</p>
<p style="text-align: center;">Hello World!</p>

Hello World!

Hello World!

文本修饰

/* 常用于清除a标签默认下划线 */
text-decoration: none;
属性值效果
underline下划线 (常用)
line-through删除线 (不常用)
overline上划线 (几乎不用)
none无装饰线 (常用)
<p style="text-decoration: none;">Hello World!</p>
<p style="text-decoration: underline;">Hello World!</p>
<p style="text-decoration: line-through;">Hello World!</p>
<p style="text-decoration: overline;">Hello World!</p>

Hello World!

Hello World!

Hello World!

Hello World!

注意: 开发中会使用text-decoration : none; 清除a标签默认的下划线

行高

line-height: 1.5;

取值

  • 数字 + px
  • 倍数（当前标签 font-size 的倍数）

文本高度

  • 上间距
  • 文本高度
  • 下间距

应用：3

  • 让单行文本垂直居中：line-height=元素父元素高度
  • 取消上下间距：line-height=1
<p style="line-height: 1">Hello World!</p>
<p style="line-height: 1.5;">Hello World!</p>
<p style="line-height: 3;">Hello World!</p>

Hello World!

Hello World!

Hello World!

font 属性简写

层叠性：后面的样式覆盖前面的样式

复合属性

font: [font-style font-weight] font-size/line-height font-family;

省略要求: 只能省略前面两个，如果省略了相当于设置了默认值

在线配置 font 简写形式

https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample

<!-- font: style weight size 字体 -->
<div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div>
Hello World!

颜色取值文字颜色 color

  • 背景颜色 background-color
颜色表示方式表示含义属性值
关键词预定义的颜色名red、green、blue
rbg 表示法红绿蓝三原色，取值 0-255rgb(0,0,0)
rgba 表示法红绿蓝三原色+透明度，取值 0-1rgba(0, 0, 0, 0.5)
十六进制表示法#开头#000000 简写 #000
<p style="color: green;">Hello World!</p>
<p style="color: rgb(0, 255, 0);">Hello World!</p>
<p style="color: rgba(0, 255, 0, 0.5);">Hello World!</p>
<p style="color: #00FF00;">Hello World!</p>
<p style="color: #0F0;">Hello World!</p>

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

水平居中

margin: 0 auto;

div、p、h 需要设置元素的宽度，否则会自动撑满父元素

<div style="margin: 0 auto; width:200px; border: 1px solid #cccccc; text-align: center;">Hello World!</div>
Hello World!

设置div标签居中

<style>
    div{
		width: 300px;
         height: 300px;
         background-color: pink;
         margin: 0 auto;
    }
</style>
<body>
	<div></div>
</body>

CSS 特性

  • 继承性

  • 层叠性

  • 优先级

继承性 inherited

（1）子元素有默认继承父元素样式的特点 (子承父业)

可继承的常见属性（文字属性都可以继承）

color 
font-style font-weight font-size font-family 
text-align text-indent
line-height
...

控制文字的属性都能继承，不是控制文字的属性都不能继承

注意: 可以通过调试工具判断样式是否可继承

（2）继承失效的特殊情况

如果元素有浏览器默认样式，就不继承父元素属性

  • a 标签的 color 会继承时效
  • h 系列标签的 font-size 会继承失效

示例 ：

<style>
    div {
        color: green;
        font-size: 16px;
    }
</style>

<div>
    <h1>将进酒</h1>
    <a href="#">李白 〔唐代〕</a>
    <p>君不见黄河之水天上来，奔流到海不复回。</p>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7bTnVZO-1690503691916)(E:\图片\JavaScript\3af64cb4f2b519fb5ae9bfaa027d76d0c64935da.png)]

层叠性

同一个标签设置不同的样式

  • 样式层叠叠加，共同作用在标签上

同一个标签设置相同的样式

  • 样式会层叠覆盖，最终写在最后的样式生效

特性:

  • 给同一个标签设置不同的样式 -> 此时样式会重叠叠加 -> 会共同作用在标签上
  • 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效

注意: 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

技巧: 编辑器多行输入

示例 ：

<style>
    .color--red {
        color: red;
    }

    /* 绿色的定义位置在红色之后 */
    .color--green {
        color: green;
    }

    .font-size--20 {
        font-size: 20px;
    }
</style>

<div class="color--green color--red font-size--20">
    君不见黄河之水天上来，奔流到海不复回。
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK5YWMBi-1690503691917)(E:\图片\JavaScript\8ebf3b1f0c5d79aa7e8bf7f5788f1059837a335a.png)]

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式（由低到高）

  • 继承
  • 通配符选择器 (*)
  • 标签选择器
  • 类选择器
  • id 选择器
  • 行内样式
  • !important（慎重使用）
  • 继承 < 通配符选择器(*) < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

总结：选择范围越小，优先级越高

注意:

  • !important写在属性值的后面，分号的前面!
  • !important不能提升继承的优先级，只要是继承优先级最低!
  • 实际开发中不建议使用 !important

复合选择器权重叠加

场景: 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式: (每级之间不存在进位)

(第一级,第二级,第三级,第四级)
(0, 0, 0, 0)

复合选择器中: (行内, ID, 类, 标签)
  • 第一级 行内样式的个数
  • 第二级 id 选择器的个数
  • 第三级 类选择器的个数
  • 第四级 标签选择器的个数

比较规则:

  1. 先比较第一级数字，如果比较出来了，之后的通通不看
  2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看
  3. … 以此类推
  4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性 (谁在下面，谁说了算!)

需要注意：

  • !important 如果不是继承，则权重最高，天下第一!
  • 继承权重最低

chrome 调试: 元素右键 -> 检查元素

示例 1：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 2, 0, 0) */
    #father #son {
        color: blue;
    }

    /* (0, 1, 1, 1) */
    #father p.c2 {
        color: black;
    }

    /* (0, 0, 2, 2) */
    div.c1 p.c2 {
        color: red;
    }

    /* 继承 */
    #father {
        color: green !important;
    }

    /* 继承 */
    div#father.c1 {
        color: yellow;
    }
</style>

<div id="father" class="c1">
    <p id="son" class="c2">白日依山尽，黄河入海流。</p>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WB6Ry9UB-1690503691917)(E:\图片\JavaScript\df5e221f32cde166c9df71b438da2d4a210bce1f.png)]

示例 2：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 0, 2) */
    div div {
        color: skyblue;
    }

    /* (0, 0, 0, 1) */
    div {
        color: red;
    }
</style>

<div>
    <div>
        <div>白日依山尽，黄河入海流。</div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5IkQmWh-1690503691917)(E:\图片\JavaScript\0851b79fc0c90527f7e3a3ead3d233f6247508c6.png)]

示例 3：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 0, 7) */
    div div div div div div div {
        color: red;
    }

    /* (0, 0, 1, 0) */
    .one {
        color: green;
    }
</style>

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div class="one">白日依山尽，黄河入海流。</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5duarqdW-1690503691918)(E:\图片\JavaScript\0d8be35c401e8dbc12214816c1ef7d2e7144a9f3.png)]

示例 4：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 2, 1) */
    .c1 .c2 div {
        color: red;
    }

    /* (0, 1, 0, 1) */
    div #box3 {
        color: green;
    }

    /* (0, 1, 0, 1) */
    #box1 div {
        color: blue;
    }
</style>


<div id="box1" class="c1">
    <div id="box2" class="c2">
        <div id="box3" class="c3">白日依山尽，黄河入海流。</div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lULB3M6b-1690503691918)(E:\图片\JavaScript\397e781f4b77cd1bf8e81fc5be9e211ef4049072.png)]

示例 5：

<style>
    /* (行内，id, 类，标签) */
    /* 都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效 */
    /* 都是继承，最近的父级生效 */
    /* 继承 */
    div p {
        color: red;
    }


    /* 继承 */
    .father {
        color: green;
    }
</style>


<div class="father">
    <p class="son">
        <span>白日依山尽，黄河入海流。</span>
    </p>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPguubIc-1690503691918)(E:\图片\JavaScript\9a015495200665d638fa682028967590c12957de.png)]

CSS 选择器

选择器

复合选择器

（1）后代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满

  • 后代包括: 儿子、孙子、重孙子 …
  • 后代选择器中，选择器与选择器之前通过空格隔开
父选择器 后代选择器 {
}

示例：

<style>
    /* 找到div中的儿子p设置文字颜色是红色 */
    div p {
        color: red;
    }
</style>

<body>
    <!-- 后代: 儿子，孙子，重孙子... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div中的p标签</p>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zp3Flneq-1690503691919)(E:\图片\JavaScript\34ad9d7c79e27a34fcd530ce2c76f31ef3eedfe7.png)]

（2）子代选择器

根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

父选择器 > 子代选择器 {
}

示例：

<style>
    div>a {
        color: red;
    }
</style>
<body>
<div>
    父级
    <a href="#">这是div里面的a</a>
    <p>
        <a href="#">这是div里面的p里面的a</a>
    </p>
</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFvcRJrB-1690503691919)(E:\图片\JavaScript\2b63ef60ac773686806b4c499dac60df4641f5de.png)]

<style>
    div a {
        color: red;
    }
</style>
<body>
<div>
    父级
    <a href="#">这是div里面的a</a>
    <p>
        <a href="#">这是div里面的p里面的a</a>
    </p>
</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvMRabh9-1690503691920)(E:\图片\JavaScript\fad70f3735ce0163c8595193c8e152a253f4e2e3.png)]

并集选择器

作用: 同时选择多组标签，设置相同的样式

选择器1, 选择器2 {
}

示例：

<style>
    p,
    span {
        color: green;
    }
</style>

<div>
    <span>Hello World!</span>
    <p>Hello World!</p>
</div>

Hello World!

Hello World!

交集选择器

作用: 选中页面中同时满足多个选择器的标签

选择器1选择器2 { }

示例：

<style>
    span.title {
        color: green;
    }
</style>

<div>
    <p class="title">Hello World!</p>
    <span class="title">Hello World!</span>
</div>

Hello World!

Hello World!

注:

  • 交集选择器中的选择器是紧挨着的，没有东西分隔
  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面

hover 伪类选择器

作用: 选中鼠标悬停在元素上的状态，设置样式

选择器:hover {
}

示例：

<style>
    p:hover {
        color: green;
    }
</style>

<div>
    <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
    <p>Hello World!</p>
    <span>Hello World!</span>
</div>

Emmet 语法

  • 简写语法，快速生成代码
  • VS Code 等代码编辑器自带
语法示例效果
标签名div<div></div>
类选择器.red<div class="red"></div>
id 选择器#one<div id="one"></div>
交集选择器p.red#one<p class="red" id="one"></p>
子代选择器ul>li<ul><li></li></ul>
内部文本ul>li{内容}<ul><li>Hello</li></ul>
创建多个ul>li*3<ul><li></li><li></li><li></li></ul>
创建自增ul>li{$}*3<ul><li>1</li><li>2</li><li>3</li></ul>
同级div+p<div></div><p></p>

css 提示

单词首字母效果
fwfont-weight
wwidth
hheight
bgcbackgroud-color
lhline-height
w300+h200width: 300px;height: 200px;

CSS 背景相关属性

背景颜色

/* 默认背景色是透明；背景色在背景图之下*/
background-color: transparent;

背景图片

background-image: url('图片路径');

注意:

  • 背景图片中 url 中可以省略引号
  • 背景图片默认是在水平和垂直方向铺的
  • 背景图片仅是指给盒子起到装饰效果，类似于颜色，不能撑开盒子的

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        width: 500px;
        background-color: pink;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwZUbH8E-1690503691921)(E:\图片\JavaScript\2898bb2fe7e2fa81561c5971158b13f414050233.png)]

背景平铺

属性名: background-repeat (bgr)

取值效果
repeat（默认值）水平和垂直方向都平铺
no-repeat不平铺
repeat-x水平方向平铺（x 轴）
repeat-y垂直方向平铺（y 轴）

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        width: 500px;
        background-color: pink;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gyNiPYNX-1690503691921)(E:\图片\JavaScript\11973b8cb73d778947ea5ac8cc5616ad9186c1cd.png)]

背景位置

属性名: background-position(bgp)

background-position: 水平方向位置 垂直方向位置;

属性值

方位名词（最多只能表示 9 个位置）

  • 水平方向：left center right
  • 垂直方向：top center bottom

数字+px（坐标）

  • 坐标轴 原点(0,0) 盒子的左上角
  • x 轴 水平方向
  • y 轴 垂直方向
  • 图片左上角与坐标原点重合

注意:

  • 正数: 向右向下移动; 负数: 向左向右移动
  • 背景色和背景图只显示在盒子里面

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        width: 500px;
        background-color: pink;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zdKThR6-1690503691922)(E:\图片\JavaScript\3beec9b190eed6f226a3674dd27bb70496886b4c.png)]

背景属性连写

/* 不分先后顺序 */
background: color image repeat position;

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        width: 500px;
        /*
        两种写法等价
        background-color: pink;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
        background-position: center;
        */
        background: pink url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0) no-repeat center;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkNIfkZe-1690503691922)(E:\图片\JavaScript\79d34affb1e75b7677bc91b984e3269226dfe5cc.png)]

img 标签和背景图片区别

img

  • 不设置高宽会默认显示
  • 重要突出的图使用 img

background-image

  • 需要设置元素尺寸
  • 装饰性图片使用背景图

元素显示模式

  • 块级
  • 行内
  • 行内块

块级元素 (block)

  • 自动换行

  • 独占一行 (一行只能显示一个)

  • 宽度默认为父元素的100% ；高度默认由内容撑开

  • 可以设置宽度和高度

代表标签

div p h ul li dl dt dd form
header nav footer

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uphRuD5n-1690503691922)(E:\图片\JavaScript\ac58396dbac2c97d4a96a5b3ca001ace5aa1956c.png)]

**注意: **

  • 块级元素可以嵌套任意元素
  • 块级文字元素中不能放入其他块级元素，比如： p中不要嵌套div、p、h

行内元素 (inline)

  • 一行显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽度和高度
  • 行内元素的padding可以设置
  • margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

代表标签

a span b u i s strong ins em del

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3qr5SES-1690503691923)(E:\图片\JavaScript\769b7d8a95dad224bf8452e3f8670ff50b466f8f.png)]

注意: 行内元素尽量只放行内元素与行内块元素，链接里边不能再放链接，特殊情况a可以嵌套任意元素。

行内块元素 (inline-block)

综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

  • 一行显示多个
  • 可以设置宽度和高度 (加宽高生效)

代表标签

input textarea button select td img

注: img标签有行内块元素特点，但是Chrome调试工具中显示的结果是inline

元素显示模式转换

display: block;
属性值效果
block块级元素
inline-block行内块元素
inline行内元素

注意：当元素浮动（float）时会转化成行内块元素特点。

HTML 嵌套规范注意点

  • 块级元素一般作为大容器;
  • 可以嵌套文本、块级元素、行内元素、行内块元素

p 标签中不要嵌套 div p h 等块级元素

  • a 标签内部可以嵌套任意内容

a 标签不能嵌套 a 标签

CSS 盒模型

工具：PxCook https://www.fancynode.com.cn/pxcook

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0aig4sc-1690503691923)(E:\图片\JavaScript\8f54a1f504e7f8f354afd7a17888f52575f43bc0.png)]

盒子模型

（1）盒子的概念

  • 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
  • 浏览器在渲染 (显示) 网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子

（2）盒子模型：css中规定每个盒子分别由: 内容区域 (content)、内边距区域 (padding)、边框区域 (border)、外边距区域 (margin)构成，这就是盒子模型

  • 外边距区域 margin
  • 边框区域 border
  • 内边距区域 padding
  • 内容区域 content

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nP2D5yOT-1690503691924)(E:\图片\JavaScript\d60e7d17a37c03d12faf09f7ad2934c15219fa54.png)]

（3）盒子内容(content)的宽高

  • width
  • height
.box {
  width: 100px;
  height: 100px;
}

边框 border

/* 粗细 线条样式 颜色（不分先后顺序）*/
/* 默认4个方向都有*/
border: 10px solid red;

/* 单个方向 */
border-top: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
border-right: 10px solid red;

/* 单个属性 */
border-width: 边框粗细
border-style: 边框样式 (实线、虚线、点线)
border-color: 边框颜色

线条可选样式

  • solid 实线
  • dashed 虚线
  • dotted 点线

布局顺序：

  • 从外到内: 先宽高背景色，放内容，调节内容的位置，最后控制文字细节
  • 从上到下

导航实例

<style>
    .box {
        border-top: 3px solid #ff8500;
        border-bottom: #edeef0;
    }

    .box a {
        /* 先写盒子大小 */
        display: inline-block;
        width: 80px;
        height: 40px;

        /* 推荐先写上背景，便于查看盒子大小 */
        /* background-color: #edeef0; */

        /* 再写文字样式 */
        line-height: 40px;
        text-align: center;
        color: #4c4c4c;
        font-size: 12px;
        text-decoration: none;
    }

    /* 鼠标悬停效果 */
    .box a:hover {
        background-color: #edeef0;
        color: #ff8044;
    }
</style>

<div class="box">
    <a href="#">首页</a>
    <a href="#">文章</a>
    <a href="#">分类</a>
    <a href="#">标签</a>
</div>

内边距 padding

作用：设置 边框 与 内容区域 之间的距离

/* 可取 4 个值、3 个值、2 个值、1 个值 */
padding: 上 右 下 左;
padding: 上 左右 下;
padding: 上下 左右;
padding: 上下左右;

/* 单个方向 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

规律：从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面的!!

盒子尺寸计算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y9qYbU1v-1690503691924)(E:\图片\JavaScript\f64091964ccbe5015c6ae1326052dccd04c12e82.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6iDSBAez-1690503691925)(E:\图片\JavaScript\c6503fd65e418fa1f19c6e4680533fedc33d7a74.png)]

box-sizing: content-box 默认
盒子最终宽度 = width(content) + padding + border

box-sizing: border-box
盒子最终宽度 = width = padding + border + content

外边距 margin

设置值的方式和 padding 类似

/* 可取 4 个值、3 个值、2 个值、1 个值 */
margin: 上 右 下 左;
margin: 上 左右 下;
margin: 上下 左右;
margin: 上下左右;

/* 单个方向 */
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

使用 margin 让元素居中

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 0 auto;
}

清除浏览器默认样式

京东

* {
  margin: 0;
  padding: 0;
}

淘宝

blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

常用的清除样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

去掉列表前的符号

ul {
  list-style: none;
}

外边距折叠现象

  • 合并现象
  • 塌陷现象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lmpP5WJz-1690503691925)(E:\图片\JavaScript\0f98a4695e8c996c5ba4f79f38d619f549c035df.png)]

合并现象

  • 场景：垂直布局的块级元素，上下的 margin 会合并
  • 结果：最终两者距离为 margin 的最大值
  • 解决方法：只给其中一个盒子设置 margin
<style>
    .box-1 {
        width: 100px;
        height: 100px;
        background-color: #698e6a;
        margin-bottom: 50px;
    }

    .box-2 {
        margin-top: 100px;
        width: 100px;
        height: 100px;
        background-color: #7f9faf;
    }
</style>

<div class="box-1"></div>
<div class="box-2"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiKOBZnJ-1690503691925)(E:\图片\JavaScript\a86af690bdd7774bfc2f6a4e76aa18ad8e5cfe60.png)]

塌陷现象

  • 场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
  • 结果：导致父元素一起往下移动
  • 解决方法：
  1. 给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
  2. 给父元素设置 overflow:hidden;
  3. 转换为行内块元素
  4. 设置浮动
<style>
    .box-father {
        width: 200px;
        height: 200px;
        background-color: #b2b6b6;
    }

    .box-child {
        width: 100px;
        height: 100px;
        background-color: #7f9faf;
        margin-top: 100px;
    }

    .resolve {
        overflow: hidden;
        margin-top: 20px;
    }
</style>

<div class="box-wrap">
    <!-- 元素的margin-top 作用在了父元素上 -->
    <div class="box-father">
        <div class="box-child"></div>
    </div>

    <!-- [完美解决方案]给父元素设置 overflow:hidden; -->
    <div class="box-father resolve">
        <div class="box-child"></div>
    </div>

</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yz4ZLMm1-1690503691926)(E:\图片\JavaScript\a1f2a59ce9dabe3cdd22d0628ac0663f8b673816.png)]

行内标签的 margin/padding

如果想要通过 margin / padding 改变行内标签的垂直位置，无法生效

即，行内标签的 margin-top 和 bottom 不生效

行内标签的 padding-top 和 bottom 不生效

行内标签使用行高 line-height 实现垂直位置

<style>
    .box {
        border: 1px solid #eee;
    }

    .box span {
        margin: 20px;
        padding: 20px;
    }
</style>

<div class="box">
    <span>乾坤空落落，岁月去堂堂。</span>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6ioiix0-1690503691927)(E:\图片\JavaScript\1a9fec9ffbd104e5991ec18e967815c60d346b7f.png)]

浮动

结构伪类选择器

  • 作用：根据元素在 HTML 中的结构关系查找元素
  • 优势：减少对 HTML 中类的依赖，有利于保持代码整洁
  • 场景：常用于查找某父级选择器中的子元素
选择器说明
E:first-child {}匹配父元素中的第一个子元素 E
E:last-child {}匹配父元素中的最后一个子元素 E
E:nth-child(n) {}匹配父元素中的第 n 个子元素 E
E:nth-last-child(n) {}匹配父元素中的倒数第 n 个子元素 E

n 可以写公式

n 可取值：0 1 2 3 4…

功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前 5 个-n+5
找到从第 5 个往后n+5

示例：

<style>
    ul li {
        background-color: #ccc;
        width: 200px;
    }

    ul li:first-child {
        background-color: red;
    }

    ul li:last-child {
        background-color: yellow;
    }

    ul li:nth-child(3) {
        background-color: pink;
    }
</style>

<!-- ul>li{第$个li}*8 -->
<ul>
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
    <li>第6个li</li>
    <li>第7个li</li>
    <li>第8个li</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R46r9Q38-1690503691928)(E:\图片\JavaScript\cb805c4b842c68db179b70a39f674681eb0558d0.png)]

伪元素

  • 元素：HTML 设置的标签
  • 伪元素：由CSS 模拟出的标签效果，装饰性内容
伪元素作用
::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

注意点：

  • 必须设置 content 属性才能生效
  • 伪元素默认是行内元素
.box::before {
  content: ''; // 必须加属性
}

标准流

标准流：又称为文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流的排版规则:

  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动

  • 早期：图文环绕
  • 现在：网页布局
float: left/right;

行内元素或行内块元素换行书写会产生一个空格

浮动的特点

  • 浮动的标签默认顶对齐，可使用 margin-top 修改距离顶部距离
  • 浮动元素会脱离标准流（脱标），在标准流中不占用位置 (相当于从地面飘到了空中)
  • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动 (默认浮动是顶对齐)
  • 浮动标签具备行内块特点：
    1. 一行显示多个
    2. 可设置宽高

注意:

  • 浮动的元素不能通过 margin: 0 auto 设置居中

示例：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: 0 auto;

        width: 1226px;
        height: 614px;
    }

    .left {
        float: left;

        width: 234px;
        height: 614px;
        background-color: #800080;
    }

    .right {
        float: right;

        width: 978px;
        height: 614px;
    }

    ul {
        /* 去掉列表符号 */
        list-style: none;
    }

    .right li {
        float: left;

        margin-right: 14px;
        margin-bottom: 14px;

        width: 234px;
        height: 300px;
        background-color: #87ceeb;
    }

    /* 如果父级的宽度不够，子级会自动换行 */
    /* 第四个li 和第八个li 右侧间距清除 */
    .right li:nth-child(4n){
        margin-right: 0px;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rg3hPwrr-1690503691928)(E:\图片\JavaScript\5a3befb643e3794b86b912bfaa05997a5794bc57.png)]

布局: 从外到内，从上到下，从左到右

CSS 书写顺序

​ 1. 浮动 / display

​ 2. 盒子模型 margin border padding 宽度高度背景色

​ 3. 文字样式

常用 css

  • 内减模式：box-sizing: border-box;
  • 版心居中： margin: 0 auto;

清除浮动

含义: 清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

<style>
    /* 初始化样式 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 外层容器 */
    .box {
        background-color: #ccc;
        /* margin: 0 auto; */
    }

    /* 左边 */
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    /* 右边 */
    .right {
        float: right;
        background-color: green;
        width: 200px;
        height: 200px;
    }

    .footer {
        height: 20px;
        background-color: saddlebrown;
    }
</style>

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!-- 期望footer元素紧跟box下面排列 -->
<div class="footer"></div>

清除浮动的方法

  1. 直接设置父元素高度
    • 优点: 简单粗暴，方便
    • 缺点: 有些布局不能固定父元素高度。如: 新闻列表、京东推荐模块
  2. 额外标签
  • 在父元素内容的最后添加一个块级元素
  • 给添加的块级元素设置 clear:both;
.clearfix {
  clear: both;
}

案例:

<style>
    .top {
        margin: 0 auto;
        width: 1000px;
        /* height: 300px; */
        background-color: pink;
    }

    .bottom {
        height: 100px;
        background-color: green;
    }

    .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: #ccc;
    }

    .right {
        float: right;
        width: 790px;
        height: 300px;
        background-color: skyblue;
    }

    .clearfix {
        /* 清除左右两侧浮动的影响 */
        clear: both;
    }
</style>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OjNdA8Ho-1690503691929)(E:\图片\JavaScript\91938a0b2ddb652b2b91f4c657559271e6635ed4.png)]

  1. 单伪元素清除法

用伪元素替代了额外标签

优点：直接给标签加类即可清除浮动

（1）基本写法

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

（2）补充写法

.clearfix::after {
  content: '';
  display: block;
  clear: both;

  /* 兼容低版本IE */
  height: 0;
  visibility: hidden;
}
  1. 双伪元素清除法
/* 解决外边距塌陷问题 */
/* 外边距塌陷: 父子标签，都是块级，子级加margin会影响父级的位置 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

<style>
    /* 初始化样式 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 外层容器 */
    .box {
        background-color: #ccc;
        /* margin: 0 auto; */
    }

    /* 左边 */
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    /* 右边 */
    .right {
        float: right;
        background-color: green;
        width: 200px;
        height: 200px;
    }

    .footer {
        height: 20px;
        background-color: saddlebrown;
    }

    .clearfix::before,
    .clearfix::after {
        content: '';
        display: table;
    }

    .clearfix::after {
        clear: both;
    }
</style>

<!-- 清除浮动 -->
<div class="box clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!-- 期望footer元素紧跟box下面排列 -->
<div class="footer"></div>
  1. 给父元素设置 overflow: hidden

CSS 定位

网页常见布局方式

  1. 标准流
  • 块级元素独占一行 -> 垂直布局
  • 行内元素/行内块元素一行显示多个 -> 水平布局
  1. 浮动
  • 原本垂直布局的 块级元素变成水平布局
  1. 定位
  • 可以让元素自由的摆放在网页的任意位置
  • 一般用于 盒子之间的层叠情况
  • 让盒子固定在页面某一位置

使用定位

  1. 设置定位方式

属性名: position

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed
  1. 设置偏移值
  • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
  • 选取原则：就近原则 (离哪边近用哪个)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bXWcXOqz-1690503691929)(E:\图片\JavaScript\2a75a002962f6bf756f0daaf6624e0fe73f116c4.png)]

  1. 偏移方向
  • 水平距离左边 left
  • 水平距离右边 right
  • 垂直距离上边 top
  • 垂直距离下边 bottom

css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性

静态定位

介绍：静态定位是默认值，就之前识的标准流。

代码: position: static

注意:

  • 静态定位就是之前标准流，不能通过方位属性进行移动
  • 之后说的定位不包括静态定位，一般特指后几种: 相对、绝对、固定

相对定位

自恋型定位，相对于自己之前的位置进行移动

代码: position: relative;

特点:

  • 需要配合方位属性实现移动

  • 相对于自己原来位置进行移动

  • 在页面中占位置 -> 没有脱标 (不改变显示模式)

  • 占有原来的位置

  • 仍然具备标签原有的显示模式特点

position: relative
left: 100px;
top: 100px;

Tips: 如果 4 个定位都有，以 top 和 left 为准

绝对定位

拼爹型定位，相对于非静态定位的父元素进行定位移动

代码: position: absolute;

特点:

  • 需要配合方位属性实现移动

  • 默认相对于浏览器可视区域进行移动

  • 在页面中不占位置 -> 已经脱标

  • 相对于非静态定位的父元素定位

  • 不占有原来的位置

  • 改变标签的显示模式: 具备行内块特点 (在一行共存，宽高生效)

  • 默认以浏览器窗口定位

/* 绝对定位:
         先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位;
         有父级，但父级没有定位，以浏览器窗口为参照物进行定位;
*/
position: absolue
left: 100px;
top: 100px;
  • 子绝父相：父级相对定位，子级绝对定位
  • 绝对定位查找父级的方法：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

注意:

  • 绝对定位的盒子，不能使用 左右margin auto 居中
  • 绝对定位的盒子显示模式具备行内块特点: 加宽高高度生效，如果没有宽度也没有内容，盒子的尺寸就是0

固定定位

死心眼型定位，相对于浏览器进行移动

代码: positions: fixed;

特点：

  • 脱标-不占位置
  • 改变位置相对于浏览器定位
  • 具备行内块特点

元素层级关系

  1. 不同布局方式元素的层级关系：
标准流 < 浮动 < 定位
  1. 不同定位之间的层级关系:
    • 相对、绝对、固定默认层级相同
    • 此时 HTML 中写在下面的元素层级更高，会覆盖上面的元素 (默认情况下)
  2. 设置元素层级
/*  
	z-index的默认值是0；
	数值越大，显示越靠前 
	z-index必须配合定位才能生效
*/
z-index: 整数;

案例：子盒子在父盒子中水平居中

方式一：margin

<style>
    .box-wrap {
        position: relative;

        width: 500px;
        height: 500px;

        background-color: skyblue;
    }

    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        /* 手动计算盒子的一半 */
        margin-left: -150px;
        margin-top: -150px;

        width: 300px;
        height: 300px;

        background-color: pink;
    }
</style>

<div class="box-wrap">
    <div class="box"></div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ICI5EGUz-1690503691929)(E:\图片\JavaScript\c2be94f91b0d564e9389bdb3ac8b3e39f8372bcf.png)]

方式二：transform

<style>
    .box-wrap {
        position: relative;

        width: 500px;
        height: 500px;

        background-color: skyblue;
    }

    .box {
        position: absolute;
        left: 50%;
        top: 50%;

        /* 移动自身一半 */
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;

        background-color: pink;
    }
</style>

<div class="box-wrap">
    <div class="box"></div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbRn4cPe-1690503691930)(E:\图片\JavaScript\c2be94f91b0d564e9389bdb3ac8b3e39f8372bcf.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKmBpGRY-1690503691930)(E:\图片\JavaScript\aef16799db78f1e8d7e8a07b6e2237845f899c5e.png)]

CSS 装饰

垂直对齐 vertical-align

基线(baseline)：浏览器文字类型元素排版中存在用于对齐的基线

image-20230308222820345

属性名: vertical-align

属性值:

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐
vertical-align: middle;

示例:

<style>
    .text {
        border-bottom: 1px solid #ccc;
    }

    .text-baseline {
        vertical-align: baseline;
    }

    .text-top {
        vertical-align: top;
    }

    .text-middle {
        vertical-align: middle;
    }

    .text-bottom {
        vertical-align: bottom;
    }
</style>
<div>
    <span class="text text-baseline">绝知此事要躬行</span>
    <span class="text text-top">绝知此事要躬行</span>
    <span class="text text-middle">绝知此事要躬行</span>
    <span class="text text-bottom">绝知此事要躬行</span>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ZWzVr2W-1690503691931)(E:\图片\JavaScript\45740d833c29395fa5ac6c9a7a45a018b498ee29.png)]

浏览器遇到行内和行内块标签当做文字处理，文字默认基线对齐

块标签不会当做文字处理

示例一：输入框垂直居中对齐

<style>
    input {
        height: 50px;
    }

    input[type="button"] {
        height: 30px;
    }

    .middle input {
        vertical-align: middle;
    }
</style>

<div>

    <input type="text" />
    <input type="button"
           value="搜索" />
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2tH52jVf-1690503691931)(E:\图片\JavaScript\2c004fa0e857ea1fcaaacc8c704b8e32875a64ee.png)]

示例二：图片垂直居中对齐

<style>
    .box {
        border: 1px solid #ccc;
        width: 500px;
    }

    img {
        height: 200px;
        width: 200px;
    }

    .middle-box {
        margin-top: 20px;
    }

    .middle-box img {
        vertical-align: middle;
    }
</style>

<div>
    <div class="box">
        <img src="https://api.isoyu.com/bing_images.php" /><input type="button"
               value="搜索" /></div>

    <div class="box middle-box">
        <img src="https://api.isoyu.com/bing_images.php" /><input type="button"
               value="搜索" /></div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cz3Rp3R-1690503691932)(E:\图片\JavaScript\7fcc052ea0fdf74774a6eac832e6daf6b71f6e02.png)]

示例三：图片水平垂直居中

<style>
    .box {
        width: 400px;
        height: 400px;
        background-color: skyblue;
        /* 水平居中 */
        text-align: center;
    }

    .box::after {
        height: 100%;
        content: '';
        display: inline-block;
        vertical-align: middle;
    }

    img {
        height: 200px;
        width: 200px;
        /* 垂直居中 */

        /*方式一*/
        vertical-align: middle;
        /*方式二*/
        /* display: block; */
    }
</style>

<div class="box">
    <img src="https://api.isoyu.com/bing_images.php" />
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPJttC2i-1690503691932)(E:\图片\JavaScript\e94dbaf561744d5a87bcb32e653ae602dfe4800a.png)]

光标类型 cursor

设置鼠标光标在元素上时显示的样式

属性名: cursor

属性值:

属性值效果
default默认，箭头
pointer小手，提示可点击
text工字型，提示可选择、复制
move十字光标，提示可移动

示例：

<style>
    .cursor--pointer {
        cursor: pointer;
    }

    .cursor--text {
        cursor: text;
    }

    .cursor--move {
        cursor: move;
    }
</style>

<div class="box">
    <div>默认，箭头</div>
    <div class="cursor--pointer">小手，提示可点击</div>
    <div class="cursor--text">工字型，提示可选择</div>
    <div class="cursor--move">十字光标，提示可移动</div>
</div>

边框圆角 border-radius

让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名: border-radius

赋值规则: 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

/* 单值 4个角一样*/
border-radius: 数字px/百分比;

/* 多值 左上角开始，顺时针赋值，没有赋值看对角*/
border-radius: 左上 右上 右下 左下;

（1）正圆

  • 盒子必须是正方形
  • 设置边框圆角为盒子宽高的一半

示例：

<style>
    .box {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: skyblue;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcHlbFIe-1690503691932)(E:\图片\JavaScript\2a89cc677acd1d0e2f83a6f32f613c6c44e6bbb5.png)]

/* 最大值 50% */
border-radius: 50%;

（2）胶囊按钮

  • 盒子设置为长方形
  • 设置边框圆角取值为高度的一半
border-radius: height/2;

示例：

<style>
    .box {
        width: 100px;
        height: 50px;
        border-radius: 25px;
        background-color: skyblue;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TX5tfbx-1690503691933)(E:\图片\JavaScript\b419a93ebe49bfb02ad51fe1e4a3002dfe40d61c.png)]

溢出部分效果 overflow

溢出部分：指的是盒子内容部分超出盒子范围的区域

属性名: overflow

属性值:

属性值效果
visible默认，溢出部分可见
hidden溢出部分隐藏
scroll无论是否溢出都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条

示例：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;

        overflow: hidden;
    }
</style>

<div class="box">
    江夏赠韦南陵冰

    李白〔唐代〕

    胡骄马惊沙尘起，胡雏饮马天津水。
    君为张掖近酒泉，我窜三色九千里。(三色 一作：三巴)
    天地再新法令宽，夜郎迁客带霜寒。
    西忆故人不可见，东风吹梦到长安。
    宁期此地忽相遇，惊喜茫如堕烟雾。
    玉箫金管喧四筵，苦心不得申长句。
    昨日绣衣倾绿尊，病如桃李竟何言。
    昔骑天子大宛马，今乘款段诸侯门。
    赖遇南平豁方寸，复兼夫子持清论。
    有似山开万里云，四望青天解人闷。
    人闷还心闷，苦辛长苦辛。
    愁来饮酒二千石，寒灰重暖生阳春。
    山公醉后能骑马，别是风流贤主人。
    头陀云月多僧气，山水何曾称人意。
    不然鸣笳按鼓戏沧流，呼取江南女儿歌棹讴。
    我且为君槌碎黄鹤楼，君亦为吾倒却鹦鹉洲。
    赤壁争雄如梦里，且须歌舞宽离忧。
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6l5wUnjc-1690503691933)(E:\图片\JavaScript\a466e7e4a8fe0f5db2820f9ab9847f41c3848b45.png)]

元素本身隐藏

常见的属性:

  • visibility: hidden
  • display: none
/* 占位隐藏 */
visibility: hidden;

/* 不占位隐藏（常用） */
display: none;
<style>
    .box-1 {
        width: 100px;
        height: 100px;
        visibility: hidden;
    }

    .box-2 {
        width: 100px;
        height: 100px;
        display: none;
    }
</style>

<div class="box-1"></div>
<div class="box-2"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F36AXNTu-1690503691934)(E:\图片\JavaScript\36b8f8239b36ef6f0123cdafa445dd2405d24c19.png)]

示例：默认隐藏 鼠标悬停显示

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: relative;
    }

    .box:hover .box-qrcode {
        display: block;
    }

    .box-qrcode {
        position: absolute;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
        display: none;
    }
</style>

<div class="box">
    <div class="box-qrcode"></div>
</div>

元素整体透明 opacity

属性值：

  • 0-1 之间的数字；
  • 0 完全透明，1 完全不透明

示例：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        opacity: .5;
    }
</style>

<div class="box"></div>

半透明

background-color: rgba(0, 0, 0, 0.5);

示例：

<style>
    .box {
        /* width: 100px; */
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mIuW85vL-1690503691934)(E:\图片\JavaScript\0c986d4bfa5d7ef1ad13b7d2550cb165bbe88ea2.png)]

精灵图（雪碧图, sprite）

项目中将多张小图，合并成一张大图，这张大图片称为精灵图

  • 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
  • 缺点：修改起来比较麻烦

精灵图使用步骤

  1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
  2. 将精灵图设置为盒子的背景图片
  3. 修改背景图位置
    • 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y
<style>
    .box {
        background-image: url('./img/jd-sprite.png');
        background-repeat: no-repeat;
        background-size: 113px 86.5px;
        width: 36px;
        height: 42px;
        display: inline-block;
        margin-right: 50px;
    }

    .box-1 {
        /* 背景图位置属性: 改变背景图的位置 */
        /* 水平方向位置 垂直方向位置 */
        /* 想要向左侧移动图片，位置取负数 */
        /* 想要向上移动，位置取负数 */
        background-position: 0 0;
    }

    .box-2 {
        background-position: -38.5px 0;
    }

    .box-3 {
        background-position: -77px 0;
    }

    .box-4 {
        background-position: 0 -44.5px;
    }
</style>

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K18AnKoF-1690503691935)(E:\图片\JavaScript\921560d538082859966c5506613dcae9b870972f.png)]

背景图片大小 background-size

设置背景图片的大小

语法: background-size: 宽度 高度;

取值:

取值场景
数字+px简单方便
百分比相对于当前盒子自身的宽高百分比
contain包含，将背景图片等比缩放，直到不会超出盒子的最大，可能有留白
cover覆盖，将背景图片等比缩放，直到刚好填满整个盒子没有空白，图片可能显示不全

background 连写

background： color image repeat position/size;

盒子阴影 box-shadow

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名: box-shadow

参数作用
h-shadow必须，水平偏移量，允许负值
v-shadow必须，垂直偏移量，允许负值
blur可选，模糊度
spread可选，阴影扩大
color可选，阴影颜色
inset可选，将阴影改为内部阴影
<style>
    .box {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 50px 8px #ccc;
    }
</style>

<div class="box"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z8ET9u4u-1690503691935)(E:\图片\JavaScript\c67a5a4d6be9d9cfade9f4b64187a0af224eed2c.png)]

注意:

  • 外阴影，不能添加outset，添加了会导致属性报错

过渡 transition

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名: transition

  • 让元素样式慢慢变化
  • 常配合 hover 使用
transition 属性 时长, 属性 时长;
参数取值
过渡属性all:所有能过渡的属性都过渡、集体属性名如: width:只有width有过渡
过渡时长数字 + s(秒)

注意：

  • 过渡需要: 默认状态和 hover 状态 样式不同，才能有过渡效果
  • transition 属性给需要过渡的元素本身加
  • transition 属性设置在不同状态中，效果不同
    • 给默认状态设置，鼠标移入移出都有过渡效果
    • 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果
<style>
    /* 过渡配合hover使用，谁变化谁加过渡属性 */
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /* 如果变化的属性多，直接写all，表示所有 */
        transition: all 2s;
    }

    .box:hover {
        width: 200px;
        background-color: pink;
    }
</style>

<div class="box"></div>

peat: no-repeat;
background-size: 113px 86.5px;
width: 36px;
height: 42px;
display: inline-block;
margin-right: 50px;
}

.box-1 {
    /* 背景图位置属性: 改变背景图的位置 */
    /* 水平方向位置 垂直方向位置 */
    /* 想要向左侧移动图片，位置取负数 */
    /* 想要向上移动，位置取负数 */
    background-position: 0 0;
}

.box-2 {
    background-position: -38.5px 0;
}

.box-3 {
    background-position: -77px 0;
}

.box-4 {
    background-position: 0 -44.5px;
}
```

[外链图片转存中…(img-K18AnKoF-1690503691935)]

背景图片大小 background-size

设置背景图片的大小

语法: background-size: 宽度 高度;

取值:

取值场景
数字+px简单方便
百分比相对于当前盒子自身的宽高百分比
contain包含，将背景图片等比缩放，直到不会超出盒子的最大，可能有留白
cover覆盖，将背景图片等比缩放，直到刚好填满整个盒子没有空白，图片可能显示不全

background 连写

background： color image repeat position/size;

盒子阴影 box-shadow

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名: box-shadow

参数作用
h-shadow必须，水平偏移量，允许负值
v-shadow必须，垂直偏移量，允许负值
blur可选，模糊度
spread可选，阴影扩大
color可选，阴影颜色
inset可选，将阴影改为内部阴影
<style>
    .box {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 50px 8px #ccc;
    }
</style>

<div class="box"></div>

[外链图片转存中…(img-z8ET9u4u-1690503691935)]

注意:

  • 外阴影，不能添加outset，添加了会导致属性报错

过渡 transition

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名: transition

  • 让元素样式慢慢变化
  • 常配合 hover 使用
transition 属性 时长, 属性 时长;
参数取值
过渡属性all:所有能过渡的属性都过渡、集体属性名如: width:只有width有过渡
过渡时长数字 + s(秒)

注意：

  • 过渡需要: 默认状态和 hover 状态 样式不同，才能有过渡效果
  • transition 属性给需要过渡的元素本身加
  • transition 属性设置在不同状态中，效果不同
    • 给默认状态设置，鼠标移入移出都有过渡效果
    • 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果
<style>
    /* 过渡配合hover使用，谁变化谁加过渡属性 */
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /* 如果变化的属性多，直接写all，表示所有 */
        transition: all 2s;
    }

    .box:hover {
        width: 200px;
        background-color: pink;
    }
</style>

<div class="box"></div>
A心动了
关注
CSS基础小仓库
weixin_36459591的博客
07-16 342
为段首设置两个汉字的缩进：    p{text-indent:2em;}    /*2em的意思就是文字的两倍大小*/ 中文字间距，英文字母间距：   p{letter-spacing:50px;} 英文单词间距:     p{word-spacing:20px;} 图片水平居中：   text-align:center; 常用的块级元素：div 、 p 、h1 — h6  、ol
weui.css(最基本的样式库)
08-29
weui是一个专门用于开发手机移动web或微信的样式库，weui.css是其中最基本的样式库
CSS基础样式库
吴佩佩佩佩的博客
01-18 746
CSS基础样式库
CSS2入门基础
weixin_50336251的博客
06-07 632
CSS基础
CSS基础知识汇总
ximu__l的博客
06-07 1211
本文是关于CSS技术的基础内容，详细展列了CSS技术相关的基础。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4041
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2797
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1922
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
DIV+CSS教程——第一天XHTML_CSS基础知识
08-13
DIV+CSS教程——第一天XHTML_CSS基础知识
HTML、CSS实现树状图
p_s_p的博客
09-09 705
【代码】HTML、CSS实现树状图。
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1427
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
基于less和scss 循环生成css
k0933的博客
09-14 386
【代码】基于less 循环生成css。
css ＜样式一＞
最新发布
weixin_43689953的博客
09-17 181
盒子模型 浮动 定位
css文本修饰
weixin_74261199的博客
09-17 502
color。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值