一、典型代表：

  • Div

  • h1-h6

  • p

  • ul

  • li

二、特点:

  • 独占一行
  • 可以设置宽高
  • 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
<style type="text/css">

/*

        div,p{

            height: 200px;

            width: 150px;

            background-color: red;

        }

*/

        .box{

            width: 300px;

            background-color: #888;

            height: 100px;

        }

        .box p{

            height: 50px;

            background-color: blue

        }

    </style>

</head>

<body>

    <div>div块级元素</div>

    <p>p我也是块级元素</p>

    <div class="box">

        <p></p>

    </div>

</body>

CSS块元素的更多相关文章

  1. CSS块元素与内联元素（转）

    为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...

  2. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  3. css块元素及内联元素

    块级元素主要有: address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , ...

  4. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  5. css 块元素超出文字省略表示

    .text-omit{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 只对块元素的设置有效 . 块元素和行内元素见 ...

  6. CSS 块元素、内联元素、内联块元素三者的区别与转换

    三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...

  7. css块元素的 display 属性 inline-block 的应用

    <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> < ...

  8. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  9. css笔记12：块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

随机推荐

  1. c# sharepoint client object model 客户端如何创建中英文站点

    c# sharepoint client object model 客户端如何创建中英文站点 ClientContext ClientValidate = tools.GetContext(Onlin ...

  2. flickity：支持触摸滑动，响应迅速的幻灯片轮播插件

    简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...

  3. Windows 创建 Redis 和 zookeeper 系统服务

    Redis 启动 Redis start cmd /k "cd/d c:\Redis-x64-3.2.100\&&echo start Redis &&red ...

  4. 数据分析 之 NumPy

    目录 简单了解数据分析 Python数据分析三剑客(Numpy,Pandas,Matplotlib) 简单使用np.array() 使用np的routines函数创建数组 ndarray N维数组对象 ...

  5. 2. ES6基础-let和const命令

    目录 1. let命令 1.1 用法 1. 2 不存在变量提升 1.3 区域绑定 1.4 不允许重复声明 2. const命令 2.1 用法 2.2 与let类似的特性 2.3 const本质 2.4 ...

  6. nepenthes用法

    安装 # apt-get install nepenthes 配置文件 # vi submit-file.conf submit-file { path "/var/lib/nepenthe ...

  7. Mac音频播放

    Mac音频播放 audioqueue播放pcm数据 http://msching.github.io/blog/2014/08/02/audio-in-ios-5/ audiounit播放pcm数据  ...

  8. day 08作业 预科

    有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中 lt=[11,22,3 ...

  9. synchronized底层实现原理

          基于进入和退出管程(Monitor)对象实现,无论显式(Monitorenter Monitorexit)还是隐式都是如此.同步方法并不是由monitorenter和monitorexit ...

  10. CentOS8-在hyper-V安装选项

    安装选项select Server with a GUI.后重启卡在黑屏无法启动. 后改选: Select software to be installed.  Choose the Workstat ...