CSS

作者: studystudy | 来源:发表于2017-11-01 17:37 被阅读0次

    1.引入

      1.内联式
      2.style标签
      3.link标签
      4.import    // 在css文件中@import url('文件名')
    

    2.权重

        元素, 伪元素:  (0,0,0,1) 
        类, 伪类, 属性:  (0,0,1,0) 
        ID: (0,1,0,0) 
        内联样式:  (1,0,0,0)
        //注:继承的权值最低,可算作0.1
               !import 最高。大于内联但一般不用;
    

    3.BFC

    一、什么是BFC BFC(block formatting context)
    简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
    在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。 也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。(在 CSS3 中,BFC 叫做 Flow Root)

    二、 形成 BFC 的条件

    1、浮动元素,float 除 none 以外的值;
    2、绝对定位元素,position(absolute,fixed);
    3、display 为以下其中之一的值 inline-blocks,table-cells,table-captions;
    4、overflow 除了 visible 以外的值(hidden,auto,scroll)

    三、BFC布局规则:

    1.内部的Box会在垂直方向,一个接一个地放置。
    2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    4.BFC的区域不会与float box重叠。
    5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    6.计算BFC的高度时,浮动元素也参与计算

    四、BFC常见作用

    1、包含浮动元素 问题案例:高度塌陷问题:在通常情况下父元素的高度会被子元素撑开,而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌,上下边界重合。这时就可以用bfc来清除浮动了。

    这里写图片描述
    2、不被浮动元素覆盖 问题案例: div浮动兄弟遮盖问题:由于左侧块级元素发生了浮动,所以和右侧未发生浮动的块级元素不在同一层内,所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden,触发bfc来解决遮挡问题。 这里写图片描述
    3、 BFC 会阻止外边距折叠 问题案例:margin塌陷问题:在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。可以用overflow:hidden产生bfc来解决。 这里写图片描述
    详见
    http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

    http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

    相关文章

      网友评论

          本文标题:CSS

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