CSS入门(4)

作者: 飘飘流浪者 | 来源:发表于2017-08-12 23:23 被阅读0次

BFC 是什么?如何生成 BFC?BFC 有什么作用?

  • 全称为block formatting context,中文常译为块级格式化上下文。它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。
  • 生成BFC的方式:
    1.根元素;
    2.float属性不为none;
    3.position为absolute或fixed;
    4.display为inline-block, flex, 或者inline-flex;
    5.overflow不为visible;
  • BFC的作用:
    1.防止垂直方向上的margin合并;
    2.清除浮动,防止内部塌陷。

什么是 CSS hack?在哪个网站查看标签(属性)的浏览器兼容情况

  • 由于不同厂商的浏览器,或者是同一厂商的浏览器的不同版本,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。
  • IE6 hark:
  • IE7 hark:
    can i use__?

css reset 是什么?css 预编译器是什么? 后编译器(post css)是什么?

  • HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。
  • 我们书写 CSS 时难以解决的问题:语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。
  • postCSS:一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量,混入(mixin),转换未来的 CSS 语法,内联图片等操作。PostCSS使CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。

相关文章

  • CSS入门(4)

    BFC 是什么?如何生成 BFC?BFC 有什么作用? 全称为block formatting context,中...

  • #30天专注橙长计划#向前端工程师进发#day0#航线设计

    发现问题,路线大修。 学习方面:暂定按HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门...

  • CSS入门4(0723)

    07-23 1.解决图片白边问题 /* 两张图片之间的间隙,可以用display:block来去掉 */ *{ m...

  • CSS入门4-引入CSS

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 前端开发 之 CSS入门

    文章简要:CSS介绍DIV+CSS的优点CSS 语法CSS新建格式 CSS入门 CSS介绍 CSS(Cascadi...

  • CSS第一小节第一天

    CSS基础入门 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...

  • mdui quickstart 快速入门

    实现入门效果 目录结构 代码 说明 这个框架依赖很少,入门实例 css 加入 mdui.css javascrip...

  • bootstrap(1)

    入门 1. 下载 2. min.css 主要用的是压缩后的css 3. font 和一些符号 4. js文件 5....

  • CSS Syntax(CSS 语法)

    简单介绍CSS,学习入门自用=-= 以下笔记摘抄全部来自优达学城,感谢优达让我入门。 什么是CSS CSS即层叠样...

网友评论

    本文标题:CSS入门(4)

    本文链接:https://www.haomeiwen.com/subject/lqfsrxtx.html