详解CSS应用（一）

蔚落 2022-05-19 01:08 177阅读 0赞

## 一、HTML基础强化 ##

### 0x1 理解HTML ###

HTML是一个“文档”，描述文档的结构，有区块和大纲。  
[点此查看相关开源项目][Link 1]

### 0x2 表单 ###

<input type="radio" name="radio1" id="radio1-2" />
    <label for="radio1-2">选项二</label>
    //关联的关键是ID

这里的选项二可以点击文字达到点击单选框的效果。

<button type="button">普通按钮</button>
    <button type="submit">提交按钮一</button>
    <input type="submit" value="提交按钮二"/>
    <button type="reset">重置按钮</button>

submit/reset必须要有form才有效果。

### 0x3 HTML版本 ###

HTML4/4.01 (SGML)  
XHTML(XML)  
HTML5  
![20180714233209.png][]  
在XHTML中要求很严格,下面的都有错误：

<div class="test">合法</div>
    <DIV class="test">标签名大写</DIV>
    <div ID="test">属性名大写</div>
    <input type="checkbox" checked />
    <p>标签不结束1
    <div style=color:red>属性不带引号</div>

### 0x4 HTML5新增语义 ###

*  header/footer 头尾
 *  section/article 区域
 *  nav 导航
 *  aside 不重要内容
 *  em/strong 强调
 *  i icon

### 0x5 HTML元素分类 ###

*  按默认样式分  
    
    
     *  块级 block
     *  行内 inline
     *  inline-block 表单、下拉框、输入框

<div>DIV元素</div> //块级
    <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> //行内
    <p><select><option>下拉框</option></select> //inline-block <span>你猜左边是什么元素</span></p>

![20180714235729.png][]  
\* 按内容分  
![20180715000922.png][]  
[查看官方文档][Link 2]

### 0x6 HTML元素嵌套 ###

块级元素可以包含行内元素  
块级元素不一定能包含块级元素  
“行内元素一般不能包含块级元素”

### 0x7 HTML相关面试题 ###

*  Doctype的意义是什么  
    
    
     *  让浏览器以标准模式渲染
     *  让浏览器知道元素的合法性
 *  HTML5有什么变化  
    
    
     *  新的语义化元素
     *  表单增强
     *  新的 API（离线、音视频、图形、实时通信、本地存储、设备能力）
 *  em和i有什么区别  
    
    
     *  em是语义化的标签，表强调
     *  i是纯样式的标签，表斜体
     *  HTML5中i不推荐使用，一般用作图标
 *  语义化的意义是什么  
    
    
     *  开发者容易理解
     *  机器容易理解结构（搜索、读屏软件）
     *  有助于SEO
     *  semantic microdata
 *  哪些元素可以自闭合  
    
    
     *  表单元素
     *  input
     *  图片 img
     *  br hr
     *  meta ink
 *  HTML和DOM的关系  
    
    
     *  HTML是“死”的
     *  DOM由HTML解析而来，是活的
     *  JS可以维护DOM
 *  Form的作用有哪些  
    
    
     *  直接提交表单
     *  使用submit/reset按钮
     *  便于浏览器保存表单
     *  第三方库可以整体提取值
     *  第三方库可以进行表单验证

## 二、CSS基础 ##

> Cascading Style Sheet  
> 层叠样式表

### 0x1 层叠的理解 ###

三张有冲突的样式会重叠为一张  
![20180715161425.png][]  
![20180715161535.png][]

body{
          padding: 10px;
          font-size: 14px;
          background:red; 
    }
    body.body{
         font-size: 20px;
         background: red;
    }
    #body{
        background: blue;
    }
    
    <body class="body" id="body">
        Hello CSS!
    </body>

运行结果：  
![20180715162009.png][]

### 0x2 选择器 ###

*  用于匹配HTML元素
 *  分类和权重  
    
    
     *  我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
     *  第一等：代表内联样式，如: style=””，权值为1000。  
        第二等：代表ID选择器，如：\#content，权值为100。  
        第三等：代表类，伪类和属性选择器，如.content，权值为10。  
        第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
     *  !important优先级最高，元素属性优先级高，相同权重后写的生效
 *  解析方式和性能  
    
    
     *  浏览器的解析方式是从右到左，为了可以提高解析性能
 *  值得关注的选择器  
    ![20180715170648.png][]

### 0x3 非布局样式 ###

*  字体族
    
     *  字体优先级
     *  自定义字体
    
        @font-face {
                font-family: "IF";
                src: url("./IndieFlower.ttf");
            }
            .custom-font{
                font-family: IF;
            }
          <div class="custom-font">你好 Hello World</div>
 *  行高  
    
    
     *  由line box组成，linebox由inlinebox组成
     *  line-height的设置可以达到垂直居中的效果，将父元素撑起来
     *  图片是inline元素按照字体基线对齐会出现下端留空的现象  
        ![20180715175245.png][]  
        解决方式：  
        1.vertical-align: bottom;  
        2.display: block;
 *  背景  
    
    
     *  HSLA色彩模式:色相(H)、饱和度(S)、明度(L)、透明度(A)
     *  RGBA/十六进制
     *  背景渐变

background: -webkit-linear-gradient(left, red, green); //从左到右 
    background: linear-gradient(to right, red, green); 
    background: linear-gradient(180deg, red, green); //角度
    linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);

*  雪碧图  
    减少浏览器的请求次数，将多个图片放在一个图片中。使用的时候，通过background-position调整显示的位置。  
    ![20180715191636.png][]
 *  边框  
    
    
     *  边框实现三角形  
        原理就是边框交界处是斜切的。  
        ![20180715194247.png][]
     *  边框用图片填充  
        ![20180715194431.png][]  
        border.png ![20180715193250.png][]
 *  滚动  
    
    
     *  overflow: visible/hidden/scroll/auto;  
        ![20180715194916.png][]

### 0x4 CSS Hack ###

*  不合法但生效的写法
 *  主要用于区分不同浏览器
 *  缺点：难理解难维护易失效
 *  替代方案：特性检测、针对性加class

### 0x5 CSS面试 ###

*  选择器的优先级  
    
    
     *  计算权重确定
     *  !important
     *  内联样式
     *  后写的优先级高
 *  雪碧图的作用  
    
    
     *  减少HTTP请求数提高加载性能
     *  有一些情况下可以减少图片大小
 *  自定义字体的使用场景  
    
    
     *  宣传/品牌/banner等固定文案
     *  字体图标
 *  Base64 的使用  
    
    
     *  用于减少HTTP请求
     *  适用于小图片
     *  Base64的体积约为原图4/3
 *  伪类和伪元素的区别  
    
    
     *  伪类表状态
     *  伪元素是真的有元素
     *  前者单冒号，后者双冒号
 *  如何美化checkbox
    
     *  label\[for\]和id
     *  隐藏原生input
     *  :checked + label  
        案例：  
        
        
            .checkbox{
            
                }
                .checkbox input{
                    display: none;
                }
                .checkbox input + label{
                    background:url(./checkbox1.png) left center no-repeat;
                    background-size:20px 20px;
                    padding-left:20px;
                }
                .checkbox input:checked + label{
                    background-image:url(./checkbox2.png);
                }
            <div class="checkbox">
                <input type="checkbox" id="handsome"/>
                <label for="handsome">我很帅</label>
            </div>

[Link 1]: http://h5o.github.io
[20180714233209.png]: /images/20220519/1ef347c813214d9fb2114fc5d1765333.png
[20180714235729.png]: /images/20220519/df30522eb8ee4322ba80a0159cc1d013.png
[20180715000922.png]: /images/20220519/5af53d824680464aae1ec3e1c856d205.png
[Link 2]: https://www.w3.org/TR/html5/dom.html#phrasing-content
[20180715161425.png]: /images/20220519/3a230c9ef037484e99d91496ea516cc4.png
[20180715161535.png]: /images/20220519/4ba32a53c30e4612a92cd13355882d20.png
[20180715162009.png]: /images/20220519/b830edccacfb41a8959917e6182fc42a.png
[20180715170648.png]: /images/20220519/ae4a0460e5b845e4a5f7e32511d010e0.png
[20180715175245.png]: /images/20220519/2bd2d453dc844c439a1064a81ba1c79c.png
[20180715191636.png]: /images/20220519/06a74fd1722e4a0bbc00c6b77ecc57a7.png
[20180715194247.png]: /images/20220519/d161e314befa454b8eacb44c3b192f68.png
[20180715194431.png]: /images/20220519/91ece139e5724520976281d96e8f7d94.png
[20180715193250.png]: /images/20220519/57c726d43f334563a0b35d4a12af89cf.png
[20180715194916.png]: /images/20220519/15e153f545a84524947aba3a960f001d.png