zoukankan      html  css  js  c++  java
  • CSS的 行内元素 和 块类元素

    块级元素

    ​	1.总是从新行开始
    ​	2.高度、行高、外边距以及内边距都可以控制
    ​	3.宽度默认是浏览器的100%
    ​	4.可以容纳内联元素以及其他块元素
    

    行内元素

    ​	1.和相邻元素在一行上
    
    ​	2.高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效
    
    ​	3.默认宽度就是它本身内容的宽度
    
    ​	4.行内元素只能容纳文本或其他行内元素(a除外)
    
    ​	注意:
    
    ​		1.只有文字才能组成段落,因此p里面不能放置块级元素,同理还有这些标签h1-h6,dt等,它们都是文字块级标签,里面不能放置其他块级元素
    
    ​		2.链接里面不能再放置链接
    

    块级元素和行内元素的区别

    块级元素的特点:
    	1.总是从新行开始
    	2.高度、行高、外边距以及内边距都可以控制
    	3.宽度默认是浏览器的100%
    	4.可以容纳内联元素以及其他块元素
    行内元素的特点:
    	1.和相邻行内元素在一行上
    	2.高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效
    	3.默认宽度就是它本身内容的宽度
    	4.行内元素只能容纳文本或其他行内元素(a除外)
    

    行内块标签 inline-block

    在行内元素中有几个特殊的标签--<img />、<input>、<td>,可以对他们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
    特点:
    	1.和相邻行内元素(行内部)在一行上,但是之间会有空白间隙
    	2.,默认宽度是它本身内容的宽度
    	3.高度、行高、外边距以及内边距都可以控制
    

    标签显示模式转换 display

    块转行内:display:inline;
    行内转块:display:block;
    块、行内元素转换为行内块:display:inline-block;
    
  • 相关阅读:
    解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
    通过filebeat、logstash、rsyslog采集nginx日志的几种方式
    浅析SIEM、态势感知平台、安全运营中心
    解决layui表单ajax提交回调函数不起作用问题的两种方式
    LVM简介及CentOS7 LVM操作实战
    JAVA设计模式总结之23种设计模式
    JAVA设计模式总结之六大设计原则
    SpringMVC学习笔记_02
    SpringMVC学习笔记_01
    Mybatis 学习总结
  • 原文地址:https://www.cnblogs.com/hleisurely/p/12836998.html
Copyright © 2011-2022 走看看