首页 > 代码库 > css简单学习属性

css简单学习属性

2024-09-17 23:11:11   246人阅读

  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;

 

 

 

css简单学习属性






























        

            
                
                  
                
                

                    联系

                    我们