黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）

盒子模型

画盒子

目标:使用合适的选择器画盒子
属性
在这里插入图片描述

<!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>画盒子</title><style>.red {/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

盒子模型-组成

盒子模型重要组成部分：

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

  <style>div {width: 200px;height: 200px;background-color: pink;/* 内容与盒子边缘之间 */padding: 20px;border: 1px solid #000;/* 出现在盒子外面，拉开两个盒子之间的距离 */margin: 50px;}</style>

盒子模型 – 边框线

属性名： border（bd）
属性值： 边框线粗细线条样式颜色（不区分顺序）
常用线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	电线

  <style>div {width: 200px;height: 200px;background-color: pink;实线 border: 1px solid #000; 虚线 border: 2px dashed red; 点线 border: 3px dotted green;}</style>

盒子模型-设置单方向边框线

在这里插入图片描述

  <style>div {width: 200px;height: 200px;background-color: pink;上border-top: 1px solid #000;右border-right: 2px dashed red;下border-bottom: 5px dotted green;左border-left: 10px solid orange;}</style>

盒子模型 – 内边距

作用： 设置内容与盒子边缘之间的距离。
属性名： padding / padding-方位名词

  <style>div {width: 200px;height: 200px;background-color: pink;/* padding: 20px; */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;}</style>

盒子模型 – 内边距 – 多值写法

在这里插入图片描述

  <style>div {width: 200px;height: 200px;background-color: pink;四值：上  右  下  左 padding: 10px 20px 40px 80px; 三值：上  左右  下 padding: 10px 40px 80px; 两值：上下  左右 padding: 10px 80px;/* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */}</style>

技巧： 从上开始顺时针赋值，当前方向没有数值则与对面取值相同

盒子模型 – 尺寸计算

默认情况
盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论： 给盒子加 border / padding 会撑大盒子
解决：

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

  <style>div {width: 200px;height: 200px;手动减法 width: 160px;height: 160px; background-color: pink;padding: 20px;內减模式：不需要手动减法，加padding和border不会撑大盒子 box-sizing: border-box;}</style>

盒子模型 – 外边距

作用： 拉开两个盒子之间的距离
属性名： margin
提示： 与 padding 属性值写法、含义相同
技巧： 版心居中 – 左右 margin 值为 auto（盒子要有宽度）

  <style>div {版心居中要求：盒子要有宽度 width: 1000px;height: 200px;background-color: pink;外边距 不会 撑大盒子 margin: 50px; margin-left: 100px; margin: 50px 100px; margin: 0 auto;}</style>

清除默认样式

清除标签默认的样式，比如：默认的内外边距

  <style>* {margin: 0;padding: 0;box-sizing: border-box;}去掉列表的项目符号 li {list-style: none;}</style>

盒子模型 – 元素溢出

作用：控制溢出元素的内容的显示方式。
属性名：overflow
属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

  <style>div {width: 200px;height: 200px;background-color: pink;overflow: hidden;overflow: scroll; overflow: auto; }</style>

外边距问题 – 合并现象

场景： 垂直排列的兄弟元素，上下 margin 会合并
现象： 取两个 margin 中的较大值生效

在这里插入图片描述

外边距问题 – 塌陷问题

场景： 父子级的标签，子级的添加上外边距会产生塌陷问题
现象： 导致父级一起向下移动
在这里插入图片描述

解决方法：

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top

  <style>.father {width: 300px;height: 300px;background-color: pink;/* padding-top: 50px;box-sizing: border-box; *//* 溢出隐藏 *//* overflow: hidden; */border-top: 1px solid #000;}.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>

行内元素 – 内外边距问题

场景： 行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法： 给行内元素添加 line-height 可以改变垂直位置

  <style>span {margin: 50px;padding: 20px;line-height: 100px;}</style>

盒子模型 – 圆角

作用： 设置元素的外边框为圆角。
属性名： border-radius
属性值： 数字+px / 百分比
提示： 属性值是圆角半径
在这里插入图片描述

技巧： 从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

  <style>div {margin: 50px auto;width: 200px;height: 200px;background-color: orange;一值	border-radius: 20px; /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */四值：左上  右上  右下  左下 border-radius: 10px 20px 40px 80px; 三值：左上  右上+左下  右下 border-radius: 10px 40px 80px; 两值：左上+右下  右上+左下 border-radius: 10px 80px;}</style>

常见应用

正圆形状

在这里插入图片描述

胶囊形状

盒子模型 – 阴影（拓展）

作用： 给元素设置阴影效果
属性名： box-shadow
属性值： X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影
注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

  <style>div {margin: 50px auto;width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset;}</style>

标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。

浮动（了解企业多用flex）

作用: 让块元素水平排列。

属性名: Float

left:左对齐
right:右对齐

特点:

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标,不占用标准流的位置

清除浮动

场景: 浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)

清除浮动

方法一:额外标签法

在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both

方法三:双伪元素法(推荐)

方法二:单伪元素法

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

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

.clearfix::after { clear: both; }

方法四:overflow

父元素添加 CSS 属性 overflow: hidden

浮动 – 总结

浮动属性 float,left 表示左浮动,right 表示右浮动

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够,浮动的子级会换行
浮动后的盒子脱标

-清除浮动: 子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果
双伪元素法

拓展: 浮动本质作用是实现图文混排效果

Flex – 认识

Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。

Flex – 组成

设置方式: 给父元素设置 Display: Flex,子元素可以自动挤压或拉伸
组成部分:

弹性容器
弹性盒子
主轴:默认在水平方向
侧轴 / 交叉轴:默认在垂直方向

Flex – 布局

在这里插入图片描述

主轴对齐方式

属性名: Justify-Content

在这里插入图片描述

主轴对齐方式

center
space-between
space-around
space-evenly

侧轴对齐方式

属性名

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

在这里插入图片描述

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向
属性名： flex-direction
属性值
在这里插入图片描述

弹性伸缩比

作用： 控制弹性盒子的主轴方向的尺寸。
属性名： flex
属性值： 整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名： flex-wrap
属性值：

wrap：换行
nowrap：不换行（默认

行对齐方式

属性名: Align-Content
属性值：
在这里插入图片描述

注意: 该属性对单行弹性盒子模型无效。