跟谁学笔试知识盲区

最新推荐文章于 2024-07-19 15:50:46 发布

huoren_no1

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量147

点赞数

分类专栏： CSS 文章标签： css 定位 css3

本文链接：https://blog.csdn.net/huoren_no1/article/details/107870318

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. BFC

概念
- Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
- BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流
- 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性
触发 BFC
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
特性
- 同一个 BFC 下外边距会发生折叠
- BFC 可以包含浮动的元素（清除浮动）
- BFC 可以阻止元素被浮动元素覆盖

10 分钟理解 BFC 原理 - 林东洲的文章 - 知乎

2. :nth-0f-type(n)

作用
- 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
- n 可以是数字、关键词或公式，如：2、odd/even、an + b(a、b为数字)0

示例

代码

<!DOCTYPE html>
<html>
<head>
<style> 
ul li:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<ul>
	<li>1</li>
    <li>2</li>
    <li>3
    	<ul>
    		<li>3.1</li>
            <li>3.2</li>
        </ul>
    </li>
    
</ul>

</body>
</html>

效果

3.优雅降级与渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

前端开发之优雅降级与渐进增强

4.selector特殊性/权重/优先级

huoren_no1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟谁学笔试知识盲区

1. BFC概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性触发 BF
复制链接

扫一扫