当前位置:首页 » php学习笔记 » css-元素的显示属性

css-元素的显示属性

原创 stpevenchow 28°c 2019年10月07日 23:46 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

元素的显示属性
    display
        none:不显示
        block:块元素
        inline:行内元素/内联元素属性
        inline-block:行内块元素属性
    元素的嵌套
        1、行内元素/内联元素只能嵌套内联元素,不能嵌套块元素
        2、块元素可以嵌套块元素或者内联元素,但是p标签,不能嵌套块元素    
<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .span1{
                    background: red;给父级span添加背景颜色样式效果
                }
                .div1{
                    background: red;
                }
                .span2{
                    background: red;
                    width: 200px;
                    height: 200px;
                }
                .div3>textarea{
                    width: 200px;
                    height: 200px;
                    vertical-align: top;
                    resize: none;消除右下角的拖拽
                }
                .div4{
                    width: 200px;
                    height: 200px;
                    border: 1px solid red;
                    /* 改变display属性,设定为行内块元素inline-block; */
                    display: inline-block;
                    vertical-align: top;

                }
            </style>
        </head>

        <body>
            <!-- 元素属性
            1、内联元素可以嵌套内联元素-->    
            <span class="span1">
                北
                <span>京上</span>
                海
            </span>
            <!-- 京上也有背景颜色,证明span北海为span京上的子级元素span嵌套span北海成功 -->
            <br>
            <!-- 2、内联元素不能嵌套块元素 -->    
            <span class="span1">
                北
                <div>京上</div>
                海
            </span>    
            <!-- 父级span当中有块元素div,北海父级的背景颜色,div京上并没有继承,说明内联元素嵌套块元素不成功 -->
            <!-- 3,块元素可以嵌套行内元素以及块元素     -->
            <div class="div1">
                北
                <span>京上</span>
                海
            </div>
            <br>
            <div class="div1">
                北
                <div>京上</div>
                海
            </div>
            <p class="div1">
                北
                <div>京上</div>
                海
            </p>
            <!-- 嵌套的块元素以及嵌套标签之后的内容,都没有背景颜色证明都不再是p标签的一部分 -->
            <!-- p标签,段落标签垂直方向有上下间距p标签之内,只接受br换行,如果是强行插入块元素,会认为之后的内容都不在是段落内容 -->        
            <!-- inline-block 行内块元素
            显示在一行啊之内的,具有块元素特点的元素
            -->    
            <!-- 内联元素与块元素相比,内联元素不支持css的width和height属性 -->    
            <span class="span2">北京</span>    
            <div class="span2">上海</div>
            <!-- 总结:
                内联元素与块元素的区别
                1、内联元素可以显示在一行之内,块元素要独占一行
                2、内联元素与块元素嵌套关系不同
                3、内联元素有些css属性不支持
                width  height
            行内块元素,显示在一行之内的,并且具有宽高属性的元素,代表标签:img input textarea button -->
            <!-- 行内块元素使用时必须要添加垂直对齐方式属性    
            垂直对齐方式的属性,必须要写在行内块元素本身上,不能写在父级上
            vertical-align
                            top 上对齐
                            bottom 下对齐
                            middle 剧中对齐
                对齐方式会影响行内块元素同一行文字内容的显示方式     -->
            <!-- 垂直对齐方式与textarea的配合使用 -->    
            <!-- textarea同行的文字默认出现在下方位置,实际项目中,一般是剧中位置或者上方位置,需要垂直方式来设定 -->
            <div class="div3">
                留言:
                <textarea></textarea>
            </div>
            <!-- 行内块元素的对齐效果 -->    
            <!-- 用垂直方式设定北京你好 -->
            <div class="div4">北京你好</div>
            <div class="div4"></div>
            <div class="div4"></div>
            <div class="div4"></div>
            <!-- 总结:
                行内块元素的默认对齐效果,非常混乱,高度不同,有无内容,内容是一行还是多行,显示的对齐效果都不同,使用行内块元素时,一定要项目需求添加垂直对齐方式 -->
        </body>
        </html>       

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/129.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :