222wan

导航

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 2023-03-11 13:16  角落的蘑菇  阅读(10)  评论(0编辑  收藏  举报