css中的元素：行内元素，块级元素，以及行内块级元素

css中常用的元素一般有：

• h1-h6
• ul
• ol
• dl 一般用在新闻摘要和网站尾部
• div区分大模块
• span区分小模块
• img插入图片
• a标签 href=”网址”
• target=”_blank”指的是在新窗口打开
• 防止a链接跳转给href加至少两个以上的#号；
• 或者给里面加一个javascript;
• 防止a链接跳转：空、占位 
  1. href=”##” 至少加两个”#”号
  2. href=”javascript:;”
  3. href=”javascript: void (0);”
• p标签 
• 加粗 strong标签和b标签，strong有强调作用；
• em标签表示斜体；有强调作用。i标签也有斜体功能。

块级元素有哪些？

• h1-h6标题
• div 区分大模块
• p 段落
• ul>li 无序列表 
  • li 列表项
• ol>li 有序列表
• dl 自定义列表 
  • dt 标题
  • dd 描述
• table 表格 
  • tr 行 
    • td 列

特点

• 独占一行
• 可以设置css盒子模型的所有属性
• 可以嵌套其他元素 
  • p元素不能嵌套p元素
  • dt,dd,h1-h6，一般不会嵌套块元素，可以嵌套行内元素
• 在不设置宽高时，宽是继承父级元素的，高是内容决定的

行内元素

有哪些？

• span 区分行内小模块
• a 超链接、锚点
• label 描述表单功能的
• strong 加粗，强调作用
• b 加粗
• em 斜体，强调作用
• i 斜体 

 

 

• 特点
• 在一行显示，从左向右排布
• 不可以设置宽高,可以设置左右padding/margin
• 在不设置宽高时，宽高是由内容决定的
• 编辑代码时，行内元素与行内元素出现换行或者回车，会有间隙(4px) 
  • 解决方法：给父元素或者body：font-size:0;
• 不可以嵌套块级元素，可以嵌套行内元素 
  • a除外
• 基线对齐问题 
  • 解决方法：vertical-align: top;

 

行内块级元素

有哪些？

• img 图片
• input 添加表单功能
• select 下拉框
• textarea 文本域 
  特点
• 在一行显示，从左向右排布
• 可以设置宽高
• 在不设置宽高时，宽高是由内容决定的
• 编辑代码时，行内元素与行内元素出现换行或者回车，会有间隙(4px) 
  • 解决方法：给父元素或者body：font-size:0;
• 不可以嵌套块级元素，可以嵌套行内元素 
  • a除外
• 基线对齐问题 
  • 解决方法：vertical-align: top;