zoukankan      html  css  js  c++  java
  • CSS知识补足——元素的显示模式知识

    定义:元素的显示模式就是元素(标签)以什么方式进行显示,比如div 自己占一行,一行中可以放多个span元素,HTML5元素一般分为 块元素,和行内元素两种类型

    块级元素的特点:

    • 自己独占一行。

    • 高度、宽度、外边距以及内边距都可以控制。

    • 宽度默认是容器(父级宽度)的100%

    • 是一个容器及盒子,里面可以放行内或者块级元素。

    • 文字类的元素内部不能使用块级元素

     

    行内元素的特点:

    • 相邻的行内元素在一行上,一行可以显示多个。

    • 高度宽度直接设置是无效的。

    • 默认宽度就是他本身内容的宽度

    • 行内元素只能容纳文本或其他行内元素

    • 连接里面不能再放连接

    • 特殊情况:a 里面可以放块级元素,但是最好给a转化一下块级模式这样比较安全

     

    行内块元素特点:

    在行内元素中有几个特殊的标签——img input td 他们同时具有块元素和行内元素的特点。

    • 和相邻的行内块元素在一行上,但是他们之间会有空白缝隙。一行可以显示多个。

    • 默认宽度就是它本身内容的宽度

    • 高度,行高,外边距以及内边距都可以控制

     

    元素模式之间的转换

    1. 转为块元素

    display:block;

    1. 转为行内元素

    display:inline;

    1. 转为行内块元素

    display:inline-block

  • 相关阅读:
    个人技术博客
    第十七周19年春学习总结
    第十六周第四次实验设计报告
    第十五周第三次实验设计报告
    第十四周第二次试验设计报告
    第十三周
    第十二周
    第十一周
    第十周作业
    只为粗暴看一下ES6的字符串模板的性能
  • 原文地址:https://www.cnblogs.com/zhang188660586/p/12570411.html
Copyright © 2011-2022 走看看