web进阶之十:盒子模型3，内联元素的盒模型

2018-09-10 本文已影响10人甚得朕心

上来先问一个问题？

内联元素是盒模型吗？

答案是肯定的，在网页中“一切皆是盒子”。

内联元素

内联元素的盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素的盒模型</title>
    <style>
        span{
            background-color: yellow;
        }
        .s1{
            /*内联元素即行内元素，是不允许设置宽和高的*/
            /*width: 100px;
            height: 100px;*/
            /*但是内边距是可以设置的*/
            padding-left: 100px;
            padding-right: 100px;
            padding-top: 50px;
            /*padding-bottom: 50px;*/
            /*同时它的边框也是可以设置的*/
            border: 1px blue solid;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <span class="s1">我是一个span标签</span>
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>
    <div></div>
</body>
</html>

内联元素的修改

display

虽然我们不能为内联元素width、height、margin-top和margin-bottom，但是我们可以通过修改display来修改元素的性质，使其或者这种能力。

display的可选项
block：设置元素为块元素
inline：设置元素为行内元素
inline-block：设置元素为行内块元素（即它是行内元素，不占行，但是能对其设置）
none：隐藏元素（元素将在页面中完全消失）

visibility

visibility属性主要用于元素是否可见。

和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

可选项
visible：可见的
hidden：隐藏的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display和visibility</title>
    <style>
        a{
            /*可以设置成块元素。*/
            display: block;
            width: 50px;
            height: 50px;
            background-color:red;
        }
        div{
            /*这里可以把块元素转变成行内块元素
            <img>标签是行内块元素。即可以设置宽高，但是又不独占一行。
            */
            display: inline;
            width: 50px;
            height: 100px;
            background-color:blue;
        }
        /*display中的none和visibility中的hidden
        虽然都有隐藏元素的功能，但是，none就是直接隐藏，
        连位置也消失了，而hidden虽然隐藏了，但是位置却保留着。*/
    </style>
</head>
<body>
            <a href="https://www.baidu.com">百度</a>
            <div>我是一个块</div>
</body>
</html>

overflow

当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。

可以通过overflow来控制内容溢出的情况。

可选值：
visible：默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容

给父元素设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出</title>
    <style>
        .box1{
            width: 100px;
            height: 200px;
            background-color: red;
            /*自动设置滚动条，根据情况来定*/
            overflow: auto;
            /*添加滚动条，横向和纵向都有*/
            /*overflow: scroll;*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>
            1.形散神聚:"形散"既指题材广泛、写法多样，又指结构自由、不拘一格;"神聚"既指中心集中，又指有贯穿全文的线索。散文写人写事都只是表面现象，从根本上说写的是情感体验。情感体验就是"不散的神"，而人与事则是"散"的可有可无、可多可少的"形"。
            2."形散"主要是说散文取材十分广泛自由，不受时间和空间的限制;表现手法不拘一格:可以叙述事件的发展，可以描写人物形象，可以托物抒情，可以发表议论，而且作者可以根据内容需要自由调整、随意变化。"神不散"主要是从散文的立意方面说的，即散文所要表达的主题必须明确而集中，无论散文的内容多么广泛，表现手法多么灵活，无不为更好的表达主题服务。
            3.意境深邃:注重表现作者的生活感受，抒情性强，情感真挚。
            作者借助想象与联想，由此及彼，由浅入深，由实而虚的依次写来，可以融情于景、寄情于事、寓情于物、托物言志，表达作者的真情实感，实现物我的统一，展现出更深远的思想，使读者领会更深的道理。
            4.语言优美:所谓优美，就是指散文的语言清新明丽(也美丽)，生动活泼，富于音乐感，行文如涓涓流水，叮咚有声，如娓娓而谈，情真意切。所谓凝练，是说散文的语言简洁质朴，自然流畅，寥寥数语就可以描绘出生动的形象，勾勒出动人的场景，显示出深远的意境。散文力求写景如在眼前，写情沁人心脾。
        </p>
    </div>
</body>
</html>

这个代码出来的效果就是会有一个滚动条，这样既不会丢失文章内容，也不会溢出。

添加滚动条.JPG

有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。