HTML与CSS阶段总结

_书海
122 阅读4分钟

HTML与CSS阶段总结

学习了很多框架和库后我们应该返璞归真，再夯实一下基础，根基强大未来发展的潜力越强！

HTML部分

HTML的语义化标签

HTML语义化标签是指网页中使用特定的标签来描述其意义与结构，例如，文章的标签可以使用h1-h6表示，主要内容使用main,段落可以使用p标签，文章的内容应该使用article,边栏使用aside， 导航使用nav。

HTML语义化标签明确了HTML的书写规范，同时有助于搜索引擎的检索，也更适合人类阅读，利于团队的维护。

HTML5有哪些常用的标签

文章相关：header main footer nav section article figure mark

多媒体相关：video audio svg canvas

表单相关：type=email type=tel

<figcaption> 描述其父元素 <figure> 里其它内容的标题或图例。

<figure> 表示一段独立的内容，可能包含 <figcaption> 元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。

<mark> 标签用于标记文本中的重点或突出显示的内容，通常会将这些内容用亮黄色或其他明显的颜色进行高亮显示

Canvas 和 SVG 的区别是什么

  1. Canvas 主要是用笔刷来绘制 2D 图形的。
  2. SVG 主要是用标签来绘制不规则矢量图的。
  3. 相同点：都是主要用来画 2D 图形的。
  4. 不同点：Canvas 画的是位图，SVG 画的是矢量图。
  5. 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
  6. 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。

CSS部分

BFC是什么

BFC是 Block Formatting Context的缩写，指的是块级格式化上下文，BFC的触发条件大致有以下几条：

  1. 浮动元素(float不为none)
  2. 绝对定位元素(position为absolute或fixed)
  3. dispaly属性为 行内块元素 inline-block 、 flex
  4. overflow不为visible的块级元素

BFC可以清除浮动，防止外边距合并，但在实际使用过程中会有一些副作用，如，BFC会使元素与外部元素之间产生间隙，BFC内部的元素无法浮动等等，解决方法是使用 display: flow-root,它是CSS3新增的值，用于创建一个新的BFC,并且没有副作用。

如何实现垂直居中

  1. 使用flexbox布局
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

将容器设置为 flexbox 布局，使用 justify-content: center 和 align-items: center 属性将子元素水平和垂直居中。

  1. 使用position和transform
.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    trnasform: translate(-50%, -50%);
}

将父容器设置为相对定位，子元素使用绝对定位并且 top: 50%; 和 left: 50%; 将子元素移动到父元素的中心，然后使用 transform: translate(-50%, -50%); 属性将子元素向上和向左移动它的一半的宽度和高度，从而实现垂直居中。

  1. 使用line-height属性
.container { 
    height: 200px; 
    line-height: 200px; 
    text-align: center; 
}

容器固定高度，将行高设置与容器高度一致，从而实现垂直居中，一般用于文字。

  1. 使用grid布局
.container {
  display: grid;
  align-content: center;
  justify-content: center;
  height: 200px;
}

将容器设置为 grid 布局，使用 align-content: center; 和 justify-content: center; 属性将子元素水平和垂直居中，然后设置容器的高度为需要垂直居中的高度。注意：需要容器上设置固定的高度。

CSS 选择器优先级

可以看我之前写的文章 CSS 选择器

如何清除浮动

  1. 使用 clear 属性
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

以上代码使用了一个伪元素 ::after，将其设置为块级元素，并清除浮动。将此类样式应用到包含浮动元素的容器中即可。

  1. 使用 overflow 属性
.container { overflow: hidden; }

触发BFC，从而清除浮动

两种盒模型(box-sizing)的区别

  1. box-sizing: content-box 标准盒模型，在标准盒模型中元素的宽度和高度仅包括内容区域不包括边框和外边距，width 指定的是 content 区域宽度，而不是实际宽度。

实际宽度为: width + padding + border

  1. box-sizing: border-box IE盒模型，元素的宽度和高度包括内容区域和边框和内边距， 设置的width就是实际宽度

实际宽度为： width

avatar
文章
阅读
粉丝