非样式布局

非布局样式-字体

* 字体 字重 颜色 大小 行高
    和文字相关的一些
* 背景 边框      
    和盒子相关的
* 滚动 换行
    跟 页面 和 布局有关
* 粗体 斜体 下划线
    文字装饰性的样式
* 其它


* 字体族(font-family)
    -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如 宋体)
    -- sans-serif 非衬线字体：字体笔画的开始和结束 都非常规则。如 屏幕上的文字(比如 黑体)
    -- monospace 等宽字体：每个字母所占屏幕的宽度 是相等的
    -- cursive 手写体：比如 方正体 静蕾体
    -- fantasy 花体：英文中很华丽的 弯弯绕绕的字体
* 多字体fallback
    指定的字体找不到时，按fallback的规定 向后查找字体。 看浏览器所在主机中 有没有fallback指定的这些字体中的一个。
    fallback并不是针对整个body元素的，而是 对每个字符都会采用fallback机制。因此，中英文混杂的网页中，可能同时有多种字体的存在。
* 网络字体，自定义字体
    引用网络上的字体 或 引用本地的字体
* iconfont
    用一系列的图片 代替 具体的一系列的字符(也就是一套字体)

具体的某套字体的名称，用双引号括起来。而字体族 是不能加引号的。
把更特殊的字体 写在前面，稍微通用一些的字体 往后放。不然的话，先找到较通用的“Microsoft Yahei”后，就使用“Microsoft Yahei”了，而不再使用 较特殊的字体“PingFang SC”了。最后写一个字体族monospace 用来匹配多种字体。如下示例：
font-family: "PingFang SC", "Microsoft Yahei", monospace;

自定义字体：
    @font-face {
        font-family: "IF";
        src: url("./IndieFlower.ttf");
    }
    .custom-font{
        font-family: IF;
    }
    1) 自定义字体@font-face  2) 引用自定义字体 font-family: IF;
远程字体的引用：
    
    .custom-font{
        font-family: IF;
    }
    先获取远程css，远程css中已经包含了字体的定义，然后 直接引用 css中包含的字体。
自定义图标库：
    到iconfont.cn中 选择图标->加入购物车->添加至项目->下载

---

非布局样式 - 行高

* 行高的构成
    行高是由line-box决定的，line-box是由inline-box组成的，inline-box的line-height 会决定 行高的高度。
* 行高相关的现象和解决方案

* 行高的调整


* 底线 顶线，底线和顶线 之间 是文本占据的区域。 
* 基线(base line)，英文文字的对齐线。
    对中文来讲，文字的底部才是基线位置；同时 文字的对齐 是使用顶线或底线 来对齐的。


* 为什么行高不一样，然而渲染的高度却是一样的呢？
    line-height 会把 文本盒 撑起来，也就是 会撑起来文本所在的inline-box的高度，但是并不影响 文本所占空间的高度 和 布局的高度。
    
    多个inline-box 加在一起 构成了 line-box(也就是一行)
    line-box的高度 是由inline-box的高度决定的。
    span默认是inline的 也是没有定高的，给span规定高度也是没有用的(因为span是inline的)。

    line-height 大于 font-size时，会导致多余的空间 分布到文字的上下两侧，从而导致 文字垂直居中。因此，想要垂直居中时 可以通过line-height来做。
    文字的背景色 是根据字体的大小来渲染的，底线和顶线之间。
    
* 为什么图片底部有空白？
    * 原因：img也是inline的，因此img要遵守 行高的构成，img会按照baseline对齐，而 在基线和底线之间 是留有空隙的。
    空隙的大小 视字体大小而定(如果字体大小是12px，那么 缝隙会是3px左右的)
    * 解决方法：将图片的vertial-align设置为bottom即可。

* 把一个元素设为inline-block时，该元素 会水平排列。此时涉及到一种常用的布局方式：inline-block布局

---

非样式布局 - 背景

作为容器底层的铺垫，不影响容器正文的排布。

* 背景颜色(纯色)
* 渐变色背景
* 多背景的叠加
    指定两种渐变色 或 两张不同的图片
* 背景图片的属性(雪碧图)
    雪碧图：把不同素材的图片 集中到同一张图片上，以减少http的请求 
* base64和性能优化
    base64是种文本格式，好处也是 减少了http连接的次数。但是图片体积会增大 大概1/3。因此这种应用场景 一般是小图标。另外 解码base64也是会有 额外开销的。
* 多分辨率的适配

* 背景缩小 用在什么场景呢？
    * width height减半，background-size减半，background-position减半
    做移动端适配时，需要缩小图片

---

非布局样式 - 边框

* 边框的属性
    边框形状，边框宽度，颜色
* 使用背景图 作边框
* 边框的构成
    通过三角形的案例，了解边框的构成。
    由于左边框和下边框之间衔接的部分 是采用 斜切的。左右边框设置为透明，内容宽度设置为0。

非布局样式 - 滚动

什么时候 会产生 滚动？
    内容比容易多的时候。
* 滚动行为 和 滚动条的显示/隐藏
    visible: 内容撑出容器 内容全部显示 
    hidden：超出容器的部分 进行隐藏，不会显示超出的部分
    scroll：内容超出容器后，允许滚动 显示其余部分，滚动条 始终显示
    auto：内容超出容器后，允许滚动 显示其余部分，滚动时 才显示滚动条。如果内容较少时，不显示滚动条。

非布局样式 - 文字折行

和 滚动一样，都面临 内容显示不下 的情况。
* 如何控制 换行的行为？是否换行？什么时候 换行？在哪个地方进行换行？
    针对那些东西可以换行？
* overflow-wrap(word-wrap):
    通用的换行控制。实际使用中overflow-wrap的兼容性 不如 word-wrap. 但是overflow-wrap和word-wrap都是指的同一个东西。
    - 是否保留单词：当行尾的单词很长时，如果 保留单词(单词 不换行进行显示)，不保留(单词打断 换行进行显示)
* word-break 针对多字节文字(把单词看做一个单位，还是把字母看作一个单位)
    中文的句子 也可以视为 一个单词，从而 以句子为单位 句子不进行换行显示。
* white-space 空白处是否断行。
    如何让一个很长的句子 不换行？
        white-space: nowrap;

非样式布局 - 装饰性属性及其它

* font-weight: 字重(字的粗细)
* font-style: italic 斜体
* 下划线 text-decoration
* cursor指针

非样式布局 - CSS Hack

用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。
* Hack 即是 不合法 但是生效的 css写法
* 主要用于区分不同浏览器

* 缺点：难理解 难维护 易失效

* 替代css hack的方案：检测浏览器是否有 某些特性，没有某些特性时 做针对的处理(针对性的加class)。

* 怎样用纯css的方式 实现一个美化的checkbox？
    隐藏checkbox，对 和checkbox关联的label 设置背景图片。

* 实现选项卡

CSS面试题

* css选择器的优先级
    对选择器作分类，应用不同的权重(权重计算不进位)
    !important 优先级最高
    内联样式 > 外部css表单
    后写的优先级高
* 雪碧图的作用
    把不同的图标合并到一张图上，减少http请求次数 提高页面加载性能。
    如果这些小图标的颜色接近 可以减少 雪碧图的大小。
    利用background属性，和background-size, background-positon，通过background-positon位移 来定位图标位置。
* 自定义字体的使用场景
    利用网络字体，在css中定义，进行字体的引用。
    1. 宣传/品牌/banner等固定文案：因为中文的字体体积非常大，动辄十几M。
    2. 图标字体：把图标做成文字，给他定义成特别的字体，在需要使用的地方 引入该字体。
* base64的使用
    把图片变成文本的一种方式，然后把base64字符串 内嵌到css中 进行使用。
    1. 减少http请求：因为把base64的图片 放到了css中，那么 请求css时 顺带就把base64的图片 给带过来了，所以减少了http请求次数，增加了加载的性能。
    2. 主要适用于小图片：大的图片做成文本 额外增加的体积较大，解码base64花销也较大。
* 伪元素 伪类 的区别
    1. 伪类是表示 一种状态的(比如某元素 处在 鼠标悬停其上的状态hover)。
    2. 伪元素 是真实存在的状态，在页面中是可以显示内容的。
    3. 伪元素使用双冒号，伪类单冒号。由于浏览器兼容性的问题，before after需要写单冒号 或者 单双冒号都要写，因为有些浏览器只接受 单冒号的父元素。
* 如何美化checkbox
    1. 隐藏checkbox
    2. 对 和checkbox关联的label(使用label[for] 和 checkbox[id]) 设置背景图片。
    3. input:checked + label, input + label