元素显示模式及内容居中

最新推荐文章于 2024-07-24 20:42:50 发布

拜拜雪公主zz

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量97

点赞数

分类专栏：前端css笔记文章标签： css

本文链接：https://blog.csdn.net/qq_46152483/article/details/119212731

版权

前端css笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

元素显示模式

在这里插入图片描述

什么是元素显示模式?

元素显示模式就是元素（标签）以什么方式进行显示。元素一般分为行内和块级

什么是块级元素？

标签独占一行
宽度，高度，外边距可以控制
宽度默认是父容器的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，<p>里面不能放div
<h1>~<h6>都是文字类块级标签，里面也不能放其他块级元素

3.什么是行内元素？

相邻行内元素在同一行显示，一行可以显示多个
宽高的设置是无效的
默认宽度就是它本身的宽度
行内元素只能容纳文本或其他行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<ins>,<u>,<span>,<span>是最常见的行内元素，有的抵挡也将行内元素称为内联元素。

什么是行内块元素？

<img>,<input>,<td> 它们同时具有块元素和行内元素的特点

和相邻元素在一行显示，但是中间会有空隙，一行可以显示多个
默认宽度就是它本身的宽度
行高，高度，内外边距都可以控制

模式转换

转换为块元素：display：block
装换为行内元素：display：inline
转换为行内块：display：inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         span {
            width: 400px;
            height: 60px;
            background-color: lightyellow;
            display: block;
        }
         a {
             width: 300px;
             height: 60px;
             background-color: skyblue;
             display: block;
         }
         div{
             width: 300px;
             height: 60px;
             background-color: pink;
             display: inline;
         }
    </style>
</head>
<body>

<span>我是span行内标签，我被转换为块级标签了</span>
<br>
<a href="#">我是行内，我被转换为块级了</a>
<a href="#">我是行内，我被转换为块级了</a>
<div>div块级是独占一行的 但是我被转为行内了</div>
<div>div块级是独占一行的 但是我被转为行内了</div>
<div>div块级是独占一行的 但是我被转为行内了</div>

</body>
</html>
<!--display： block
display:  online
display:  online-block-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: url(../photo/mm/热巴2.jpg);
            background-position: center -200px;
            background-repeat: repeat;
            background-attachment: scroll;

        }
        a {
            display: block;
            text-decoration: none;
            width: 170px;
            height: 60px;
            background-color: #535758;
            color: white;
            /*text-indent: 2em;  原来的做法  */
            /* 学习了padding之后的做法  增加了内边距 盒子也会变大，
            这个例子我只增加了左边距，所以盒子的宽度减去30px 就可以了*/
            padding-left:30px;
            line-height: 60px;
            background: rgba(0, 0,0 ,0.4);
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>

文字图片居中或者元素居中

块级元素文字水平居中：text-align：center
这个属性有继承性，给父元素设置了之后子元素也会执行。
块级元素自身水平居中（确定宽度）：margin：0 auto
会使块级元素在父元素中上下左右都居中。如果只要水平居中只设置margin左右auto即可
块级元素自身水平居中（不确定宽度）：因为块级元素自身独占一行，宽度就是浏览器窗口的宽度，不用设置水平居中。

若是此时对块中的内容进行居中的话：如果块元素的子元素也为块元素，就对子元素使用margin auto一类的方式就好。
如果块级元素的子元素为行内元素，就用我们一开始介绍的text-align也就可以解决;
对于子元素为块元素的，也可以用display设置为inline然后再用text-align

块级元素中的文字图片垂直居中（高度确定的）：height：50px;line-height:50px
块元素的高度等于行高就行
块级元素中的文字图片垂直居中（高度不确定的）：padding
块高度不确定，那么它的高度就取决与里面内容的高度，即文字或者图片会撑开盒子的大小。如果希望块大一些，就设置上下内边距一样大，就可以垂直居中了。
补充介绍行高：

行高 = 上间距 + 文本高度 + 下间距

拜拜雪公主zz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素显示模式及内容居中

元素显示模式什么是元素显示模式?元素显示模式就是元素（标签）以什么方式进行显示。元素一般分为行内和块级什么是块级元素？标签独占一行宽度，高度，外边距可以控制宽度默认是父容器的100%是一个容器及盒子，里面可以放行内或者块级元素注意：文字类的元素内不能使用块级元素<p>标签主要用于存放文字，<p>里面不能放div<h1>~<h6>都是文字类块级标签，里面也不能放其他块级元素3.什么是行内元素？相邻行内元素
复制链接

扫一扫