码迷,mamicode.com
首页 > Web开发 > 详细

Css的元素显示模式-块元素、行内元素和行内块元素

时间:2020-11-24 12:46:25      阅读:12      评论:0      收藏:0      [点我收藏+]

标签:input   bsp   style   特点   直接   安全   其他   mil   标签   

Css的元素显示模式

##块元素
常见的块元素有<h1>~<h6>、<p>、 <div>、 <ul>、 <o|>、 <li>等 ,其中<div>标签是最典型的块元素
块级元素的特点:
1.比较霸道,自己独占一行
2.高度、宽度、外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.块元素是一个容器及盒子,里面可以放行内或者块级元素

注意:
文字类的元素内不能使用块级元素,像<p>标签,它主要用于存放文字,因此<p>标签里面不能放块级元素,特别是不能放<div>;同理,<h1>~ <h6>等都是文字类块级标签,里面也不能放其他块级元素。

 

##行内元素(内联元素)
常见的行内元素有<a>、<strong>、 <b>、 <em>、 <i>、 <del>、 <S>、 <ins>、 <u>、 <span>等,其中<span>标签是最典型的行内元素。

行内元素的特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高、宽直接设置是无效的,默认宽度就是它本身内容的宽度
3.行内元素只能容纳文本或其他行内元素,不能放块元素

注意:
链接里面不能再放链接,特殊情况下链接<a>里面可以放块级元素,但还是给<a>转换一下块级模式最安全。

 

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

 

Css的元素显示模式-块元素、行内元素和行内块元素

标签:input   bsp   style   特点   直接   安全   其他   mil   标签   

原文地址:https://www.cnblogs.com/geze/p/14011216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!