昨天学习css元素显示模式

Ara~追着风跑 2022-01-15 08:08:48
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式</title>
    <style>
        /* 什么是元素显示模式
            作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页
            元素显示模式就是元素以什么样的方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>
            HTML元素一般分为块元素和行内元素两种类型 */
        /* 2.2.1块元素 */
        /* 常见的块元素有h1~h6,p,div,ul,ol,li 其中div标签是最典型的块元素
            块元素的特点1.比较霸道,独自占一行
                        2.高度,宽度,外边距以及内边距都可以控制
                        3,宽度默认是容器(父级宽度)的100%
                        4.是一个容器及盒子,里面可以放行内或者块元素 */
        /* 注意点
        1.文字类的元素不能使用块元素
        2.p标签主要用于存放文字,因此p标签里面不能放块元素,特别是不能放div
        3.h1~h6等都是文字类块级标签,里面不能放其他块级元素 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        /* 2.2.2行内元素 */
        /* 常见的行内元素有a,strong,b,em,i,del,s,ins,u,span等
        span标签是最典型的行内元素,有的地方也将行内元素称为内联元素。 */
        /* 行内元素的特点1.相邻行内元素再一行上,一行可以显示多花个
                        2.高,宽直接设置是无效的
                        3.默认宽度就是它本身内容的宽度
                        4.行内元素只能容纳文本或其他行内元素 */
        /* 注意1.链接里面不能再放链接
                2.特殊情况链接a里面可以放块级元素,但是给a转换一下块级模式最安全 */
        
        span {
            /* 改的宽度和高度是不是没有用运行一下试试看 */
            width: 500px;
            height: 500px;
            background-color: red;
        }
        /* 行 内 块 元素*/
        /* 再行内元素中有几个特殊的标签,img,input,td 它们同时具有块元素和行内元素的特点
        1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
        2.默认宽度就是它本身内容的宽度(这是上面讲的行内元素的特点)
        3.高度,行高,外边距以及内边距都可以控制(这是上面讲的块级元素的特点吧) */
    </style>
</head>

<body>
    <div>呀呵,你整挺霸道啊</div>
    <h5>我不服</h5>
    <!-- 下面一个错误示例 -->
    <p>
        <div>呀呵,竟然错了</div>
    </p>
    <span>小王你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
    <span>小王</span><strong>品如的衣服</strong><br>
    <input type="text">
    <input type="text">
</body>

</html>

 

...全文
7 回复 7 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
哪吒社区
加入

4.5w+

社区成员

我命由我不由天,来吧,和哪吒一起奋发图强,搬砖工逆袭Java架构师!
帖子事件
创建了帖子
2022-01-15 08:08
社区公告

【Java技能树】和哪吒一起,打卡100天,每天分享一个知识点,一起学习,一起进步,告别CRUD,搬砖工逆袭Java架构师,加油!

【积分榜】积分榜前十每周都有精彩礼包赠送!

【添加微信】备注1024,赠送Java学习路线思维导图