css基础重拾

css基础重拾

1、核心知识

@规则

• @namespace 告诉 CSS 引擎必须考虑XML命名空间。
• @media, 如果满足媒体查询的条件则条件规则组里的规则生效。
• @page, 描述打印文档时布局的变化.
• @font-face, 描述将下载的外部的字体。
• @keyframes, 描述 CSS 动画的关键帧。
• @document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)
• @charset用于定义样式表使用的字符集，不能再html页面使用，而是在

层叠性

层叠样式表自我的理解就是我们再给html某个标签设置样式的时候，有很多css声明作用到的时候，应该听那一个css声明

优先级：

• 最低的就是浏览器自带的一些样式
• 第二作者自己声明的样式，这里面作者自己声明的样式也有优先级
  • 优先级最高的是id选择器
  • 然后是class类选择器
  • 最后是标签选择器
• 最高的就是!important声明

选择器

基础选择器：

• 标签选择器：h1
• 类选择器：.checked
• ID 选择器：#picker
• 通配选择器：*

组合选择器：

• 相邻兄弟选择器：A + B
• 普通兄弟选择器：A ~ B
• 子选择器：A > B
• 后代选择器：A B

属性选择器：

• [attr]：指定属性的元素；
• [attr=val]：属性等于指定值的元素；
• [attr*=val]：属性包含指定值的元素；
• [attr^=val] ：属性以指定值开头的元素；
• [attr$=val]：属性以指定值结尾的元素；
• [attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；
• [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；

伪类

常用的伪类：

• :active：鼠标激活的元素；
• :hover： 鼠标悬浮的元素；
• ::selection：鼠标选中的元素；
• :link：未访问的链接元素；
• :visited：已访问的链接元素；

为元素：

• ::before：在元素前插入内容；
• ::after：在元素后插入内容；

css优先级

• 10000：!important；
• 01000：内联样式；
• 00100：ID 选择器；
• 00010：类选择器、伪类选择器、属性选择器；
• 00001：元素选择器、伪元素选择器；
• 00000：通配选择器、后代选择器、兄弟选择器；

css继承

子元素继承部分父元素的样式，这样做的目的就是这样可以减少css文件的大小

color(颜色，a元素除外)
direction(方向)
font（字体）
font-family（字体系列）
font-size（字体大小）
font-style（用于设置斜体）
font-variant（用于设置小型大写字母）
font-weight（用于设置粗体）
letter-spacing（字母间距）
line-height（行高）
text-align（用于设置对齐方式）
text-indent（用于设置首航缩进）
text-transform（用于修改大小写）
visibility（可见性）
white-space（用于指定如何处理空格）
word-spacing（字间距）

//这个里面注意，在继承颜色的时候，a标签是不继承的
//不继承的元素有width、height、margin 、border、padding、主要是宽高，内外边距，边框等

文档流

概念：文档流就是把内容按照从左到右，从上到下的顺序一行一行的排列展示

如何脱离文档流呢？

• 使用浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠；
• 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补。
• flex布局也可以脱离文档流

盒模型

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

所以 .box 元素内容的宽度就为 200px，而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。

display相关知识

1、盒子的显示和隐藏

• 显示，display: block;
• 隐藏，display: none

2、块级和行内盒子：

• 块级盒子：display 为 block、list-item、table、flex、grid、flow-root 等；
• 行内级盒子：display 为 inline、inline-block、inline-table 等；

block

• 占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列；
• 设置 width/height 将会生效；
• 设置 padding 和 margin 将会生效；

inline

• 不会占满一行，宽度随着内容而变化；多个 inline 元素将按照从左到右的顺序在一行里排列显示，如果一行显示不下，则自动换行；
• 设置 width/height 将不会生效；
• 设置竖直方向上的 padding 和 margin 将不会生效；

inline-block

• 是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素；
• 设置 width/height 将会生效；
• 设置 padding 和 margin 将会生效；

BFC应用：

1、 自适应两栏布局

应用原理：BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

<div class="layout">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>

.aside {
    float: left;
    width: 100px;
}
.main {
    <!-- 触发 BFC -->
    overflow: auto;
}

2、清除浮动

问题：浮动产生的问题就是父盒子的高度塌陷

解决方法：1、给父盒子设置高度，2、给父盒子设置overflow: hidden;

层叠上下文

层叠顺序

• 层叠上下文的 border 和 background
• z-index < 0 的子节点
• 标准流内块级非定位的子节点
• 浮动非定位的子节点
• 标准流内行内非定位的子节点
• z-index: auto/0 的子节点
• z-index > 0的子节点

如何比较两个元素的层叠等级？

• 在同一个层叠上下文中，比较两个元素就是按照上图的介绍的层叠顺序进行比较。
• 如果不在同一个层叠上下文中的时候，那就需要比较两个元素分别所处的层叠上下文的等级。
• 如果两个元素都在同一个层叠上下文，且层叠顺序相同，则在 HTML 中定义越后面的层叠等级越高。

值和单位

CSS 的声明是由属性和值组成的，而值的类型有许多种：

• 数值：长度值 ，用于指定例如元素 width、border-width、font-size 等属性的值；
• 百分比：可以用于指定尺寸或长度，例如取决于父容器的 width、height 或默认的 font-size；
• 颜色：用于指定 background-color、color 等；
• 坐标位置：以屏幕的左上角为坐标原点定位元素的位置，比如常见的 background-position、top、right、bottom 和 left 等属性；
• 函数：用于指定资源路径或背景图片的渐变，比如 url()、linear-gradient() 等；

PX

在这里px在正常的屏幕下面1px就是2个像素点，而在设备像素比(devicePixelRatio) 为 2 的 Retina 屏幕下，它就有 16 个像素点。所以屏幕尺寸一致的情况下，屏幕分辨率越高，显示效果就越细腻。

em

em 是 CSS 中的相对长度单位中的一个。居然是相对的，那它到底是相对的谁呢？它有 2 层意思：

• 在 font-size 中使用是相对于父元素的 font-size 大小，比如父元素 font-size: 16px，当给子元素指定 font-size: 2em 的时候，经过计算后它的字体大小会是 32px；
• 在其他属性中使用是相对于自身的字体大小，如 width/height/padding/margin 等；

我们都知道每个浏览器都会给 HTML 根元素 html 设置一个默认的 font-size，而这个值通常是 16px。这也就是为什么 1em = 16px 的原因所在了。

em 在计算的时候是会层层计算的，比如：

<div>
    <p></p>
</div>
复制代码
div { font-size: 2em; }
p { font-size: 2em; }
复制代码

对于如上一个结构的 HTML，由于根元素 html 的字体大小是 16px，所以 p 标签最终计算出来后的字体大小会是 16 * 2 * 2 = 64px

rem

rem(root em) 和 em 一样，也是一个相对长度单位，不过 rem 相对的是 HTML 的根元素 html。

rem 由于是基于 html 的 font-size 来计算，所以通常用于自适应网站或者 H5 中。

比如在做 H5 的时候，前端通常会让 UI 给 750px 宽的设计图，而在开发的时候可以基于 iPhone X 的尺寸 375px * 812px 来写页面，这样一来的话，就可以用下面的 JS 依据当前页面的视口宽度自动计算出根元素 html 的基准 font-size 是多少。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        psdWidth = 750,  // 设计图宽度
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if ( !clientWidth ) return;
            if ( clientWidth >= 640 ) {
                docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
            } else {
                docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
            }
        };

    if ( !doc.addEventListener ) return;
    // 绑定事件的时候最好配合防抖函数
    win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
    doc.addEventListener( 'DOMContentLoaded', recalc, false );
    
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
})(document, window);
复制代码

比如当视口是 375px 的时候，经过计算 html 的 font-size 会是 100px，这样有什么好处呢？好处就是方便写样式，比如从设计图量出来的 header 高度是 50px 的，那我们写样式的时候就可以直接写：

header {
    height: 0.5rem;
}
复制代码

每个从设计图量出来的尺寸只要除于 100 即可得到当前元素的 rem 值，都不用经过计算，非常方便。偷偷告诉你，如果你把上面那串计算 html 标签 font-size 的 JS 代码中的 200 替换成 2，那在计算 rem 的时候就不需要除于 100 了，从设计图量出多大 px，就直接写多少个 rem。

媒体查询

谈这个问题，主要是考虑应用移动端不同设备，不同屏幕，不同分辨率，甚至是考虑pc端的响应式布局。

css2就引入了media-dependent样式表，开发者可以利用他们为不同媒体类型创建独立样式表；

例如：

或者将其添加至外联样式表标签：

再或者使用@media标签讲样式添加至已有的样式表中:

@media print{

//add styles

}

media的值可以是以下几种：

---- all 所有媒体类型

---- aural 语音合成器

---- braille 盲文装置

---- embossed 分页盲文打印机

---- handheld 小型设备，通常为单色

---- print 纸张格式及“打印预览”

---- projection 投影仪

---- tty 有固定字符网格的电传打字设备

---- tv 具有低分辨率、色彩及声音的电视设备

---- screen 彩色电脑屏幕

就目前来讲，我们并不会遇到上面所列出的那么多媒体类型，screen是我们使用最多的类型。

在响应式布局的网页或者应用中，视觉呈现需要根据设备屏幕的大小的变化而做出改变，以展示最佳效果。

利用媒体查询，就可以编写css，自动将设计更改为提供不同屏幕大小的最佳UI体验。

当然我要应用的场景是移动设备，这里记录的也是css3规范中对媒体查询通过表达式进行的扩展。利用这些表达式，我们可以更精确的，更灵敏的在不同情况下使用不同的样式。因此下面的例子目前只能在ff，chrome，safari，opera中得到支持。

*媒体查询规则

@media all and (min-width: 800px) { ... }

所有最小水平屏幕宽度为800像素都应该使用如下css规则。

· @media all 是媒体类型，表示将该css应用于所有媒体类型

·(min-width:800px)是包含媒体查询的表达式，如果最小宽度为800像素，则为true，并告诉浏览器运行下列css

其中all可省略，表示应用于所有媒体类型

and也一样可选。

@media (min-width:800px) and (max-width:1200px) { ... }

当设备最小宽度为800px，最大宽度为1200px的时候应用下列css。

这里如果我们想检测手机或这平板设备是横向的还是纵向的，该如何呢？

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

可以使用orientation来检测设备当前的显示方向：，他有两个值，landscape（横向）和portrait（纵向）

链接表达式还有一个关键词or，可以理解为“||”,即逻辑或运算，条件中有一个为true，结果就为true

and跟你用“&&”一样，即逻辑与运算，条件中都为true，结果才为true

not逻辑非运算，举个例子：

@media (not min-width:800px) { ... }

表示：当最小宽度不是800像素时，会应用下列css。

最后差点忘了，还可以把表达式应用在link标签上，如下：

<link rel="stylesteet" href="style.css" media="only screen and (max-width:800px)">



<link rel="stylesteet" href="style.css" media="only screen and (max-width:800px) and (min-width:400px)">