前面基础知识（查缺补漏）css篇

最新推荐文章于 2023-12-29 11:43:59 发布

没入门到放弃

最新推荐文章于 2023-12-29 11:43:59 发布

阅读量288

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_35898059/article/details/106607622

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

知识点 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 引入的一个方法。

加载资源限制不同

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

@improt 只能加载css
加载方式

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

@import , 是异步的。需要等网页载入后，在加载CSS。
兼容性

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

@import 是CSS 2.0 提出的。不支持低版本的浏览器。
改变样式

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 隐藏对应的元素，文档布局中仍然占据着空间。