网站开发工程师工资_电商网页设计教程_环球网疫情最新动态_海外免费网站推广

使用语法:

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改

使用示例;

🚩背景图片

使用语法:

比 image 更方便控制位置(图片在盒子中的位置)

使用注意事项:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.

使用示例:

🚩背景平铺

使用语法:

重要取值:

• repeat: 平铺
• no-repeat: 不平铺
• repeat-x: 水平平铺
• repeat-y: 垂直平铺

默认是 repeat.

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

使用示例:

🚩背景位置

使用语法:

参数有三种风格:

1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位

使用

使用注意事项:

• 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
• 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
• 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
• 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
• 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

关于坐标系:

计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的)

🚩背景尺寸

使用语法:

取值:

• 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
• 也可以填百分比: 按照父元素的尺寸设置.
• cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

contain:

cover:

🚩圆角矩形

通过 border-radius 使边框带圆角效果

使用基本语法:

length 是内切圆的半径. 数值越大, 弧线越强烈

使用实例:

🏀生成圆形

让 border-radius 的值为正方形宽度的一半即可

🏀生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

🏀展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

等价于

等价于(顺时针排列)

🍀Chrome 调试工具 – 查看 CSS 属性

该工具可以方便我们对自己的代码进行调试;

打开浏览器

有两种方式可以打开 Chrome 调试工具

• 直接按 F12 键
• 鼠标右键页面 => 检查元素

标签页含义

• elements 查看标签结构
• console 查看控制台
• source 查看源码+断点调试
• network 查看前后端交互过程
• application 查看浏览器提供的一些扩展功能(本地存储等)
• Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究

当然这里直接显示了中文,就找不到上面的英文,大家对号入座就好了

elements 标签页使用

• ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
• 使用 左上角 箭头选中元素
• 右侧可以查看当前元素的属性, 包括引入的类.
• 右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如字体大小, 可以使用方向键来微调数值.
• 此处的修改不会影响代码, 刷新就还原了~
• 如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)

🎄元素的显示模式

在 CSS 中, HTML 的标签的显示模式有很多.

此处只重点介绍两个:

• 块级元素
• 行内元素

🚩块级元素

常见的元素

特点:

• 独占一行
• 高度, 宽度, 内外边距, 行高都可以控制.
• 宽度默认是父级元素宽度的 100% (和父元素一样宽)
• 是一个容器(盒子), 里面可以放行内和块级元素

注意:

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

🚩行内元素/内联元素

常见的元素

​

特点:

• 不独占一行, 一行可以显示多个
• 设置高度, 宽度, 行高无效
• 左右外边距有效(上下无效). 内边距有效.
• 默认宽度就是本身的内容
• 行内元素只能容纳文本和其他行内元素, 不能放块级元素

注意:

• a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).
• a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素

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

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

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

🚩改变显示模式

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

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

• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]
• display: inline-block 改成行内块元素

🌴盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”

这个盒子由这几个部分构成

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

🚩边框

🏀基础属性

• 粗细: border-width
• 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
• 颜色: border-color

使用实例如下:

支持简写, 没有顺序要求

可以改四个方向的任意边框.

以下的代码只给上边框设为红色, 其余为蓝色.

利用到的层叠性, 就近原则的生效.

🏀边框会撑大盒子

可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小

通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

• *为通配符选择器

🚩内边距

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

🏀基础写法

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

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

• padding-top
• padding-bottom
• padding-left
• padding-right

🏀复合写法

可以把多个方向的 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 (顺时针)

控制台中选中元素, 查看右下角, 是很清楚的

🚩外边距

创建一个 div, 内部包含三个 span

此时看到的效果为

当我们给 div 加上 display:flex 之后, 效果为

此时看到, span 有了高度, 不再是 “行内元素了”

再给 div 加上 justify-content: space-around; 此时效果为

此时可以看到这些 span 已经能够水平隔开了.

把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了.

🚩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 都会失效.

🚩常用属性