1. 块元素，内联元素，内联块元素

  • 元素就是标签
  • 布局中常用的有三种标签
    • 块元素
    • 内联元素
    • 内联块元素

1.1 块元素

  • 也称为行元素
  • 布局中常用的标签，如
    • div、p、ul、li、h1~h6、dl、dt、dd 等等
  • 在布局中
    • 支持全部的样式
    • 如果没有设置宽度，默认的宽度为父级宽度的 100%
    • 盒子占据一行
      • 即使设置了宽度，也一样独占一行

1.2 内联元素

  • 也称为行内元素
  • 布局中常用的标签，如
    • a、span、em、b、strong、i 等等
  • 在布局中
    • 支持部分样式，如 margin 的左右值
    • 不支持宽(width)高(heigh)属性
    • 宽高由内容决定（撑开）
    • 不独占一行
    • 盒子并在一行
    • 代码换行（指回车）会产生间距（1 个空格）
    • 子元素是内联元素
    • 父元素可以
      • 用 text-align 属性设置子元素水平对齐方式
      • 用 line-height 属性值设置垂直对齐方式

1.3 内联块元素

  • 也称内块元素
  • 是新增的元素类型
  • 现有元素没有归于此类别的
  • img 和 input 元素的行为类似这种元素，但是也归类于内联元素
  • 在布局中
    • 支持全部样式
    • 如果没有设置宽高，宽高由内容决定
    • 盒子并在一行
    • 代码换行，盒子会产生间距
    • 子元素是内联块元素
    • 父元素可以
      • 用 text-align 属性设置子元素水平对齐方式
      • 用 line-height 属性值设置子元素垂直对齐方式

2. 举例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>test</title>
  6.         <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
  7.     </head>
  8.     <body>
  9.         <div class="box">box</div>
  10.         内联元素<span>不不不</span>独占一行
  11.         input <input type="text" name=""> input
  12.     </body>
  13. </html>
  1. *{
  2.     width: 600px;
  3.     height: 100px;
  4. }
  5. .box{
  6.     /* 块级元素 */
  7.     background: orange;
  8.     margin: 20px;
  9.     padding: 20px;
  10.     text-align: center; /* 文字水平居中 */
  11.     line-height: 100px; /* 设置行高 */
  12. }
  13. span{
  14.     /* 内联元素:
  15.         1. 不支持宽(width)高(heigh)属性
  16.         2. 宽高由内容撑开
  17.         3. 不独占一行
  18.         4. 盒子并在一行
  19.         5. 代码换行（指回车）会产生间距（1 个空格）
  20.         6. 只支持部分样式
  21.         7. 支持 margin 的左右值 */
  22.     background-color: red;
  23.     margin: 20px;
  24.     padding: 20px;
  25.     background: yellow;
  26. }
  27. input{
  28.     /* 行内快元素
  29.         1. 支持所有的样式
  30.         2. 宽高属性默认由内容决定（撑开）
  31.         3. 不独占一行
  32.         4. 盒子并在一行
  33.         5. 代码换行（指回车）是会产生间距（1 个空格）
  34.          */
  35.     width: 100px;
  36.     margin: 20px;
  37.     padding: 10px;
  38. }
  • 效果截图

参考：北京图灵学院的 Web 前端公开课

[Web 前端] 015 css 三种元素的介绍的更多相关文章

  1. [Web 前端] 006 css 三种页面引入的方法

    1. 外链式 用法 step 1: 在 html 文档的 head 头部分写入下方这句话 <link rel="stylesheet" href="./xxx.cs ...

  2. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  3. [Web 前端] 016 css 元素的转换

    三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...

  4. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  5. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  6. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  9. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

随机推荐

  1. 利用雅虎ycsb对cassandra做性能测试

    准备: 环境: 两台虚拟机:ip:192.168.138.128/129;配置:2核4G: 版本:apache-cassandra-3.10    ycsb-cassandra-binding-0.1 ...

  2. 【leetcode】299. Bulls and Cows

    题目如下: 解题思路:本题难度不太大,对时间复杂度也没有很高的要求.我的做法是用一个字典来保存每个字符出现的次数,用正数1记录标记secret中出现的字符,用负数1记录guess中出现的字符,这样每出 ...

  3. handy源码阅读（四）：Channel类

    通道,封装了可以进行epoll的一个fd. struct Channel: private noncopyable { Channel(EventBase* base, int fd, int eve ...

  4. [NOI2003]逃学的小孩 题解

    前言 >原题传送门(洛谷)< 看了一下洛谷题面,这道NOI的题竟然是蓝的(恶评?),做了一下好像确实是蓝的... 解法 思路非常简单,找道树的直径,然后答案是直径长度加上最大的min(di ...

  5. JS FormData 文件异步提交

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. Socket网络通信编程（一）

    1.学习基本概念.传统的同步阻塞式I/O编程.伪异步IO实现 2.学习基于NIO的同步非阻塞式编程 3.了解基于NIO2.0的异步非阻塞(AIO)编程 1.1 基本概念 Socket又称“套接字”,应 ...

  7. uploadify上传插件参数的一些设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Spring Boot 集成 JPA 的步骤

    Spring Boot 集成 JPA 的步骤 配置依赖 compile group: 'org.springframework.boot', name: 'spring-boot-starter-da ...

  9. open 函数处理文件

    open函数用于文件处理 操作文件时,一般需要经历如下步骤:1 打开文件    2  操作文件 f =  open("文件名"     ,  '  打开文件方式'  ) 文件句柄 ...

  10. leetcode-mid-Linked list- 105. Construct Binary Tree from Preorder and Inorder Traversal

    mycode   43.86% # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, ...