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. 'No application found. Either work inside a view function or push'

    问题: 说是create_all()的地方有问题,莫名其妙. 后来经过查资料,找出解决方法.附上代码如下:

  2. wepy-数据双向绑定input

    初入wepy,发现wepy和vue神似,但还是有不一样的地方,例如v-model数据双向绑定 场景: 一个input搜索框,用户输入内容,点击“叉叉”按钮,输入的内容全部清空,这是一个很常见的场景 j ...

  3. 最简单的注册美区Apple ID方法

    最简单方法注册苹果美区Apple ID 1.打开苹果官网链接 苹果官网 2. 点击右下角的 United States 3. 点击图片中的选项 4.点击右上角的选项创建新的Apple ID 注意是新的 ...

  4. 初始化一个React项目

    1.create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建. 2.安装结束后,使用下面命令创建应用目录. 3.打开目录 4.运行项目 5 ...

  5. 关于反射和动态代理和AOP

    package Exercise.reflect; /** * 反射把java中所有的东西都当做对象,甚至是类的本身也作为一种对象,并把它作为Class的对象的实例: * 反射是把类.类的属性.方法都 ...

  6. WEB超大文件上传与下载

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  7. WPF Microsoft.Practices.Unity 注入大法简单示例

    最近新入职了公司,做WPF方向的项目,进来后看到这边大量运用了依赖注入来解耦,采用的是Microsoft.Practices.Unity. WPF的话,目前主要有两个技术来实现IOC,unity和ME ...

  8. iOS-KMNavigationBarTransition 框架学习

    最后更新: 2017-06-21 一.文件结构 二.KMSwizzle KMSwizzle主要就一个方法交换的代码 2.1 class_getInstanceMethod() 获取某个类实例的方法, ...

  9. es之关于consistency(数据一致性问题)

    Es集群内部是有一个约定是用来约束我们的写操作的,就是“一致性”: 也就是说:新建.索引.删除这些操作都是写操作,他们都有一个大前提: 当前的分片副本处于活跃状态的数量 >= int( (pri ...

  10. 5-2 Django的路由层(urlconf) 2

    django2.0版的path 思考情况如下: urlpatterns = [ re_path('articles/(?P<year>[0-9]{4})/', year_archive), ...