元素类型、元素隐藏

菠萝啊菠萝蜜

已于 2023-09-03 11:05:51 修改

阅读量1.1k

点赞数

分类专栏： HTML、CSS 文章标签： css css3 前端

于 2021-05-06 20:01:54 首次发布

梦开始时间2021/03/06

本文链接：https://blog.csdn.net/yuy20151225/article/details/116460307

版权

HTML、CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

CSS元素类型

1.块状元素 block

2.行内元素 inline（内联元素）

3.行内块元素(内联块元素) inline-block

元素的相互转换

元素隐藏

inline-block ( 行内块元素 )

设置一个元素在一个容器中垂直水平居中

置换元素(可替换元素)

CSS元素类型

1.块状元素 block

特点：

1.独占一行，自上而下排列；

2.可以直接设置宽度、高度、padding、margin值；

3.不设置宽度; 默认宽度是父元素宽度的100%；

4.块元素是一个容器，里面可以放其他块元素和行内元素/行内块元素；

如：div, dl, dt, dd, ol, ul, (h1-h6), p, form, hr, table,tr ,td,等；

文本类块元素只能放其他块元素，不能放其他元素；如p，h标签, 可以放行内/行内块元素。如 p里放a标签 <p> <a></p>

2.行内元素 inline（内联元素）

特点：

一行内显示多个；一行内的元素之间,默认有间隙;
不能直接设置宽度，高度，padding，margin值(只能显示左右值,上下值不能显示)；
默认的宽度是内容的宽度；
行内元素只能放行内元素或文本；

如：a, span, i, em, strong, b等

3.行内块元素(内联块元素) inline-block

特点:

一行内显示多个;一行内的元素之间,默认有间隙;
可以直接设置宽度,高度,padding,margin值;
默认宽度是内容的宽度;

如:<img>、<input> <texarear>标签就是行内块元素;

元素的相互转换

转换成块元素:display:block;

转换成行内元素:display:inline;

转换成行内块元素:display:inline-block;

元素隐藏

display

display:none;不占位隐藏；

display：block；转换成块元素，和元素显示；

visibility

visibility:hidden；占位隐藏

visibility：visible；元素显示

文本溢出

overflow（容器溢出属性）

visible:默认值，不隐藏，会呈现在元素框之外；
hidden：内容会被修剪，溢出隐藏,并且多余内容是不可见的；
scroll：内容会被修剪，溢出隐藏,但是元素会显示滚动条;
auto：如果内容被修剪，溢出隐藏,溢出时隐藏并且显示滚动条,不溢出不显示滚动条;
inherit：从父元素继承overflow属性的值。(inherit:继承)

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域。（占位隐藏）
display:none属性会使这个对象彻底消失不显示，也不再占用位置。（不占位隐藏）

display:list-item;此元素会作为列表显示。

inline-block ( 行内块元素 )

vertical-align：top、middle、bottom、baseline（默认基线对齐）（只支持inline-block元素类型）

解决问题, 嵌套img元素,图片下有3px空白; (图片默认和文字的基线对齐)

解决方法一: 给img元素; vertical-align: top,middle,bottom; 不为baseline(默认基线对齐)

解决方法二: 给img元素 ;设置 display:block;

设置一个元素在一个容器中垂直水平居中

五个条件：

1：给当前元素在结构上添加一个弟弟元素（必须和当前元素写在一行上）。

2：给第弟元素添加height与父元素同高;

3：给当前元素和弟弟元素都添加display：inline-block;

4：给当前元素和弟弟元素添加vertical-align：middle。

5：给父元素添加text-align：center。

 <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 100px auto;
            text-align: center;
        }

        .box2 {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: pink;
            vertical-align: middle;
        }

        .box3 {
            display: inline-block;
            height: 500px;
            vertical-align: middle;
        }
    </style>
<body>
    
    <div class="box1">
        <span class="box2"></span>
        <span class="box3"></span>
    </div>
</body>

置换元素(可替换元素)

其性质等同于设置了 display: inline-block; 的元素

就是行内块元素,可以直接设置宽度高度.

置换元素(可替换元素)：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。

如:img、input、textarea、select

菠萝啊菠萝蜜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素类型、元素隐藏

如：div, dl, dt, dd, ol, ul, (h1-h6), p, form, hr, table,tr ,td,等；置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。置换元素(可替换元素)：浏览器根据元素的标签和属性，来决定元素的具体显示内容。3：给当前元素和弟弟元素都添加display：inline-block;4：给当前元素和弟弟元素添加vertical-align：middle。1：给当前元素在结构上添加一个弟弟元素（必须和当前元素写在一行上）。
复制链接

扫一扫

专栏目录