HTML/CSS学习笔记与应用 ｜ 青训营

番茄土土
84 阅读8分钟

本文是学习青训营课程《前端语言串讲》《前端与 HTML》《深入理解 CSS》的课程知识以及平时遇到的常见题目总结。文章将从以下几点出发：

导航

  1. CSS易混淆知识：选择器，盒模型，伪元素等
  2. CSS实用知识：Flex布局，清除浮动等
  3. HTML常见考题：语义化标签。块级/行内元素，嵌套问题，CANVAS/SVG等
  4. DOM操作总结：标签获取，元素获取，增删改，样式修改

CSS易混淆知识

a. 选择器

基础选择器: #id, TagName, .class, *

组合器：

  • 子组合器：.parent > .child 只能选中直系后代
  • 相邻兄弟组合器: p + h2 只能选中紧跟其后的元素
  • 通用兄弟组合器: li.active ~ li：在指定元素之后的兄弟元素
  • 复合选择器

属性选择器：约束属性值，div[data-title:'aaa']

伪类选择器：

  • div: first-child 属于父元素的第⼀个子元素的每个<div> 元素。
  • div: first-of-type 必须得是<div>元素，还得是第⼀个出现的<div>元素
  • a: nth-child(5) 必须是<a>元素 必须是第五个子元素
  • a: nth-of-type 选中所有<a>元素中的第 n 个<a>元素

伪元素选择器：匹配在文档中没有对应HTML元素的特定部分，或插入内容。h2::first-letter, div::before

逻辑选择器：较新的选择器，:is()，:has()，:where()，:not()

链接伪类选择器优先级问题 a:link、a:hover、a:visited、a:active中，定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。为了保证每个效果都能正确的触发，定义时的顺序应该为：link、visited、hover、active

b. 盒子模型

box-sizing: content-box 标准盒模型: content（不包含 padding 和 border）

box-sizing: border-box IE盒模型: content + 2 * padding + 2 * border

不会撑大盒子的特殊情况：

  1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
  2. 此时给子盒子设置左右的padding或者左右的border，不会撑大子盒子。

BFC的条件与特点

BFC，即块级格式化上下文，它是一个独立渲染的区域，并且与外部区域毫不相⼲，不会与浮动元素重叠。

条件：

  1. 根元素
  2. float、abosulte、inline-block
  3. Flex子项和Grid子项
  4. overflow值不是visible
  5. display: flow-root

特点：

  1. 盒子从上到下摆放
  2. 垂直 margin 合并
  3. BFC内盒子的margin不会与外面合并
  4. BFC不会和浮动元素重叠

c. 元素与伪元素

元素: HTML设置的标签

伪元素: 由CSS模拟出的标签效果，必须设置content属性才生效

  • ::before 在父元素内容的最前添加一个伪元素
  • ::after 在父元素内容的最后添加一个伪元素

d. display visibility opacity 详细区别

  1. 时间绑定
  • display不在⻚⾯上，⽆法触发
  • visibility：hidden ⽆法触发
  • opacity：0 可以触发
  1. 空间占⽤
  • display：none 不占⽤
  • visibility：hidden 也会占据实际空间
  • opacity：0 会
  1. 继承性
  • visibility 可以，其他两个不⾏

其他碎片知识

  1. CSS可继承： 1、字体系列属性； 2、文本系列属性：text-indent[文字缩进]； 3、元素可见性：visibility； 4、表格布局属性；5、列表布局属性 list-style-type、list-style-image、list-style-position、list-style；6、生成内容属性：quotes；7、光标属性：cursor；8、页面样式属性：page、page-break-inside、windows、orphans

  2. 旋转问题

    • rotateY：定义沿 Y 轴的 3D 旋转，可实现翻书的效果
    • translateY：沿着 Y 轴移动元素
    • scaleY：定义 2D 缩放转换时，改变元素的高度；定义 3D 缩放转换时，通过给定⼀个 Y 轴的值
    • perspective(n)：改变3D元素是怎样查看透视图（注：只影响 3D 转换元素）

  3. 加载与阻塞：css加载不会阻塞DOM树的解析；css加载会阻塞DOM树的渲染；css加载会阻碍后⾯js语句的执行 【可以边加载边生成 DOM 树】

CSS实用知识

a. ！important是绝对的吗？

答案： 不是。！important不影响继承性 ，也就是说，继承过来的样式！important无法提升它的权重。

b. 超好用的flex布局

display: flex布局在日常开发中非常实用。尤其是在对多端项目开发时，基本上只用flex布局，兼容性好且稳定。实际开发中需要尽可能避免使用float。flex布局的实用属性如下：

  • flex-direction：主轴的方向 row | row-reverse | column | column-reverse
  • flex-wrap： 是否换行 nowrap | wrap | wrap-reverse;
  • justify-content：在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around
  • align-items：在交叉轴上如何对齐方式 flex-start | flex-end | center | baseline | stretch;
  • align-content：多根轴线的对齐方式
  • flex: 1：内容区则会自动放大占满剩余空间。非常好用，尤其是IOS端和安卓样式兼容上，需要用它来撑开盒子。是flex-grow[项目的放大比例]: 1; flex-shrink[项目的缩小比例]: 1 flex-basis[在分配多余空间之前，项目占据的主轴空间]: auto; 三个属性的缩写

c. 清除浮动

浮动元素：会脱离标准流（简称：脱标），在标准流中不占位置。比标准流高半个级别，可以覆盖标准流中的元素。浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。清除浮动，目的是需要父元素有高度，从而不影响其他网页元素的布局。

方法：

  • 直接设置父元素高度
  • 额外标签法：在父元素内容的最后添加一个块级元素，给添加的块级元素设置 clear:both
  • 单伪元素清除法：用伪元素替代了额外标签 
    .clearfix::after{
   content:'';
   display: block;
   clear: both;
   /* 在网页中看不到伪元素 */
   height:0;
   visibility: hidden;
}
  • 双伪元素清除法 
    .clearfix::before,
.clearfix::after{
   content:'';
   display: table;
   clear: both;
}
  • 最常用简单：给父元素设置 overflow : hidden

HTML易混淆知识

a. 语义化标签

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

<em> （被强调的文本）
<strong> （重要的文本）
<mark> （被标记的/高亮显示的文本）
<cite> （作品的标题）
<dfn> （一个定义项目）

图片 src为路径，alt是替换文本
<img src="" alt="" title="鼠标悬停时显示的文本" />

音频 controls显示播放的空间，autoplay自动播放，loop循环播放
<audio src="./music.mp3" controls autoplay loop />

谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted
<video src="./video.mp4" onerror="fn()" controls autoplay muted loop />

b. 块级元素，行内元素

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

  1. 块级元素：从上往下，垂直布局，独占一行
  2. 行内元素 ：行内块元素：从左往右，水平布局，空间不够自动折行 <span> <em> <a> <input>

c. 嵌套问题

a 标签不可以嵌套块级元素, button⼦元素不可以嵌套交互性元素。

a 属于交互性元素。 <dt> 、 <th> 不可嵌套 <header> 、 <footer> 、区块型元素(sectioning content)、标题型元素(heading content) 。

<dt> 标签和 <dd> 标签必须嵌套在 <dl> 标签⾥⾯，并且 <dt> 标签必须位于 <dd> 标签前⾯

d. Canvas与SVG

Canvas 依赖分辨率，基于JS，不支持事件处理器，最适合图像密集型的游戏。

SVG不依赖分辨率， 基于XML，支持事件处理器，不适合游戏应用。

其他碎片知识

  1. <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。没有结束标签；对大小写不敏感；不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
  2. link标签是同时加载的，script标签才会加载完⼀个再加载另⼀个
  3. HTML5新增元素：eader，footer，nav，article，section，aside，datalist，audio，video，embed, abbr标签，为input新增元素
  4. 改变 font-size 也会 reflow
  5. 如果⼀个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名。创建带有 ID 属性 的 DOM 元素有的副作⽤：会增加内存负担，会创建同名的全局变量
  6. 单标签 <br>，<hr>

DOM操作总结

a. DOM标签获取

  • document.getElementById[ID]：返回一个对象
  • [context].getElementsByTagName[TagName]：返回类数组
  • [context].getElementsByClassName[ClassName]：返回类数组
  • document.getElementsByName[属性名]：返回类数组
  • document.documentElement：获取整个HTML元素对象；HTML是页面的根节点
  • document.body：获取整个body
  • document.head：获取整个head
  • [context].querySelector[选择器]：返回一个对象，不支持低版本IE
  • [context].querySelectorAll[选择器]：返回类数组，不支持低版本IE

b. DOM节点获取

所有页面中呈现的内容都是DOM文档中的一个节点node。元素标签是元素节点，注释内容是注释节点，文本内容是文本节点（包括文字、标签之间的空格和换行，IE6-8除外），document是文档节点

  • [container].childNodes：获取一个节点集合
  • [container].children：获取一个元素集合，只有元素节点
  • [node].parentNode：获取该节点的父节点
  • [node].previousNode：获取该节点的上一个兄弟节点
  • [container].firstChild：获取容器中第一个子节点，对应的还有lastChild
  • [container].firstElementChild：获取容器中第一个元素子节点，对应的还有lastElementChild

c. DOM元素增删改

  • 创建：document.createElement
  • 增加：[container].appendChild
  • 删除：[container].removeChild
  • 自定义属性：[element].setAttribute('xxx', xxx)
  • 内容设置：innerHTML，innerText，value

d. DOM样式操作

[element].style.XXX ，[element].className

参考文献

  1. 《前端语言串讲》《前端与 HTML》《深入理解 CSS》
  2. juejin.cn/post/684490…
  3. juejin.cn/post/684490…
  4. blog.csdn.net/idealistic/…
avatar
文章
阅读
粉丝