前端学习 -- Css -- 高度坍塌问题的产生以及解决-阿里云开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

解决高度坍塌措施：

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC
1.设置元素浮动(不推荐)
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位(不推荐)
3.设置元素为inline-block(不推荐)
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值（aotu hidden）
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
overflow: hidden;

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可。

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持。

高度坍塌的情况：

<!DOCTYPE html>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                /*为box1设置一个边框*/
                border: 10px red solid;
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            .box3{
                 height: 100px;
                 background-color: yellow;
        </style>
    </head>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

高度坍塌的效果：

通过zoom和overflow解决问题：

<!DOCTYPE html>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
                zoom:1;
                overflow: hidden;
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            .box3{
                 height: 100px;
                 background-color: yellow;
        </style>
    </head>
        <div class="box1">
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
</html>

看下效果：

github上传了代码：

https://github.com/soyoungboy/htmlCssStudy

见lesson22和lesson,在浏览器里面运行下看看

前端学习 -- Css -- overflow

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：可选值：visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。

内联元素不能设置width和height；设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；水平外边距内联元素支持水平方向的外边距；内联元素不支持垂直外边距；为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。前端学习 -- Css -- 行间距

在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。使用line-height来设置行高。行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单，在HTML也可以创建列表，在网页中一共有三种列表： 1.无序列表 2.有序列表 3.定义列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项，一个li就是一个列表项...

em和strong - 这两个标签都表示一个强调的内容， em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容，比em更强烈，默认使用粗体显示 DOCTYPE html> [重拾CSS]一道面试题来看伪元素、包含块和高度坍塌

前几天某个群友在群里问了一道面试题，就是关于一个自适应的正方形布局的困惑，先贴上代码。我其实很长一段时间没有写 CSS 了，对于里面的一些细节也比较模糊了，因此决定重拾 CSS，来重新捋一捋这题目中的一些知识点。