【CSS】BFC、简单布局、浏览器兼容及常见居中方式

作业地址

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

BFC是什么？

BFC 全称 Block Formatting Context，既块级格式化上下文

如何生成BFC？

浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。

BFC有什么用？

  1. 清除元素之间的影响
  2. 清除内部浮动元素对父元素的影响
  3. 创建自适应布局

实现如下的效果，附上预览链接

作业需求——点击预览

实现效果——点击预览

实现一个两栏布局，右侧固定宽度200px，左侧自适应宽度

实现效果——点击预览

实现一个三栏布局，两侧固定宽度200px，中间宽度自适应撑满

实现效果——点击预览

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

CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
简单的说，CSS hack的目的就是使CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

查看兼容情况

一般情况，我们使用caniuse.com查看属性的浏览器兼容情况

ie6、7的 hack 写法是？

hack常见写法有

属性前缀法(即类内部Hack)

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

选择器前缀法(即选择器Hack)

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效

条件注释法(即HTML条件注释Hack)

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式

<!–-[if IE 6]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

对于如下代码，以下说法正确的是

<!--[if !IE]>
   <script>alert(1);</script>  
 <![endif]-->

IE浏览器

对IE浏览器来说，这段代码本身有就会被注释掉

非IE浏览器

非IE浏览器不认识这种话，所以在非IE上

<script>alert(1);</script>

本身就是生效的，所以选择在非ie浏览器中弹出1

如下属性，兼容哪些浏览器？

这个去caniuse.com查看即可

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

CSS reset

也称CSS重置，CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！如下即是CSS重置的一般用法，常见但事实上极不推荐

* {
  margin:0;
  padding:0;
}

CSS预编译器

也叫作CSS预处理器，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题

后编译器

也称CSS后处理器，是对 CSS 进行处理，并最终生成 CSS 的 预处理器，它属于广义上的 CSS 预处理器

常见居中方式

水平居中

  1. 行内元素
    常见的文本、图片、按钮等元素，可以给父元素设置
text-align: center;

同理，若块级元素设置了inline时，也可以使用，注意首要的条件时子元素没有被float影响才行

  1. 块级元素
  • 定宽元素
    可以设置元素的左右margin为auto来实现水平居中
margin: 0 auto;
  • 不定宽元素
    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
    有三种方法可以对不定宽块状元素进行居中：
    • 方法1
      将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中； 或使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中。
      为什么加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
table{
    margin:0 auto;
}

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

.wrap{
    background:#ccc;
    display:table;
    margin:0 auto;
}

<div class="wrap">
  Hello world  
</div>
  • 方法2
    改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center来实现居中效果。
    这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值（变成inline-block就可以设置宽高）。
.container{
    text-align:center;
 }
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;  //怎么这一句用不用都是一样效果的？
 }

<div class="container">
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
</div>
  • 方法3
    通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}

<div class="wrap">
    <div class="wrap-center">Hello world</div>
</div>

垂直居中

垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。

  1. 父元素高度确定的单行文本
    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )。
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}

<div class="wrap">
    <h2>Hello world</h2>
</div>
  1. 父元素高度确定的多行文本
  • 方法1
    使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
.wrap{
    height:300px;
    background:#ccc;
    vertical-align:middle;   /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
}

<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    background:#ccc;
    display:table;
    vertical-align:middle;
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>
  • 方法2
    设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。但这种方法兼容性比较差， IE6、7 并不支持这个样式。
.wrap{
    height:300px;
    background:#ccc;
    
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>

参考文章

CSS的预处理器和后处理器
讨论CSS中的各类居中方式
CSS中的各种居中方法总结
WIKI-预处理器
史上最全的CSS hack方式一览-freshlover的专栏

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容