寒假提升 ｜ Day7 CSS 第五部分

• 今日打卡任务
• Day6参考答案

今日作业

Day06 作业布置

一. 完成课堂所有的代码

盒子模型

• 08-盒子模型-margin
• 09-盒子模型-padding和margin对比
• 10-盒子模型-margin的传递
• 11-盒子模型-margin-bottom的传递
• 12-盒子模型-margin的折叠
• 13-盒子模型-margin的折叠 父子之间
• 14-块级水平居中问题
• 15-外轮廓
• 16-盒子阴影
• 17-文字阴影
• 18-行内非替换元素的特殊性
• 19-前景色和背景设置的哪些
• 20-box-sizing
• 21-案例新人福利
• 22-模仿小米案例
• 23-B站案例

二.CSS-背景

• 01-背景图片
• 02-背景平铺
• 03-背景平铺练习
• 04-背景位置
• 05-背景尺寸
• 05-背景位置练习
• 06-背景附加

二. 写出盒子模型包含的内容以及如何设置

盒子模型里包含

• 内容
  • 通过宽度和高度设置
• 内边距
  • 通过padding设置
  • padding: padding-top padding-right padding-bottom padding-left;
• 边框
  • 通过border设置
  • border: border-width border-style border-color
• 外边距
  • 通过margin设置
  • margin: margin-top margin-right margin-bottom margin-left

三. 说说你对margin的传递和折叠的理解

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

• margin-top传递: 当块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
• margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素

折叠: 指的是 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin.

它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

上下会被撑起来,但是不占空间

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子模型中宽高的行为

content-box: padding、border都布置在width、height外边

border-box: padding、border都布置在width、height里边

六. 说出元素水平居中的方案以及对应的场景

• 行内块元素(包括inline-block元素)
  • 水平居中：在父元素中设置text-align: center
• 块级元素
  • 水平居中:margin:0 auto;

七. 练习background-position和background-size（为精灵图做准备）

• background-position
• background-size

八. 找出三个盒子模型的综合案例进行练习

务必下载！！ 今日的代码和讲义 以及思维导图：【点击此链接下载 Day07.zip】

大纲

一. 列表元素

列表的实现方式

• 事实上现在很多的列表功能采用了不同的方案来实现:
  • 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
  • 方案二: 使用列表元素, 使用元素语义化的方式实现;
• 事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局:
  • 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
  • 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
  • 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
• HTML提供了3组常用的用来展示列表的元素
  • 有序列表:ol、li
  • 无序列表:ul、li
  • 定义列表:dl、dt、dd

1.1. 三种列表

有序列表 – ol – li

• ol( ordered list )
  • 有序列表，直接子元素只能是 li
• li(list item)
  • 列表中的每一项

无序列表 – ul - li

• ul(unordered list)
  • 无序列表，直接子元素只能是li
• li(list item)
  • 列表中的每一项

定义列表 – dl – dt - dd

• dl( definition list )
  • 定义列表，直接子元素只能是dt、dd
• dt ( definition term )
  • term 是项的意思, 列表中每一项的项目名
• dd( definition description )
  • 列表中每一项的具体描述，是对 dt 的描述、解释、补充
  • 一个 dt 后面一般紧跟着 1 个或者多个 dd

1.2. 列表案例

• 总结思路

二. table元素

• 在网页中,对于某些内容的展示使用表格元素更为合适和方便

2.1. table常见

• 编写表格最常见的是下面的元素:
• table
  • 表格
• tr(table row)
  • 表格中的行
• td(table data)
  • 行中的单元格
• 另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

2.2. 案例练习

股票表格

• 这里我们需要用到一个非常重要的属性:
  • border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
  • table { border-collapse: collapse; }
  • 合并单元格的边框

2.3. table元素

• thead
  • 表格的表头
• tbody
  • 表格的主体
• tfoot
  • 表格的页脚
• caption
  • 表格的标题
• th
  • 表格的表头单元格

2.4. 单元格合并

• 在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
  • 一个单元格可能会跨多行或者多列来使用;

• 这个时候我们就要使用单元格合并来完成;

如何使用单元格合并呢?

• 单元格合并分成两种情况:
• 跨列合并: 使用colspan
  • ✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
• 跨行合并: 使用rowspan
  • ✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面 tr 中的 td;

2.5. 作业

三. 表单元素

3.1. 常见表单

• form
  • 表单, 一般情况下，其他表单相关元素都是它的后代元素
• input
  • 单行文本输入框、单选框、复选框、按钮等元素
• textarea
  • 多行文本框
• select、option
  • 下拉选择框
• button
  • 按钮
• label
  • 表单元素的标题

3.2. input元素

• type
  • text
  • password
  • time
  • date
• disabled/autofoucs/readonly
• MDN文档
• boolean属性写法

input元素的使用

• 表单元素使用最多的是 input 元素
• input元素有如下常见的属性:
• type: input的类型
  • text:文本输入框(明文输入)
  • password:文本输入框(密文输入)
  • radio:单选框
  • checkbox:复选框
  • button:按钮
  • reset:重置
  • submit:提交表单数据给服务器
  • file:文件上传
• readonly:只读
• disabled:禁用
• checked:默认被选中
  • 只有当 type 为 radio 或 checkbox 时可用
• autofocus:当页面加载时，自动聚焦
• name:名字
  • 在提交数据给服务器时，可用于区分数据类型
• value:取值
  • type类型的其他取值和 input 的其他属性, 查看文档:
  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

布尔属性(boolean attributes)

• 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
• 布尔属性可以没有属性值，写上属性名就代表使用这个属性
  • 如果要给布尔属性设值，值就是属性名本身

3.3. input模拟按钮

• 表单可以实现按钮效果:
  • 普通按钮(type=button):使用value属性设置按钮文字
  • 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)
  • 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)

• 我们也可以通过按钮来实现:

3.4. input和label结合

• label元素一般跟input配合使用，用来表示input的标题
• labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

3.5. radio/checkbox

radio的使用

• 我们可以将type类型设置为 radio 变成 单选框:
  • name值相同的 radio 才具备单选功能

checkbox的使用

• 我们可以将type类型设置为checkbox变成多选框:
  • 属于同一种类型的checkbox，name值要保持一致

3.6. textarea/select/option

textarea的使用

• textarea的常用属性:
  • cols:列数
  • rows:行数
• 缩放的CSS设置
  • 禁止缩放:resize: none;
  • 水平缩放:resize: horizontal;
  • 垂直缩放:resize: vertical;
  • 水平垂直缩放:resize: both;

select和option的使用

• option是select的子元素，一个option代表一个选项
• select常用属性
  • multiple:可以多选
  • size:显示多少项
• option常用属性
  • selected:默认被选中

3.7. form表单

• form通常作为表单元素的父元素:
  • form可以将整个表单作为一个整体来进行操作;
  • 比如对整个表单进行重置;
  • 比如对整个表单的数据进行提交;
• form常见的属性如下:
• action
  • 用于提交表单数据的请求URL
• method
  • 请求方法(get和post)，默认是get
• target
  • 在什么地方打开URL(参考a元素的target)

请求方式的对比

四. Emmet

• Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.
  • 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
  • VsCode内置了 Emmet语法 ,在后缀为.html/.css中输入缩写后按 Tab/Enter键即会自动生成相应代码

> (子代)和 + (兄弟)

* (多个)和 ^ (上一级)

()(分组)

属性(id属性、class属性、普通属性) {}(内容)

$(数字)

隐式标签

CSS Emmet

结构伪类 - :nth-child

• :nth-child(1)
  • 是父元素中的第1个子元素
• :nth-child(2n)
  • n代表任意正整数和0
  • 是父元素中的第偶数个子元素(第2、4、6、8……个)
  • 跟:nth-child(even)同义
• :nth-child(2n + 1)
  • n代表任意正整数和0
  • 是父元素中的第奇数个子元素(第1、3、5、7……个)
  • 跟:nth-child(odd)同义
• nth-child(-n + 2)
  • 代表前2个子元素

结构伪类 - :nth-last-child( )

• :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
  • :nth-last-child(1)，代表倒数第一个子元素
  • :nth-last-child(-n + 2)，代表最后2个子元素
• :nth-of-type()用法跟:nth-child()类似
  • 不同点是:nth-of-type()计数时只计算同种类型的元素
• :nth-last-of-type()用法跟 :nth-of-type() 类似
  • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

结构伪类 - :nth-of-type( )、:nth-last-of-type( )

• 其他常见的伪类(了解):
  • :first-child，等同于:nth-child(1)
  • :last-child，等同于:nth-last-child(1)
  • :first-of-type，等同于:nth-of-type(1)
  • :last-of-type，等同于:nth-last-of-type(1)
  • :only-child，是父元素中唯一的子元素
  • :only-of-type，是父元素中唯一的这种类型的子元素
• 下面的伪类偶尔会使用:
  • :root，根元素，就是HTML元素
  • :empty 代表里面完全空白的元素

否定伪类(negation pseudo-class)

• :not()的格式是:not(x)
  • x是一个简单选择器
  • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
• :not(x)表示 除x以外的元素