网页高级知识点（一）

2018-06-06 本文已影响0人 Lrrrrtt

文字绕图

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

解决方法：
A.根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
B.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
C.可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个div的原理一样，可以达到一个相同的效果，
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

网页导航条的制作代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航条</title>
        <style type="text/css">
            /*清除默认样式*/
            *{
                margin: 0;
                padding: 0;
            }
            /*设置ul*/
            .nav{
                /*去除项目符号*/
                list-style: none;
                /*为ul设置一个背景颜色*/       
                background-color: #6495ed;
                /*设置一个宽度*/
                /*在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/
                width: 1000px;
                /*设置居中*/
                margin: 50px auto;
                /*解决高度塌陷*/
                overflow: hidden;
            }
            /*设置li*/
            .nav li{
                /*设置li向左浮动*/
                float: left;
                width: 25%;
            }
            .nav a{
                /*将a转换为块元素*/
                display: block;
                /*为a指定一个宽度*/
                width: 100%;
                /*设置文字居中*/
                text-align: center;
                /*设置一个上下内边距*/
                padding: 5px 0;
                /*去除下划线*/
                text-decoration: none;
                /*设置字体颜色*/
                color: white;
                /*设置加粗*/
                font-weight: bold;
           }
            /*设置a的鼠标移入的效果*/
           .nav a:hover{
                background-color: #cc0000;
            }
        </style>
    </head>
    <body>
        <!-- 创建导航条的结构 -->
        <ul class="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">联系</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </body>
    </html>

清除浮动(clear)

语句	语意
:none;	默认值，不清除浮动
:left;	清除左侧浮动元素对当前元素的影响
:right;	清除右侧浮动元素对当前元素的影响
:both;	清除两侧浮动元素对当前元素的影响(清除对他影响最大的那个元素浮动)

相对定位(position: relative;)

语句	语意
left：	元素相对于其定位位置的左侧偏移量
right：	元素相对于其定位位置的右侧偏移量
top：	元素相对于其定位位置的上边的偏移量
bottom：	元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。
特点：
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联

绝对定位(position: absolute;)

语句	语意
left：	元素相对于其定位位置的左侧偏移量
right：	元素相对于其定位位置的右侧偏移量
top：	元素相对于其定位位置的上边的偏移量
bottom：	元素相对于其定位位置下边的偏移量

特点：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质：
内联元素变成块元素，
块元素的宽度和高度默认都被内容撑开