css书写顺序

内容目录

css 书写顺序：布局定位属性 > 自身样式 > 文本样式 > 其他样式。
注重 css 书写顺序可以减少浏览器 reflow，提高浏览器渲染性能。

样例：

.box {
  /* 布局定位属性 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 自身样式 */
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #000;
  background: #fff;
  /* 文本样式 */
  font-size: 14px;
  font-weight: bold;
  color: #000;
  /* 其他样式 */
  cursor: pointer;
  opacity: 1;
}

关键词 :

相关笔记

css选择器

css 标签选择器 css 标签选择器用来选中 html 中的标签，比如 h1、p、div 等等。 h1 { color: red; } css 类选择器 css 类选择器用来选中 html 中的类，比如 .title、.content 等等。 .title { color: red; }

阅读全文

html5 新增内容

html5 新增内容更多的语义化标签 html 增加了很多语义化标签，比如<header>、<footer>、<nav>、<article>、<section>、<aside>、<main>等等，这些标签都是为了让我们的网页更加语义化，更加容易被搜索引擎收录，更加容易被机器识别。许多原先使用 div 实现的区域划分可以使用更多的语义化标签来实现，使得 html 文档的结构更加清晰。

阅读全文

css盒子模型

盒子模型 html 标签中每个标签都可以看作是一个盒子，盒子模型中包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。内容部分下面是一个简单的盒子模型。内容部分是指标签中的内容，如下图所示的蓝色区域:

阅读全文