Skip to content

Latest commit

 

History

History
425 lines (319 loc) · 24 KB

前端 · 第2周第1次 · CSS学习-3· 2022_1_12.md

File metadata and controls

425 lines (319 loc) · 24 KB
Raw

update：2022/1/11 21:37

一、内容结构

  • 轮廓、阴影、圆角
  • 浮动布局及高度塌陷
  • BFC-块式格式化环境
  • 定位及元素层级
  • @charset 规则与@import 规则

二、文档及视频资源

w3school HTML 教程 w3school HTML 标签参考手册 MDN HTML 教程 MDN HTML 元素参考 w3school CSS 教程 w3school CSS 参考手册 MDN CSS 教程 MDN CSS 参考手册 在线文档用于查阅参考资料

黑马程序员web前端开发入门教程 尚硅谷Web前端零基础入门HTML5+CSS3基础教程 在线视频学习资源用来辅助学习，上面两个是我个人觉得质量比较高的，二选一选择一个视频资源个人比较习惯的跟着学习即可

三、知识点总结

接下来是一些与盒子有关的相对特殊CSS属性——圆角、阴影、轮廓、不透明度等，它们可以用于让盒子样式表现得更加不同

1. 圆角：border-radius属性

border-radius 属性用于向元素添加圆角边框 实际上border-radius 属性是border-top-left-radius属性border-top-right-radius属性border-bottom-right-radius属性border-bottom-left-radius以上4个属性的简写，实际上简写属性border-radius 属性使用较多 取值： 应为一个长度单位，可为绝对长度或百分比

实际开发中可将border-radius 属性取值设为50%，从而实现圆形效果

值个数规则：

  • 四个值: 15px 50px 30px 5px; （依次分别用于：左上角、右上角、右下角、左下角）
  • 三个值: 15px 50px 30px; （第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）
  • 两个值: 15px 50px; （第一个值用于左上角和右下角，第二个值用于右上角和左下角）
  • 一个值: 15px; （该值用于所有四个角，圆角都是一样的）

椭圆： 在 / 之前设置四个椭圆水平方向的半径，之后设置垂直方向半径 如border-radius：10px 20px / 20px 10px四个角的椭圆轴长分别是（从左上顺时针方向）：10px 20px，20px 10px，10px 20px，20px 10px

2. 阴影：box-shadow 属性

box-shadow 属性用于向元素添加阴影 语法： box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需 水平阴影的位置 v-shadow 必需 垂直阴影的位置 blur 可选 模糊距离 spread 可选 阴影的尺寸 color 可选 阴影的颜色 inset 可选 将外部阴影 (outset) 改为内部阴影 image.png

3. 轮廓：outline 属性

outline 属性向元素周围绘制的一条线，在边框之外，以凸显元素 注意：轮廓不是元素尺寸的一部分，元素的总宽度和高度不受轮廓线宽度的影响 outline 属性是以下各轮廓属性的简写属性： outline-width属性、outline-color属性、outline-style属性，其中outline-style属性是必需的 取值： 与border属性在取值上非常相似，这边就不多阐述了 **outline-offset**** 属性**： 在元素的轮廓与边框之间添加空间，元素及其轮廓之间的空间是透明的，该属性的值即轮廓与边框间的距离 image.png

4. 透明度：opacity 属性

opacity 属性设置元素的不透明级别，取值在0~1间 注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度，可能会使完全透明的元素内的文本难以阅读，达不到期望的效果；此类情况下请使用rgba替代

opacity 属性可以与 :hover 选择器一同使用以实现在鼠标悬停时更改不透明度的效果

5. 元素可见性：visibility 属性

visibility 属性规定元素是否可见 取值：

  • visible【默认值】 元素是可见的
  • hidden 元素是不可见的
  • collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用；如果此值被用在其他的元素上，效果等价于 "hidden"

opacity:0、visibility：hidden 与display:none 均可设置元素隐藏，区别在于： opacity与visibility：hidden 属性隐藏的元素仍占据相应的空间，而display 属性隐藏的元素不会占据相应空间

下面我们将开始一个比较重要的布局的讲述——浮动布局 实际上浮动布局是一种老的布局技术了，现在开发中使用比较少，因为处理起比较麻烦，但对它的了解还是有一定意义的，并且浮动布局在实现文本环绕图片、首字下沉、导航条等效果时还是比较方便的 伴随着浮动的就是取消浮动和高度塌陷问题，这需要我们给出一些手段来实现

6. 浮动

通过浮动可以使一个元素向其父元素左侧或右侧移动 浮动通过设置float属性实现

（1）float属性
  • left 元素浮动到其容器的左侧
  • right 元素浮动在其容器的右侧
  • none 元素不会浮动（将显示在文本中刚出现的位置）【默认】
  • inherit 元素继承其父级的 float 值
（2）特点
  • 浮动元素脱离文档流，不占用文档流中位置，水平布局等式不强制成立
  • 设置浮动后元素会向父元素的左侧或右侧移动，可实现水平布局
  • 浮动元素向左或向右移动时，会排在它前边其他浮动元素后面
  • 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
（3）用法
  • 实现水平布局
  • 实现文字环绕图片效果
（4）举例

文字浮动

<p><img src="/i/logo/w3logo-3.png" alt="W3School" style="
  width: 170px;
  height: 170px;
  margin: 0 25px;
  float: left;
">
领先的 Web 技术教程 - 全部免费。在 W3School，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 W3School，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>

image.png 导航栏 还记得我们之前提到过无序列表可以用于实现导航栏么，下面我们将利用无序列表演示导航栏的简单原理

<ul>
	<ol>1</ol>
  <ol>2</ol>
  <ol>3</ol>
  <ol>4</ol>
  <ol>5</ol>
</ul>
ul {
	background-color: #ddd;
    padding: 10px 20px;
    float: left;
}
ol {
	background-color: #999;
    float: left;
    margin: 0 10px;
}

image.png

7. 清除浮动

清除浮动元素对当前元素的影响，原理为为元素添加一个上外边距，抵消浮动元素的影响 clear属性 规定元素的哪一侧不允许其他浮动元素出现 取值：

  • left 在左侧不允许浮动元素
  • right 在右侧不允许浮动元素
  • both 在左右两侧均不允许浮动元素
  • none 默认值。允许浮动元素出现在两侧

这个属性使用比较少，最常用于处理高度塌陷问题

8. 高度塌陷问题

（1）产生原因

在浮动布局中，如果父元素没有设置高度，默认被子元素撑开，当子元素浮动并从文档流中脱离后，将无法撑起父元素高度，使父元素高度丢失。这将改变页面布局，需要进行处理。

（2）解决方法
  • 父元素高度写死（不推荐）
  • 父元素开启 BFC（参考下一小节BFC介绍）
    • 父元素设置 float

副作用：父元素的宽度丢失、父元素一级的布局又会受到浮动影响

  • 父元素设置 display: inline-block
  • 父元素设置 overflow: hidden 或 auto（推荐）

缺点：不能和position定位配合使用，超出的尺寸会被隐藏

  • :after 伪元素撑起父元素高度（最为推荐）
（3）clearfix

一个常规解决高度塌陷的问题

.clearfix::before, .clearfix::after{
  content: '';
  display: table;
  clear: both;
  /* 以下代码为了解决 IE 浏览器的兼容问题 */
  height: 0;
  overflow: hidden;
  /* 以下代码为了去隐藏content中的内容 */
  visibility: hidden;
}

使用时直接把clearfix类名称加至父元素class属性即可

（4）overflow属性

overflow 属性规定当内容溢出元素框时如何处理溢出的内容 取值：

  • visible 默认值。内容不会被修剪，会呈现在元素框之外
  • hidden 内容会被修剪，并且其余内容是不可见的
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

9. BFC：块级格式化环境（Block Formatting Content）

参考 MDN链接

（1）简介：

BFC 是 CSS 中隐含的属性，元素开启 BFC 后会成为一个独立的布局环境

（2）特点：
  • 开启 BFC 的元素不会被浮动元素所覆盖
    • float 元素不会相互覆盖、文本环绕图片
  • 开启 BFC 的父元素不会和子元素发生外边距重叠
  • 开启 BFC 的元素可以包含浮动的子元素
    • 解决高度塌陷问题
（3）开启方法
  • 设置元素浮动（不推荐）
  • 将元素设置为行内元素（不是非常推荐）
  • 将元素 overflow 设置为除 visible 外的值（副作用小）
  • 还有弹性元素、网格元素等等，其他方法可参考上面的MDN链接

（4）示例 BFC最常用于处理处理高度塌陷和避免父子元素外边距重叠这两个问题

  • 开启 BFC 元素不会被浮动元素覆盖

给 box2 设置 overflow: hidden 开启 BFC 之后，box2 排列在 box1 右边。 image.pngimage.png

  • 开启 BFC 父元素不会和子元素发生外边距重叠

给 outer 设置 overflow: hidden 开启 BFC 之后，inner 的 margin-top 不再溢出。 image.pngimage.png

  • 开启 BFC 的元素可以包含浮动的元素

给 outer 设置 overflow: hidden 开启 BFC 之后，outer 高度被子元素撑起。 image.pngimage.png

下面我们将要讨论的是定位，定位在实际中应用非常广泛

10. 定位

（1）position 属性

position 属性规定应用于元素的定位方法的类型 取值：

  • static【默认值】 静态定位
  • relative 相对定位
  • fixed 固定定位
  • absolute 绝对定位
  • sticky 粘滞定位

静态定位 image.png
相对定位 image.png 绝对定位 image.png 均为top：40px，left：40px

（2）偏移量

top、bottom、left 和 right 属性控制元素定位，决定元素最终位置 不同的 position 的属性值下，它们的工作方式不同 只有 position 属性设置为非 static，这些属性才会起作用 一般一个方向上只用一个属性即可

（3）包含块
  • 正常情况下

包含块就是离当前元素最近的祖先块元素 如：<div> <span>hello</span></div>，hello 的包含块为 div

  • 绝对定位的包含块

包含块就是离当前元素最近的开启了定位的祖先元素 如果所有祖先元素都没开启定位，则初始包含块为其包含块

  • html 元素

根元素、初始包含块（ICB - inital container block）

（4）静态定位

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位，不受 top、bottom、left 和 right 属性的影响

（5）相对定位
  • 开启后不设置偏移量，元素不发生任何变化
  • 相对定位是参照于元素在文档流中的位置进行定位的
  • 相对定位会提升元素层级
  • 相对定位不会使元素脱离文档流
  • 相对定位不会改变元素性质，块还是块，行内还是行内

最多还是用于—父元素相对定位子元素绝对定位

（6）绝对定位
  • 开启后不设置偏移量，元素的位置不发生任何变化
  • 绝对定位是参照与元素的包含块进行定位的
  • 绝对定位会提升元素层级（z-index属性）
  • 开启后元素会从文档流中脱离
  • 绝对定位会改变元素性质，行内变成块，块的宽高被内容撑开（脱离文档流中元素性质）
（7）固定定位
  • 固定定位是一种特殊的绝对定位，其大部分特点和绝对定位一样
  • 唯一不同，固定定位永远参照于浏览器窗口进行定位，不随浏览器滚动条的滚动而滚动

（8）粘滞定位

  • 粘滞定位和相对定位特点基本一致
  • 不同的是粘滞定位可以在元素到达某个位置时将其固定

其对浏览器兼容性不是很好，如IE等可能会存在兼容性的问题

11. 元素层级：z-index属性

对于开启了定位的元素，可通过 z-index 属性来指定元素层级 z-index 需要一个整数作为参数，值越大层级越高，（一般指定为正数） 显示规则：

  • 元素层级越高越优先显示
  • 如果元素层级一样，则优先显示靠下元素
  • 祖先元素的层级再高也不会盖住后代元素

取值： auto【默认值】 堆叠顺序与父元素相等 number 设置元素的堆叠顺序

12. 绝对定位的水平布局和垂直布局

（1）水平方向布局

开启绝对定位后，水平方向的布局等式需添加 left 和 right 两个值，规则和之前一样。

left + margin-left + border-left + padding-left +width + padding-right + border-right +margin-right + right = 包含块的内容区宽度

发生过度约束时

  • 9 个值中没有 auto，自动调整 right 使等式满足
  • 如果有 auto，自动调整 auto 的值使等式成立
    • 可设置 auto 的值，margin、width、left、right
    • 里面详细情况与盒模型里的水平方向的等式相同
（2）垂直方向布局

垂直方向等式也必须满足

top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的内容区高度

发生过度约束时和水平等式处理一样，不过是优先调整 bottom

下面介绍两个CSS规则

13. 样式表中导入另外一个样式表：@import 规则

简介：

  • @import 规则允许您将样式表导入另一张样式表中
  • @import 规则必须位于文档顶部（但是应在任何 @charset 声明之后）
  • @import 规则还支持媒体查询，因此可以允许依赖媒体的导入（只做简单了解即可）

语法与示例：

  • 使用字符串 @import "navigation.css";
  • 使用 url @import url("navigation.css");

14. 设定字符编码规则：@charset 规则

简介：

  • @charset 规则指定样式表中使用的字符编码
  • @charset 规则必须是样式表中的第一个元素，并且不能以任何字符开头，如果定义了多个 @charset 规则，则仅使用第一个
  • @charset 规则不能在 style 属性内（在 HTML 元素上）或在与 HTML 页面的字符集相关的 <style> 元素内使用

示例： @charset "UTF-8";

四、作业及提交方式

  1. 提交作业 ● 提交课后作业可以加积分，积累积分可以获得奖励 ● 课后作业发我的邮箱：[email protected]
    ● 发送邮件主题按如下格式：前端-姓名-第x周-第x次， 如 前端-陈思远-第1周-第1次 ● 每次课程作业在下下次课程之前发送到我的邮箱

  2. 作业内容

实现如下一个导航栏的效果，应有鼠标移动改变的效果 image.png image.png 同时至少完成以下一个下拉框 （完成一个足矣） image.png 关于作业的一些必需的补充知识

/* 设置文字下划线、删除线、上划线等，取值为none即不设置 */
/* 可以用于取消超链接默认下划线 */
text-decoration: none;
/* 设置文字水平对齐方式，取值为center可使文字水平居中 */
text-align: center;
/* 设置文字颜色 */
color: black;
/* 设置文字加粗，取值为bold即加粗 */
font-weight: bold;
/* 设置文字行高，可用于文字垂直居中，一般应为大于字号的正整数 */
line-height: 2em;
  1. 作业参考代码 参考代码已上传Gitee和Github仓库 Gitee链接 GIthub链接 作业代码仅供参考，还希望大家能够自己独立完成作业，有问题可以在群里提问或者私戳我，希望大家在前端的学习过程中都能够有所思考，有所收获