@web

HTML——行内元素-块级元素

2016-10-21  本文已影响102人  07120665a058

常用的块级元素有

<div> - 块
<form> - 表单
<h1> - 大标题
<hr> - 水平分隔线
<ul> - 非排序列表
<ol> - 排序列表
<p> - 段落

块级元素特点:

①独占一行
②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
③宽带与浏览器宽度一样(与内容无关)
④它可以容纳内联元素和其他块元素

常用的行内元素有

<a> - 锚点  
<br> - 换行     
<img> - 图片   
<input> - 输入框  
<label> - 标签    
<select> - 单选或多选菜单
<span> - 文本块    
<textarea> - 多行文本输入框      

行内元素的特点:

①和其他元素在一行上
②width / height / margin-top / margin-bottom不可以改变
③margin-left / margin-right / padding 是可以控制的
④宽度是它所容纳的文字或图片的宽度

note:内联元素内也可以放块级元素标签,可通过改变内部块的样式来控制内联元素的样式例如:

 <a><div style="width:100px;height:100px;">测试</div></a>

CSS中块级、行内元素的应用:

主要用的CSS样式有以下三个:
display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素,表现为同行显示,但可修改宽高内外边距等属性

附录:

块级元素.png 行内元素.png 可变元素.png
上一篇下一篇

猜你喜欢

热点阅读