非样式布局

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


* 字体族(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

你可能感兴趣的:(非样式布局)