11.vscode

最新推荐文章于 2023-08-04 18:34:45 发布

故事予你

最新推荐文章于 2023-08-04 18:34:45 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/weixin_55101030/article/details/117406386

版权

2.元素的显示模式

2.1什么是元素的显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如

自己占一行,比如一行可以放多个 .
HTML元素-般分为块元素和行内元素两种类型。

2.2块元素

常见的块元素有<h1>~<h6>. <p>. <div>. <ul>、 <ol>. <li>等 ,其中<div>标签是最典型的块元素。
块级元素的特点:
①比较霸道，自己独占-行。
②高度,宽度、外边距以及内边距都可以控制。
③宽度默认是容器(父级宽度)的100%。
④是一个容器及盒子,里面可以放行内或者块级元素。
注意:
●文字类的元素内不能使用块级元素
●<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
●同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

示例

   <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>


<body>
    <div>比较霸道，独占一行</div>瑟瑟发抖
    <p>
        <div>这里有问题</div>
    </p>

2.3行内元素

常见的行内元素有<a>、<strong>、 <b>、 <em>、 <i>、 <del>、 <s>. <ins>、 <u>、 <span>等 ,其中
<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
①相邻行内元素在一行上, 一行可以显示多个。
②高、宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注意:
●链接里面不能再放链接
●特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

示例

   <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <span>pink老师你怎么穿着苹如的衣服了</span><strong>苹如的衣服</strong>
    <span>pink老师</span><strong>苹如的衣服</strong>
    <a href="http"></a>

2.4行内块元素

在行内元素中有几个特殊的标签一<img/>、 <input/>. <td> ,它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝随。一-行可以显示多个 (行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③高度,行高、外边距以及内边距都可以控制(块级元素特点)。

示例

    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>

2.5元素显示模式总结

元素模式                               元素排列              设置样式                 默认宽度                  包含
块级元素            一行只能放一个块级元素    可以设置宽度高度    容器的100%        容器级可以包含任何标签
行内元素      一行可以放多个行内         不可以直接设置宽度高度      它本身内容的宽度   容纳文本或则其他行内元素
行内块元元素     一行放多个行内块元素       可以设置宽度和高度       它本身内容的宽度

2.6元素的显示模式转换

转换为块元素: display（显示）:block;（块）
转换为行内元素: display：inline;

转换为行内块: display: inline-block;

示例

 <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素转换为块级元素 */
            display: block;
        }


        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把div块级元素转换为行内元素 */
            display: inline;
        }


        span {
            width: 300px;
            height: 40px;
            background-color: skyblue;
            display: inline-block;

        }
    </style>
</head>


<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内块元素转换行内元素</span>
    <span>行内块元素转换行内元素</span>
</body>

2.6 Snipaste工具

Snipaste是-一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上.
常用快捷方式:

F1可以截图.同时测量大小，设置箭头书写文字等
F3 在桌面置项显示
点击图片alt可以取色(按下shift可以切换取色模式)
4.按下esc 取消图片显示

案例

   <style>
        /* 1.把a转换为块级元素  */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }


        /* 2.鼠标经过链接变为背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </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>

2.7单行文字垂直居中

line-height: 20px;

CSS没有给我们提供文字垂直居中的代码.这里我们可以使用一个小技巧来实现.
解决方案:让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

2.8单行文字垂直居中的原理

简单理解:行高的上空隙和”下空隙把文字挤到中间了.是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度，则文字偏下

故事予你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
11.vscode

2.元素的显示模式2.1什么是元素的显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个.HTML元素-般分为块元素和行内元素两种类型。2.2块元素常见的块元素有<h1>~<h6>. <p>. <div>. <ul>、 <ol>. <li>等 ,其中<div>标签是最典
复制链接

扫一扫