day06 CSS 盒子模型_设置背景
📄️ 外边距margin设置问题
📄️ 外边距margin和padding的选择
📄️ 外边距margin的传递
📄️ 外边距margin的折叠
📄️ 外边距margin水平居中
📄️ 外轮廓 outline
- outline | MDN (mozilla.org)
📄️ 盒子阴影 box-shadow
- box-shadow | MDN (mozilla.org)
📄️ 文字阴影 text-shadow
- text-shadow | MDN (mozilla.org)
📄️ 设置盒子模型 box-sizing
- box-sizing | MDN (mozilla.org)
📄️ 行内非替换元素在盒子模型下注意事项
📄️ 元素分类
html 中的标签元素大体被分为三种不同的类型：块状元素、内联元素 (又叫行内元素)和内联块状元素。
📄️ 块级元素
块级元素 - HTML | MDN (mozilla.org)
📄️ 行内元素
行内元素 - HTML | MDN (mozilla.org)
📄️ 行内块级元素
display - CSS：层叠样式表 | MDN (mozilla.org)
📄️ 水平居中
行内元素水平居中
📄️ 京东注册登录按钮
📄️ 小米商城商品卡片
📄️ 哔哩哔哩视频卡片
📄️ 背景图片 background-image
- background-image 用于设置元素的背景图片
📄️ 背景图片的重复 background-repeat
- background-repeat
📄️ 背景图片的大小 background-size
- background-size 用于设置背景图片的大小
📄️ 背景图片的定位 background-position
- background-position 用于设置背景图片在水平、垂直方向上的具体位置
📄️ 背景图片的固定 background-attachment
- background-attachment 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
📄️ 背景图片 background
- background 是一系列背景相关属性的简写属性
📄️ 背景图片和图片的区别
- 利用 background-image 和 img 都能够实现显示图片的需求，在开发中该如何选择？
📄️ 作业布置
完成课堂所有的代码
CSS 的盒子模型
- 认识盒子模型
- 内容 width/height
- 内边距 padding
- 边框/圆角 border
- 外边距 margin
- 盒子和文字阴影
- box-sizing
CSS 的背景设置
- background-image
- background-repeat
- background-size
- background-position
- background-attachment
- background