一、典型代表：

  • 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. 将整个 project 资源打包

    <build> <finalName>bootstrap</finalName> <sourceDirectory>${basedir}/src/mai ...

  2. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  3. AudioToolbox－－AudioQueue实现流播放接口

    AudioMedia_ios.h // //  AudioMedia_ios.h //  mmsplayer // //  Created by Weiny on 12-4-4. //  Copyri ...

  4. Openlayers学习开始前序

    Openlayers将抽象事物具体化为类,其核心类是Map.Layers.Source.View,几乎所有的动作都是围绕这几个核心类展开.Map的实例就是内嵌于网页的交互式地图,因此,最关键的是Map ...

  5. idea中log4j的简单使用

    首先,我们需要建立一个 maven 项目 (如果你没有配置maven 请参考https://www.cnblogs.com/PerZhu/p/10714077.html配置) 接下来开始配置 pom. ...

  6. MySQL MHA候选主库选择

    MHA在选择新主库时,会将所有存活的从库分为下面几类: 存活从库数组:挑选所有存活的从库 最新从库数组: 挑选Master_Log_File+Read_Master_Log_Pos最高的从库 优选从库 ...

  7. A quick introduction to Source Insight for seamless development platform between Linux and Windows

    前言 Source Insight是一个面向项目开发的程序编辑器和代码浏览器,它拥有内置的对C/C++, C#和Java等程序的分析.能分析源代码并在工作的同时动态维护它自己的符号数据库,并自动显示有 ...

  8. HTML&CSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...

  9. 微服务：springboot与swagger2的集成

    现在测试都提倡自动化测试,那我们作为后台的开发人员,也得进步下啊,以前用postman来测试后台接口,那个麻烦啊,一个字母输错就导致测试失败,现在swagger的出现可谓是拯救了这些开发人员,便捷之处 ...

  10. c#2.0锐利体验《泛型编程》读书笔记

    1.c#泛型及机制 Class Stack<T> { } T 其实为type的缩小,不过也可为其他字符代替T ,被称为“泛型类型”  T为晚绑定的,在编译的时候还不能确定T的确切类型. 2 ...