web(关于行内元素和块级元素)

最新推荐文章于 2024-04-16 07:06:07 发布

奢คิดถึง

最新推荐文章于 2024-04-16 07:06:07 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/pet_ch/article/details/103283187

版权

1. 列举行内元素与块级元素

行内元素：

a(锚点) 、 b(粗体) 、big(大字体)、em(强调) 、 i(斜体) 、input(输入框)
label(提示标签)、select(列表选择) 、 small(小字体)、span(常用内联容器) 、
strong(粗体强调)、sub(下标) 、sup(上标) 、textarea(多行文本输入框) 、u(下划线)
img(图片，虽是内联元素，但是可以设置宽高)
块级元素：

address(地址)、div(块级容器)、p(段落)、table(表格)、fieldset(控制组)、form(交互表单)、
dl(定义列表)、ul(无序列表)、ol(有序列表)、h1~h6(标题)、hr(水平分割线)、pre(格式化文本)

2.关于行内元素设置宽高

行内元素在文档流中无法设置宽高；
而当行内元素设置了绝对定位或者浮动时，行内元素会变成块级元素，可以设置宽高。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            width:200px;
            height:150px;
            border:solid 1px red;
            text-decoration: none;
        }
       .a2{
           display: block;   //将a2转换为块级元素
       }
        p{
            width:100px;
            height:50px;
            border:solid 1px red;
        }
    </style>
</head>
<body>
<a href="" class="a1">我是行内元素</a>
<a href="" class="a2">我是转换为block后的行内元素</a>
<p>我是块级元素</p>
</body>
</html>

测试结果：
代码中为a1,a2均设置了宽高，a1由于是行内元素宽高由其内容决定，所设置的宽高没有作用，a2由于设置成了块级元素，显示出了设置的宽高。

3.让浮动的div垂直居中的方法：

方法一：根据所需距离，使用margin-top解决；.
方法二：将当前浮动的div的定位方式设置为relative,根据距离用top的值去居中。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            height:200px;
            width:200px;
            border:solid 1px red;
        }
       .box>div{
           border:solid 1px red;
           height:100px;
           width:100px;
           float:right;
            /* margin:auto 0;   */       /*无效的居中*/
          /* margin-top:25%;*/      /*方法一居中*/
           position: relative;           /*方法二居中*/
           top:25%;
       }
    </style>
</head>
<body>
<div class="box">
<div >我是浮动的div</div>
</div>
</body>
</html>

测试结果：
在这里插入图片描述
4.vertical-align属性

作用对象为行内元素，即只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
**行框：高度等于本行内所有元素中行高最大的值**
**行内框：一个元素内容区域的边界**
语法：vertical-align：值；

常用值	描述
top	将元素的行内框的顶端与行框的顶端对齐
bottom	将元素的行内框的顶端与行框的底端对齐
middle	将元素的行内框的中线与基准元素中文本行的中线对齐

奢คิดถึง

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web(关于行内元素和块级元素)

1. 列举行内元素与块级元素行内元素：a(锚点) 、 b(粗体) 、big(大字体)、em(强调) 、 i(斜体) 、input(输入框)label(提示标签)、select(列表选择) 、 small(小字体)、span(常用内联容器) 、strong(粗体强调)、sub(下标) 、sup(上标) 、textarea(多行文本输入框) 、u(下划线)img(图片，虽是内联元素，...
复制链接

扫一扫