css 元素类型及转换

最新推荐文章于 2024-07-05 17:31:40 发布

原创最新推荐文章于 2024-07-05 17:31:40 发布 · 488 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

css 专栏收录该内容

7 篇文章

订阅专栏

一、元素类型

1、块状元素

独占一行，自上而下的排列。
可以设置宽高。不设置宽高时，宽度默认显示占满父元素的宽度，高度由内容撑开。默认值auto并不意味着宽度100%。
块元素会严格按照盒子模型的显示规则，正确的显示marign，padding，border等属性。
一般会作为布局容器使用，可以容纳其他的块元素或者行内元素
常见的块元素：div，p， h1~h6，ul，ol，dl等。

2、行内元素

从左至右依次排列，只有遇到br标签和元素边界才会换行。
不能设置宽高，只能靠内容撑开。
垂直方向占位受影响，如margin-top/bottom，padding-top/bottom，border-top/bottom都不显示。
行内元素与行内元素（尖括号）之间的换行符，会让两个标签之间出现一个4px的留白，一般情况下我们都要去除。
常见的行内元素：a，span，i，em，del，s，ins，sup，sub等。

3、行内块元素

行内块元素既有块元素的性值，又结合行内元素的性值，使用较为方便，我称之为，留有空隙且可以横排显示的盒子。

从左向右依次排列，只有遇到br标签或者元素边界才会换行。
可以设置宽度与高度，不设置的时候宽度与高度靠内容撑开。
块元素会严格按照盒子模型的显示规则，正确的显示marign，padding，border等属性。
行内块元素与行内元素有一样的情况，会因为标签之间的换行符出现4px的留白。
常见的行内块元素：td，input，button，textarea，select等。
img是一个比较特殊的标签，虽然能够设置宽度与高度，但是类型却是为行内类型，我们把img称为替换元素（置换元素）。

二、元素类型的转换

display：转换元素类型。block块元素，inline行内元素，inline-block行内块元素，none不占为隐藏元素。

鼠标移入显示隐藏元素：

<head>
    <style>
        .box1{
            width:100px;
            background-color: pink;
        }
        .box2{
            width:100%;
            height:100px;
            background-color: yellowgreen;
            display: none;
        }
        .box1:hover .box2{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">请移入鼠标
        <div class="box2"></div>
    </div>    
</body>