解决高度塌陷、定位问题

高度塌陷

父元素包含的子元素,子元素多高。父亲没指定,默认子元素高。
子元素设置浮动以后,子元素脱离文档流,此时子元素无法撑起父元素的高度,导致父元素的高度塌陷
我们可以将父元素的高度写死,避免塌陷
元素重叠,子父一起动。

解决高度塌陷

面试 开启BFC
特点
1 设置元素浮动 缺点宽度丢失 不推荐
2设置元素绝对定位 不推荐和1一样
3 设置元素为inline-block 缺点宽度丢失 也不推荐
4将元素的overflow设置为一个非visible的值 推荐


ie6以下不执行BFC。
(但是还有背的属性 haslayout(类似BFC))
(只是在ie里面支持)zoom:1;后面代表放大倍数。1是默认不放大。
所以默认这二个同时写。
ie6设置宽度了,在服务器端就不会踏。

清除浮动

     .box1{
         width: 100px;
         height: 100px;
         background-color: yellow;
         /*设置box1向左浮动*/
         float: left;
     }
     .box2{
         width: 200px;
         height: 200px;
         background-color: yellowgreen;
         

box1影响box2上移,为了不影响浮动对当前元素产生的影响。
clear来完成功能
可选值:
none,默认值,不清除浮动
left,清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both,清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动

解决高度塌陷

可以直接在高度塌陷的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的

.clear{
            clear: both;
        }

可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动最推荐
after内联元素。伪类

.clearfix:after{
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }
        /*在ie6中不支持after伪类处理*/
        .clearfix{
            zoom: 1;
        }

相对定位

相对定位元素,位置还有,不脱离文档流。所以块还是快,内联还是内联。position:relative。会提升一个层级。
相对自身的位置定位。

left: 100px;
top: 200px;

绝对定位。

position:absolute。
脱离文档流。
相对于离他最近开启定位的祖先元素。都没开就是浏览器左上角。
会提升一个层级。
内联变块,宽高有效,块变被内容撑开。
父元素开相对
子元素相对于父元素开绝对。
relative(必须有)

固定定位

static:默认值,元素没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位(也是绝对定位的一种)

固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样
不同的是:
固定定位永远相对00
当滚动条动,他也不走。
fixed

homework3.png

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12px/1 字体
        }
        .outer{
            width: 300px ;
            /*height:471px ;*/
            /*background-color: #bfa;*/
            margin: 0 auto;
        }
        .title{
            border-top: 2px #019e8b solid;
            height:36px ;
            background-color: #f5f5f5;  
            line-height: 36px;
            padding: 0px 22px 0px 16px;
        }

        .title a{
            float: right;
            color: red
        }
        
        .title h3{
            font: 16px/36px '微软雅黑'
            /*改掉默认的行高*/
        }

        .content h3{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
        .content{
            border: 1px solid #deddd9;
            /*高考内容撑开*/
            padding: 0px 28px 0px 20px
        }
        .content li{
            margin-bottom: 15px;
        }

        .content a{
            color: black;
            text-decoration: none;
            font-size:12px; 
        }

        .content a:hover{
            color: red;
            text-decoration:underline;
        }

        .content ul{
            list-style: none;
            border-bottom: 1px dashed #deddd9;
        }

        .content .red-font{
            color: red;
            font-weight: bold;
        }



        .content .right{
            float: right;
        }

        .content .no-border{
            border: none;
        }





    </style>
</head>
<body>
    
    <div class="outer">
        <div class="title">
            <a href="#">18年面授开班计划</a>
            <h3>近期开班</h3>
            
        </div>
        <div class="content">
            <h3><a href="#">人工智能+python-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间: <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span class="red-font">无座名额爆满</span></a>
                    <a href="#">开班时间: <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间: <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
            <ul class="no-border">
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间: <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间: <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
        </div>
    </div>





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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,559评论 5 15
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 907评论 0 4
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,344评论 2 66
  • 第十一天 孩子啊,你是不是每天都想一遍妈妈,每天都念一遍爸爸。 孩子啊,晚上睡到被窝里你会偷偷抹眼泪儿吗? 孩子啊...
    一汐一阅读 196评论 0 0