block与inline 元素

最新推荐文章于 2022-07-18 10:06:48 发布

Denao

最新推荐文章于 2022-07-18 10:06:48 发布

阅读量290

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/denao/article/details/77604414

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在看网页的布局，类型很多，

table布局
div+css布局
flex（弹性布局）
……

哈哈，刚学到经典的div+css布局，block与inline是一个必须区分的知识点。

在正常模式下：

block元素

总是在新行上开始；
height, line-height, margin和padding都可控制；
width缺省是它的容器的100%，除非设定一个宽度，但不影响他在新行显示；
它可以容纳内联元素和其他块元素，每个元素有每个元素的特点。

在底版（请允许我这么定义）上排版时，不可通过调整盒子的大小来达到并排显示的目的，调整盒子大小的方法包括设置padding、margin等策略实现。

inline元素

和其他元素都在一行上；
width就是它的文字或图片的宽度，不可设置；height不可设置，字体大小取决于font-size；
**line-height可以设置, 调整行的高度；
对于box model，margin和padding 左右可以设置，但上下距离不可设置；border可以设置宽度和颜色；**
内联元素只能容纳文本或者其他内联元素，很严格的规定，请务必遵守。

可以通过设置css格式dispaly来改变块与行的属性，值为inline和block。

底版下的测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>
            行元素和块元素的互换
        </title>
        <style type="text/css" >
                div,span
                {
                    border-width:1px;
                    border-color:red;
                    border-style:solid;
                    margin:2px;
                }

        </style>
    </head>
    <body>
        <div>
            div1
        </div>
        <div>  
            div2
        </div> 
        <span>
            span1
        </span>
        <span>
            span2
        </span> 
        <br> 
        <div style="display:inline">
            div3
        </div> 
        <div style="display:inline">
            div4
        </div> 
        <span style="display:block">
            span3
        </span> 
        <span style="display:block">
            span4
        </span>
    </body>
</html>

对inline下面属性的测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
        <title>
            相邻元素的距离
        </title>
        <style type="text/css" >
                div{
                    margin: 2px;
                }
                span
                {
                    border:5px solid red;
                    margin:10px;
                    width: 20px;
                    line-height:3em;
                    font-size: 10px;
                }
                #id1
                {
                    border:5px solid red;
                    margin-bottom:10px;
                }
                #id2
                {
                    border:5px solid red;
                    margin-top:15px;
                }

        </style>
    </head>
    <body>
        <div><span>
            span1
        </span>
        <span>
            span2
        </span> 
    </div>
        <div id="id1">
            div1
        </div>
        <div id="id2">
            div2
        </div>
    </body>
</html>