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

css基础 行内元素 块级元素

时间:2017-08-31 09:43:15      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:put   element   lin   enter   外边距   文本   size   定义   inline   

1、行内元素(内联元素 inlineElement)

特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效。

常见有:

a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签,

select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,strong - 粗体强调

2、块级元素

特点:从新行开始占据一行,可设置宽高、行高、内外边距,其宽度默认浏览器的宽度,高度随字体大小而改变,margin只对左右起作用,上下无效。

常见有:

div -最常用的块级元素,dl - 和dt dd搭配使用的块级元素,form - 交互表单,h1 - 大标题,hr - 水平分隔线,ol - 排序表单,p - 段落,ul - 非排序

 

tips:1、display可以在一定情况下互相转换行内元素和块级元素

    2、text-align:center可以使块级元素中的内联元素居中,但是将内联元素设置为块级元素后无法使用margin:0 auto居中,这种情况下可以使用padding属性扩充内联元素的宽高,而不改变其内联属性,即可居中。

    3、目前用到的居中方式,水平居中text-align:center可以使图片或者文字在块级元素水平居中,line-height可以设置为与块级元素同高,实现水平居中;块级元素间的居中使用margin:0 auto。

 

css基础 行内元素 块级元素

标签:put   element   lin   enter   外边距   文本   size   定义   inline   

原文地址:http://www.cnblogs.com/yihen-dian/p/7456483.html

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