07-display属性、浮动布局

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-05 14:31 被阅读4次

07-display属性、浮动布局
DIV+CSS布局3
CSS 布局与居中
CSS浮动的使用与清除
前端学习之定位
CSS的浮动以及清除浮动的5种方法
浮动
理解CSS中的浮动
3.css浮动
CSS 定位 (Positioning)

块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

支持全部的样式
如果没有设置宽度，默认的宽度为父级元素宽度100%
盒子占据一行，即使设置了宽度

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .box {
            width: 50%;
            background: gold;
            height: 200px;
        }

        .box2 {
            width: 50%;
            background: green;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">div元素</div>
    <p class="box2">p标签</p>
</body>
</html>

内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，他们在布局中的行为：

支持部分样式（不支持宽、高、margin上下、padding上下）
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素对齐方式

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 300px;
            border:1px solid #000;
            margin: 50px auto 0;
        }

        .box a {
            background-color: gold;
            /*width height 设置好无效*/
            width: 300px; 
            height: 200px;
            /*margin 上下设置无效*/
            margin: 30px 20px;
            /*padding 上下设置无效*/
            padding: 20px 30px;
        }

        .box2 {
            width: 500px;
            height: 100px;
            border:1px solid #000;
            margin: 50px auto 0;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="box">
        
        <a href="#">链接文字1</a>
        <a href="#">链接文字2</a>
        <a href="#">链接文字3</a>
        <a href="#">链接文字4</a>
        <a href="#">链接文字5</a>

    </div>

    <div class="box2">
        <a href="#">链接文字</a>
    </div>
</body>
</html>

解决元素之间间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 300px;
            border:1px solid #000;
            margin: 50px auto 0;
            font-size: 0;
        }

        .box a {
            background-color: gold;
            /*width height 设置好无效*/
            width: 300px; 
            height: 200px;
            /*margin 上下设置无效*/
            /*margin: 30px 20px;*/
            /*padding 上下设置无效*/
            padding: 0px 10px;
            font-size: 16px;
        }

        .box2 {
            width: 500px;
            height: 100px;
            border:1px solid #000;
            margin: 50px auto 0;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 解决换行会产生间隙的问题方案1：不换行 -->
        <!-- <a href="#">链接文字1</a><a href="#">链接文字2</a><a href="#">链接文字3</a><a href="#">链接文字4</a><a href="#">链接文字5</a> -->
        <!-- 方案2：设置font-size -->
        <a href="#">链接文字1</a>
        <a href="#">链接文字2</a>
        <a href="#">链接文字3</a>
        <a href="#">链接文字4</a>
        <a href="#">链接文字5</a>
    </div>

    <div class="box2">
        <a href="#">链接文字</a>
    </div>
</body>
</html>

内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性叫块元素或者内联元素转换成这种元素。他们在布局中表现的行为：

支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间隙
子元素是内联块元素，父元素可以使用text-align属性设置子元素水平对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用的比较多，所以我们经常把内联元素转换为块元素，少量转换为内联块，儿要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none元素隐藏且不占位置
2、block元素以块元素显示
3、inline元素以内联元素显示
4、inline-block元素以内联块元素显示

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 300px;
            border:1px solid #000;
            margin: 50px auto 0;
            font-size: 0;
        }

        .box a {
            background-color: gold;
            width: 100px; 
            height: 50px;
            padding: 10px 10px;
            font-size: 16px;
            /*转换行内元素为行内块元素*/
            display: inline-block;
            margin: 20px;
        }

        .box2 {
            width: 500px;
            height: 100px;
            border:1px solid #000;
            margin: 50px auto 0;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="box">
        <a href="#">链接文字1</a>
        <a href="#">链接文字2</a>
        <a href="#">链接文字3</a>
        <a href="#">链接文字4</a>
        <a href="#">链接文字5</a>
    </div>

    <div class="box2">
        <a href="#">链接文字</a>
    </div>
</body>
</html>

内联块元素demo

<!DOCTYPE html>
<html>
<head>
    <title>内联块元素demo</title>

    <style type="text/css">
        .menu {
            width: 694px;
            height: 50px;
            /*background-color: cyan;*/
            margin: 50px auto 0;
            font-size: 0;
        }

        .menu a {
            width: 98px;
            height: 48px;
            border: 1px solid gold;
            display: inline-block;
            font-size: 16px;
            margin-left: -1px;
            text-align: center;
            line-height: 48px;
            text-decoration: none;
            color: pink;
            font-family: 'Microsoft Yahei'
            background-color: #fff;
        }

        .menu a:hover {
            background-color: gold;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="menu">
        <a href="#">首页</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
    </div>

</body>
</html>

display使用

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style type="text/css">
        body {
            font-size: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
            display: inline-block;
            /*font-size: 16px;*/
            margin: 20px;
        }

        .con {
            width: 200px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: gold;
            font-size: 16px;
            display: none;
        }

        .con h3 {
            font-size: 30px;
        }

        .con:hover .box2 {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>

    <br>
    <br>

    <div class="con">
        <h3>文字标题</h3>
        <div class="box2">文字标题的说明</div>
    </div>

</body>
</html>

浮动特性

1、浮动元素有左浮动（float：left）和右浮动（float：right）两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转换为行内块元素（此时不会有行内块元素间隙的问题）
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动元素，形成文字饶图的效果
6、父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并

<!DOCTYPE html>
<html>
<head>
    <title>菜单</title>
    <style type="text/css">
        .menu {
            width: 694px;
            height: 50px;
            /*background-color: cyan;*/
            /*去掉小圆点*/
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
        }

        .menu li {
            width: 98px;
            height: 48px;
            border: 1px solid gold;
            margin-left: -1px;
            background-color: #fff;
            /*display: inline-block;*/
            float: left;
        }

        .menu li a {
            /*background-color: gold;*/
            display: block;
            width: 98px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            color: pink;
            text-decoration: none;
            font-size: 16px;
            font-family: "Microsoft Yahei"
        }

        .menu li a:hover {
            background-color: gold;
            color: #fff;
        }
    </style>
</head>
<body>

    <ul class="menu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
    </ul>

</body>
</html>

浮动demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">     
        .con{
            width:400px;
            height:80px;
            border:1px solid gold;
            margin:50px auto 0
        }
        .con div{
            width:60px;
            height:60px;
            margin:10px;

        }
        .box01{
            background-color:green;
            float:left;
        }
        .box02{
            background-color:pink;
            float:right
        }

        .con2{
            width:400px;
            height:400px;
            border:1px solid #000;
            margin:50px auto 0;
        }

        .con2 div{
            width:100px;
            height:100px;
            background-color:gold;
            margin:15px;
            float:left;
        }



    </style>
</head>
<body>
    <div class="con">       
        <div class="box01"></div>
        <div class="box02"></div>
    </div>

    <!-- .con2>div{$}*9 -->

    <div class="con2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>


</body>
</html>

浮动文字饶图demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字饶图</title>
    <style type="text/css">
        .con{
            width:450px;
            height:210px;
            border:1px solid #000;
            margin:50px auto 0;
        }

        .pic{
            width:80px;
            height:80px;
            background-color:gold;
            float:left;
            margin:10px;
        }

        .text{
            /* background-color:green; */
            height:130px;
            color:#666;
        }





    </style>
</head>
<body>
    <div class="con">
        <div class="pic"></div>     
        <div class="text">1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行</div>

    </div>
</body>
</html>

清除浮动

父级上增加overflow：hidden
在最后一个子元素的后面加一个空的div，给他样式属性clear：both（不推荐）
使用成熟的清除浮动样式类，clearfix

.clearfix:after,.clearfix:before{content:"",displya:table;}
.clearfix:after{clear:both}
.clearfix{zoom:1;}

清除浮动demo

<!DOCTYPE html>
<html>
<head>
    <title>清除浮动</title>
    <style type="text/css">
        .list {
            width: 210px;
            /*height: 400px;*/
            border: 1px solid #000;

            margin: 50px auto 0;
            list-style: none;
            padding: 0;
            /*清除浮动方法一：*/
            /*overflow: hidden;*/

        }

        .list li {
            width: 50px;
            height: 50px;
            background-color: gold;
            margin: 10px;
            float: left;
        }


        .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom:1;
        }

    </style>
</head>
<body>
    <ul class="list clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <!-- 清除浮动方法2： -->
        <!-- <div style="clear: both;"></div> -->

    </ul>

</body>
</html>

练习demo1

<!DOCTYPE html>
<html>
<head>
    <title>新闻</title>

    <style type="text/css">
        .news_title {
            width: 400px;
            height: 40px;
            border-bottom: 1px solid #ff8200;
            margin: 50px auto 0;
        }

        .news_title h3 {
            float: left;
            width: 80px;
            height: 40px;
            background-color: #ff8200;
            margin: 0;
            font-size: 16px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }

        .news_title a {
            float: right;
            text-decoration: none;
            color: #666;
            font: normal 14px/40px 'Microsoft Yahei';
        }

        .news_title a:hover {
            color: #ff8200;
        }
    </style>
</head>
<body>
    <div class="news_title">
        <h3>新闻列表</h3>
        <a href="#">更多&gt;</a>
    </div>

</body>
</html>

练习demo2 文字饶图

<!DOCTYPE html>
<html>
<head>
    <title>文字饶图</title>

    <style type="text/css">
        .box {
            width: 450px;
            height: 210px;
            border: 1px solid #000;
        }

        .box img {
            float: left;
            margin: 10px;
            margin-bottom: 0;
        }

        .box div {
            margin: 10px;
            font-size: 14px;
            line-height: 22px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/bg.jpg" alt="h5的标志">
        <div>
            1、浮动元素有左浮动（float：left）和右浮动（float：right）两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转换为行内块元素（此时不会有行内块元素间隙的问题）
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动元素，形成文字饶图的效果
6、父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
        </div>
    </div>

</body>
</html>

定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的后排列，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，position的设置项如下：

relative生成相对定位元素，元素所占据文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂流在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承position属性的值。

定位元素的偏移
定位元素还需要使用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。

定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。

<!DOCTYPE html>
<html>
<head>
    <title>postion</title>
    <style type="text/css">
        .con {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto 0;
            /*position: relative;*/
        }

        .box01, .box02 {
            width: 300px;
            height: 100px;
            margin: 10px;
        }

        .box01 {
            background-color: green;
            /*relative定位*/
            /*position: relative;*/

            /*absolute定位*/
            /*position: absolute;*/

            position: fixed;
            
            left: 50px;
            top: 50px;


        }

        .box02 {
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box01"></div>
        <div class="box02"></div>
    </div>

</body>
</html>

定位元素层级demo

<!DOCTYPE html>
<html>
<head>
    <title>positon</title>
    <style type="text/css">
        .con {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto 0;
            position: relative;
        }

        .con div {
            width: 200px;
            height: 200px;
            position: absolute;
        }

        .box01 {
            background-color: green;
            left: 20px;
            top: 20px;
            z-index: 10;
        }

        .box02 {
            background-color: yellow;
            left: 40px;
            top: 40px;
            z-index: 11;
        }

        .box03 {
            background-color: pink;
            left: 60px;
            top: 60px;
            z-index: 13;
        }

        .box04 {
            background-color: yellowgreen;
            left: 80px;
            top: 80px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
        <div class="box04"></div>
    </div>

</body>
</html>

练习demo1

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        .con {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 50px auto 0;
            position: relative;

            border-radius: 14px;
        }

        .box {
            width: 28px;
            height: 28px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 28px;
            position: absolute;
            right: -14px;
            top: -14px;

            border-radius: 14px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">5</div>
    </div>

</body>
</html>

定位实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .menu{
            height:80px;
            background-color:gold;
            position:fixed;
            width:960px;
            top:0px;
            left:50%;
            margin-left:-480px;
        }

        p{
            text-align:center;
        }

        .popup{
            width:500px;
            height:300px;
            border:1px solid #000;
            background-color:#fff;
            position:fixed;
            left:50%;
            margin-left:-251px;
            top:50%;
            margin-top:-151px;
            z-index:9999;
        }
        
        .popup h2{
            background-color:gold;
            margin:10px;
            height:40px;
        }

        .mask{
            position:fixed;
            width:100%;
            height:100%;
            background-color:#000;
            left:0;
            top:0;
            opacity:0.5;
            z-index:9998;
        }

        .pop_con{
            display:block;
        }



    </style>
</head>
<body>
    <div class="menu">菜单文字</div>
    
    <div class="pop_con">
        <div class="popup">
            <h2>弹框的标题</h2>  
        </div>
        <div class="mask"></div>
    </div>

    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>网页文字</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

07-display属性、浮动布局
块元素、内联元素、内联块元素元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。块元素块元素，也...
DIV+CSS布局3
布局相关属性：浮动属性——float:left right 清除浮动——clear:both 溢出处理——ov...
CSS 布局与居中
一、常见布局 1. 浮动布局可以通过盒模型的 float 属性实现浮动布局，使元素脱离文档流，浮动起来。（1）使...
CSS浮动的使用与清除
网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。认识浮动属性值： none(没有) ...
前端学习之定位
浮动原理: 1.文档流布局;元素自上而下，自左而右 2.浮动布局: (1)如果指定了float:属性，那么该元...
CSS的浮动以及清除浮动的5种方法
浮动是布局的时用到的一种技术，能够方便我们进行布局。浮动的设置： css属性float： left/right/n...
浮动
1.float 浮动样式主要用于对块元素的布局元素一旦浮动起来，就会脱离标准文档流 float属性设置浮动，属性...
理解CSS中的浮动
浮动（float）是CSS中一个重要的定位及布局属性，float 属性可以接受以下几个值： none ：元素不浮动...
3.css浮动
1.标准流(normal flow) 标准流，流式布局 2.浮动的本质 3.元素的浮动属性float 4.浮动特性...
CSS 定位 (Positioning)
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重...