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. 举例

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


参考:北京图灵学院的 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. element-ui 表格标题换行

     render-header: 列标题 Label 区域渲染使用的 Function <template> <el-table :data="dataList"& ...

  2. BSOJ5467 [CSPX2017#3]整数 莫比乌斯反演+杜教筛

    题意简述 给你两个整数\(n\),\(k\),让你求出这个式子 \[ \sum_{a_1=1}^n \sum_{a_2=a_1}^n \sum_{a_3=a_2}^n \cdots \sum_{a_k ...

  3. flask之日志的配置

    1. 项目中,日志和配置文件都是单独在一个文件夹中,一般log文件夹和config文件夹,两个文件夹和manage.py在同一个目录下. 2. 配置日志前,先给flask装上script脚本扩展,Fl ...

  4. 原生js控制控制--弹窗的显示和隐藏

    以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红    html代码: <button id ...

  5. 七牛云对象存储kodo使用体验

    在这里,我使用了七牛云的对象存储Kodo,和阿里云的OSS,还有腾讯云的COS是同样的产品 oss相关术语 包依赖关系解决 unrecognized import path "golang. ...

  6. 洛谷 P4571 BZOJ 2257 [JSOI2009]瓶子和燃料

    bzoj题目链接 上面hint那里是选择第2个瓶子和第3个瓶子 Time limit 10000 ms Memory limit 131072 kB OS Linux Source Jsoi2009 ...

  7. MapServer教程3

    Compiling on Unix Compiling on Win32 PHP MapScript Installation .NET MapScript Compilation IIS Setup ...

  8. Android 快速索引(城市列表和联系人)

    最近需要实现一个城市列表的快速索引功能.类似于联系人应用,根据姓名首字母快速索引功能. 要实现这个功能只需要解决两个问题:1.对列表进行分组(具有同一特征),并且能够快速定位到该组的第一项 2.右侧分 ...

  9. Educational Codeforces Round 16 E. Generate a String (DP)

    Generate a String 题目链接: http://codeforces.com/contest/710/problem/E Description zscoder wants to gen ...

  10. Understanding the Module Pattern in JavaScript

    Understanding the Module Pattern in JavaScript Of all the design patterns you are likely to encounte ...