CSS Hmilyl いち

# 介绍 CSS 盒子模型

• CSS 的盒子模型有哪些：标准盒子模型。IE 盒子模型
• CSS 的盒子模型区别：
  • 标准盒子模型：margin、border、paddig、content
  • IE 盒子模型：margin content (border + padding + content)
• 通过 CSS 如何转换盒子模型：
  • box-sizing: content-box：标准盒子模型
  • box-sizing: border-box：IE 盒子模型
• 当然注意设置了 box-sizing: border-box，并不代表一定是width的宽度 ，例如下面例子

.box {

  padding: 50px;

  width: 100px;

  height: 100px;

  border: 5px solid #ccc;

  box-sizing: border-box;

}

<div class="box">box</div>

• 此时 box 盒子的宽度则是 210px , 但如果 padding 是 40px 的话， 40px + 40px + 5px + 5px < 100px ，所以此时 box 盒子的宽度就是 100px

# line-height & height 区别

• line-height：是每一行文字的高，如果文字换行则整个盒子高度会增大 (行数 * 行高)
• height：是一个固定值，就是这个盒子的高度

<style>

  .box {

    width: 300px;

    height: 200px;

    background-color: pink;

  }

</style>

<div class="box">

  仙袂乍飘兮，闻麝兰之馥郁;荷衣欲动兮，听环佩之铿锵。靥笑

  春桃兮，云堆翠髻;唇绽樱颗兮，榴齿含香。纤腰之楚楚兮，回

  风舞雪;珠翠之辉辉兮，满额鹅黄。出没花间兮，宜嗔宜喜;徘

  徊池上兮，若飞若扬。蛾眉颦笑兮，将言而未语;莲步乍移兮，

  待止而欲行。羡彼之良质兮，冰清玉润;慕彼之华服兮，闪灼文

  章。爱彼之貌容兮，香培玉琢;美彼之态度兮，凤翥龙翔。

</div>

• 正常高度依然是 200px，并且会自动换行，有 9 行。但如果设置的是 line-height = 200px ，那么就是 9 * 200 = 1800px ，那么盒子高度就是 1800px 了，这就是它们的区别

# CSS 选择符

• 选择器参考表 MDN ：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors# 选择器参考表

# CSS 属性继承

• 来自：https://www.php.cn/css-tutorial-407147.html

# 常用的 css 不可继承的属性

• display：规定元素应该生成的框的类型

• text-decoration：规定添加到文本的装饰

• text-shadow：文本阴影效果

• white-space：空白符的处理

• 盒子模型的属性：width、height、margin 、border、padding

• 背景属性：background

• 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

# 常用的 css 可继承的属性：

• font：组合字体

• font-family：规定元素的字体系列

• font-weight：设置字体的粗细

• font-size：设置字体的尺寸

• font-style：定义字体的风格

• text-indent：文本缩进

• text-align：文本水平对齐

• line-height：行高

• color：文本颜色

• visibility：元素可见性

• 光标属性：cursor

# 所有元素可以继承的

1. 元素可见性：visibility

2. 光标属性：cursor

内联元素可以继承的属性

1. 字体系列属性

2. 除 text-indent、text-align 之外的文本系列属性

# 块级元素可以继承的属性

• text-indent、text-align

# inherit（继承）值

• 每一个属性可以指定值为 “inherit”，即：对于给定的元素，该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值，它可以通过显式地指定 “inherit” 而得到加强，例如：

# CSS 优先级算法

• 优先级比较： !important > 内联样式(行内) > id > class > 标签(div、ul、header ...) > 统配 (*)

• CSS 权重 4 个等级的定义如下

  • 第一等：内联样式，如：style="color:red;"，权值为 1000 （该方法会造成 css 难以管理，所以不推荐使用）
  • 第二等：ID 选择器，如：#header，权值为 0100
  • 第三等：类、伪类、属性选择器如：.bar， 权值为 0010
  • 第四等：标签、伪元素选择器，如：div ::first-line 权值为 0001

• 最后把这些值加起来，再就是当前元素的权重了。

  其他：

  • 无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。（ie6 支持上有些 bug）。
  • 通配符，子选择器，相邻选择器等。如 *，>,+, 权值为 00001
  • 继承的样式没有权值。

• CSS 权重计算方式

  • 计算选择符中的 ID 选择器的数量（=a）
  • 计算选择符中类、属性和伪类选择器的数量（=b）
  • 计算选择符中标签和伪元素选择器的数量（=c）
  • 忽略全局选择器

• 来源：https://www.html.cn/qa/css3/16549.html

# CSS 画三角形

• 用边框话 (border)，例如下面

<style>

  .box {

    width: 0;

    height: 0;

    border: 10px solid transparent;

    /* border-left: 10px solid #ccc;  */    /* 左三角 */

    /* border-right: 10px solid #ccc; */    /* 右三角 */

    /* border-top: 10px solid #ccc;   */    /* 上三角 */ 

    border-bottom: 10px solid #ccc;         /* 下三角 */

  }

</style>

<div class="box"></div>

# 不给盒子宽度和高度如何水平垂直居中？

# 方式一

<style>

  main {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 200px;

    height: 200px;

    background-color: orange;

  }

  .box {

    background-color: pink;

  }

</style>

<main>

  <div class="box">box</div>

</main>

# 方式二

<style>

  main {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: orange;

  }

  .box {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%);

    background-color: pink;

  }

</style>

<main>

  <div class="box">box</div>

</main>

• 当然还要很多方式，这里只写两种。可搜索 CSS 布局查看

# 对 BFC 规范的理解？

• BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素
• 了解 BFC：(块级格式化上下文：block formatting context)
• BFC 的原值：如果一个元素具有 BFC，那么内部元素再怎么弄，都不会影响到外面的元素
• 如何触发 BFC：
  • float 的值非 none
  • overflow 的值非 visible
  • display 的值为：inlin-block、table-cell ...
  • position 的值为：absolute、fixed

# 清除浮动有哪些方式？

• 触发 BFC，比如 overflow: hidden;

• 多创建一个盒子，添加样式： clear: both;

• after|before 方式：

  	<style>
  	* {
  	margin: 0;
  	padding: 0;
  	}
  	ul {
  	list-style: none;
  	border: 10px solid #ccc;
  	}
  	ul::after,
  	ul::before {
  	content: '';
  	display: block;
  	clear: both;
  	}
  	ul li {
  	float: left;
  	width: 100px;
  	height: 100px;
  	background-color: pink;
  	}
  	</style>
  	<ul>
  	<li>1</li>
  	<li>2</li>
  	<li>3</li>
  	</ul>

# 在网页中应该使用奇数还是偶数字体？

• 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

• 偶数：让文字在浏览器上表现更好看

• 另外说明：ui 给前端一般设计图都是偶数的，这样不管是布局、转换 px 都方便一点

# position 根据什么定位？

• static [默认]：没有定位
• fixed：固定定位，相对于浏览器窗口进行定位
• reactive： 相对于自身定位，不脱离文档流
• absolute：相对于第一个有 reactive 的父元素，脱离文档流
• absolute 与 reactive 区别
  • reactive 不脱离文档流、absolute 脱离文档流
  • reactive 相对于自身定位、absolute 相对于第一个有 reactive 的父元素
  • reactive 如果有 left、right、top、bottom，只会存在 left、top（有效果）
  • absolute 如果有 left、right、top、bottom，都会存在（有效果）

# 双飞翼布局

• 写一个左中右布局，高度 200px，其中左、右固定宽 200px，中间自适应宽，要求先加载中间块

<style>

  * {

    margin: 0;

    padding: 0;

  }

  body {

    width: 100vw;

    height: 100vh;

  }

  main>div {

    float: left;

    height: 100px;

  }

  .left {

    margin-left: -100%;

    width: 200px;

    background-color: pink;

  }

  .center {

    width: 100%;

    text-align: center;

    background-color: orange;

  }

  .right {

    margin-left: -200px;

    width: 200px;

    background-color: pink;

  }

</style>

<main>

  <div class="center">center</div>

  <div class="left">left</div>

  <div class="right">right</div>

</main>

# 什么是 CSS reset ？

• reset 是一个 css 文件，用来重置样式的
• normalize.css 为了增强跨浏览器渲染的一致性，一个 css 重置样式库

# CSS sprite 优点缺点？

• sprite (精灵图、雪碧图) ，是把多个小图标合并成一张大图片
• 优点：减少了 http 请求次数，提升了性能
• 缺点：维护差 （例如图片位置进行修改或者内容宽高修改）