zoukankan      html  css  js  c++  java
  • css简单学习属性

      1:内联元素和块级元素

    1).块级元素,默认是独自占据一行的。比如是<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr />
    2).内联元素,默认是几个内联元素都可以在同一行上显示。比如是<a>、<span>等。
    2:内联元素可以变成块级元素,块级元素可以变成内联元素。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                background-color: aqua;
                /*变为内联元素*/
                display: inline;
            }
            span{
                background-color: brown;
                /*变为块级元素*/
                display: block;
            }
        </style>
    </head>
    <body>
    <div>div wowoowo</div>
    <div>div wowoowo</div>
    <span>span元素</span>
    <span>span元素</span>
    </body>
    </html>

    效果图

    3:  display: inline-block;和display: inline的区别

     div{
                background-color: aqua;
                /*变为内联元素可以设置背景颜色大小*/
                display: inline-block;
            }
    <!--------------------------------------------->
     div{
                background-color: aqua;
                /*变为内联元素设置背景颜色大小无效*/
                display: inline;
            }

     4: display: inline-table;属性

    table{
    /*在表格用才成为行内元素*/
    display: inline-table;
    border: solid 10px #00aaff;
    }
    5:overflow: auto;属性。它有5个可选值
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                /*隐藏多余部分*/
                overflow: auto;
                width: 300px;
                height: 150px;
                border: solid 1px orange;
            }
        </style>
    </head>
    <body>
    <div>
    <h1>位子</h1>
    <p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>
    <p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>
    <p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>
    <p>隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分隐藏多余部分1234567890</p>
    </div>
    </body>

    效果图

    如果没有overflow: auto;属性的效果图

    当然可以设置滑动方向

       /*设置滑动方向*/
        overflow-x: scroll;
    overflow-y: hidden;
    /*不让文字进行换行*/
    white-space: nowrap;
    
    
  • 相关阅读:
    showSoftInput不起作用
    GridView在PopWindow中OnItemClick不响应
    白盒测试范围
    Winform的ListBox的ValueMember和DisplayMember绑定的名称所属对象必须是Public的。
    谷歌浏览器安装adblock广告屏蔽插件
    php+curl上传文件
    win10我能ping通他人,但他人ping不同我
    自己的配置文件以及操作
    安装redis,执行make test时遇到You need tcl 8.5 or newer in order to run the Redis test
    安装redis时遇到zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录
  • 原文地址:https://www.cnblogs.com/kaiwen1/p/6780819.html
Copyright © 2011-2022 走看看