前面基础知识(查缺补漏)css篇

知识点 css篇

自适应单位

百分比: %
相对于视口宽度单位: vw
相对于视口高度单位: vh
相对于视口宽度或高度单位: vm  (取决于哪个小) 
相对于父元素字体单位大小: em
相对于根元素字体单元大小: rem

选择器比重

​ 内联样式 1000

​ ID选择器 0100

​ 类选择器, 属性选择器, 伪类选择器(:link :visited :hover :actice)0010

​ 标签选择器, 伪元素选择器(:before :after) 0001

​ 通配符选择器 (*) 继承 0000

无样式闪烁问题

无样式内容闪烁又称为 FOUC(Flash Of Unstyled Content)。

引起原因: 实在IE下通过 @import 方式导入CSS 文件引起的。

<style type="text/css"> 
	@import url('aaa.css');
</style>

IE 会首先加载整个HTML 文档中的DOM, 然后再导入外部的CSS文件。

因此,在页面DOM加载完成到CSS导入完成中间,有一段时间页面上内容是没有样式的。

@import 和 link 的区别

​ link 是 XHTML 标签。 @import 是 css2.0 引入的一个方法。

  1. 加载资源限制不同

    link 除了能加载css文件之外,还能加载 模板等。

    ​ @improt 只能加载css

  2. 加载方式

    ​ link 引入css, 是同步加载的。 意思就是 在页面载入的同时, css一起加载

    ​ @import , 是异步的。需要等网页载入后,在加载CSS。

  3. 兼容性

    ​ link是XHTML的标签,没有兼容问题。

    ​ @import 是CSS 2.0 提出的。不支持低版本的浏览器。

  4. 改变样式

    ​ link 是一个标签, 可以通过js 设置样式。

    ​ @import 只是一个方法。

介绍一下content属性。

​ 咱们一般使用这个属性, 就是为了清除浮动。 最后我们都使用flex 布局。 浮动很少使用。这个属性单拿出来。可能还犯蒙。

CSS的content 属性专门应用在 before/after 伪元素上, 用于插入生成的内容。

​ 最常见的就是 利用伪类清除浮动。

BFC, IDC, GFC,FFC

BFC(Block Formatting Context) 块级格式上下文。

​ 一个创建新的BFC的盒子是是独立布局的, 盒子里面的子元素的样式不会影响到外面的元素。在同一BFC中,两个挨着块级盒在垂直方向的margin会发生折叠。

​ 发生折叠 和布局有关系

				1.  两个块级盒的 margin 挨着了(可以是兄弟。也可以是祖先)。
  					2.   在同一块(BFC)中
     					3.  方向是垂直的。

​ BFC决定元素如何对齐内容进行布局,也决定与其他元素的关系和相互作用。

代码举例

<style>
    main {
        border: 5px solid red;
    }
    .a {
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        margin: 10px;
    }
    .b {
        width: 200px;
        height: 300px;
        background: chocolate;
        margin: 20px;
    }
</style>
<body>
    <main>
        <div class="a"></div>
        <div class="b"></div>
    </main>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDhelBH9-1591536000050)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200601151908422.png)]

现在的盒子a 和 盒子b 他们的距离 就是发生折叠之后的。 是20px。 按最大的走。把小的覆盖了。

​ 有三个规则: 都为正 要最大的。

​ 都为负 要绝对值最大的

​ 一正一负 结果相加。

解决方式就很简单了。 咱们根据出现的原因。随便打破一个条件就可以了。

因为是 块级 垂直 相邻(随便加一个边框)。在同一BFC中。 display 行级块就可以。 其他的方式,可能影响布局。看情况使用。

当我main块 不给 border的时候。 也会发生 margin塌陷。

<style>
    main {
        border: 5px solid red;
    }
    article {
        margin: 30px;
        background-color: cornsilk;
    }
    .a {
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        margin: 10px;
        display: inline-block;
    }
    .b {
        width: 200px;
        height: 300px;
        background: chocolate;
        margin: 10px;
    }
</style>
<body>
    <main>
        <article>
            <div class="a"></div>
            <div class="b"></div>
        </article>  
    </main>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9HBXOTUj-1591536000054)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200601154106471.png)]

IFC (Inline Formattin COntext) 内联格式化上下文。 行级元素的特性

GFC (GridLayout Formattin COntext) 网格布局格式化上下文。

​ 这种情况是 当元素 dispaly: grid的时候,元素就会获得一个独立的渲染区域。

​ 通过

​ 网格容器 grid container 定义 网格定义行 网格定义列

​ 网格项目上定义网格行 网格列 来为每一个网格项目定义位置和空间

FFC Flex Formatting Context 自适应格式化上下文。 也是现在用的最多的。

​ display: flex 或者 line-flex 就会生成 自适应容器。

访问超链接后Hover 样式就不出现了。

伪类都有

​ :link :visited :hover :active (爱恨原则) (L V H A) love hate

​ 想要样式出现。 爱恨一个都不能少, 顺序爱恨。

rgba() 和 opacity 的透明度有什么不同

​ opactiy 作用的对象是元素。

​ rgba 作用的对象 是 元素的颜色或者 背景色。

display:none 和 visibility:hidden 的区别

​ display:none 隐藏对应的元素,在文档布局中不再给他分配空间,它各边的元素会合拢,可以认为是真正的消失。

​ visibility:hidden 隐藏对应的元素,文档布局中仍然占据着空间。

​ opactiy 作用的对象是元素。

​ rgba 作用的对象 是 元素的颜色或者 背景色。

display:none 和 visibility:hidden 的区别

​ display:none 隐藏对应的元素,在文档布局中不再给他分配空间,它各边的元素会合拢,可以认为是真正的消失。

​ visibility:hidden 隐藏对应的元素,文档布局中仍然占据着空间。

自适应布局

​ 头部 底部固定 中间内容 自适应。 想让中间内容滑动。 overflow: auto

你可能感兴趣的:(css)