222wan

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

HTML——day11

css的元素的显示模式

元素的显示模式：指的是将标签分成不同的种类，我们可以更好的选择使网页得到更好的布局

分为块元素（div一行只要一个）和行内元素（span一行中好几个）

块元素：

h1 -h6     p   div  ul ol li 

特点：

1.独占一行

2.高度、宽度、外边距，内边距可以自己独立控制

3.默认宽度是父级宽度的100%

4.是一个容器里面可以放入其它行内元素或者块级元素

----------注意：文字类的标签不允许在放其他的块级元素了

------------------------------------------------------------------------

行内元素

a strong  b em i del s ins   u    span 等等

特点：

1.一行上可以显示多个行内元素

2.宽度和长度直接设置是无效的

3.默认长宽是本身的文字长度

4.不允许放块级元素，只能放文本和其他的行内元素

---------注意：链接里面不能放链接，

-------------特殊情况a里面可以放块级元素，但是需要转化一下块级模式比较安全。

---------------------------------------------------------------------------------------------------------------------------------------------

行内块元素

img input td 

特点：

1.和相邻的行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个

2.默认宽度就是它本身文本的宽度

3.高度宽度外边距以及内边距都可以自主控制

---------------------------------------------------------------------------------------------

显示模式的转换

例如： 想要增加a链接的显示范围，

---------------------------------------------------------------------

 a {/*这里可以不用link因为用了之后不成功所以我们及直接选择给所有连接设置样式*/
           color: teal;
           text-decoration-line: none;
           display: block;/*转换行内元素为块级元素*/
           width: 150px;
           height: 50px;
           background-color: pink;
           /*这里必须精确到decoration下面的某一个具体属性否则就是全部改我们上面的color也不会起作用*/
       }
---
 div {
           /* width: 250px;
            height: 50px;*/
            background-color: royalblue;
            /*把div转化成行内元素*/
            display: inline;
        }
        span {
            width: 100px;
            height: 50px;
            background-color: saddlebrown;
            display:inline-block; /*改成行内块元素*/
        }

    </style>
</head>
<body>
   <input type="text">
   <input type="text">
   <input type="text"><br>
   <a href="#">小猪佩奇</a><br>
   <a href="#">猪头森</a><br>
   <a href="#">桃子</a>
   <a href="http://www.baidu.com">百度</a>
   <div>我是块级元素</div>
   <div>我是块级元素</div>
   <span>行内元素</span>
   <span>行内元素</span>--------------------------------------------
模式转换经常会转化成块级元素可以进行设置宽高

posted on   角落的蘑菇  阅读(11)  评论(0)  编辑  收藏  举报

相关博文：
·  HTML——day5
·  HTML——day4（css）
·  块级，行内，及其切换模式
·  CSS元素的几种显示模式
·  CSS元素显示模式
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae