关于块级元素、行内元素、行内块元素的梳理

(1)块级元素

特点:

      a.可以设置宽高,行高,外边距和内边距

     b.块级元素会独占一行

     c.宽度默认是容器的100%

     d.可以容纳内联元素和其他的块级元素

举例:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

(2)行内元素:不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度,高度以及对齐等属性。

特点:

   a.和相邻的行内元素在一行上

        b.高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效

      c.默认的宽度就是它本身的宽度

      d.行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)

举例:<a>,<strong>,<b>,<em>,<del>,<span>

(3)行内块元素:

特点:

     a.和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙

     b.默认的宽度就是它本身的宽度

     c.高度,行高,内边距和外边距都可以设置

举例:<img/>,<input/>,<td/>

三种模式的转换:

块转行内:display-inline;

行内转块:display:block;

块,行内元素转换为行内块:display:inline-block

.button a {
/* 这是一个按钮 */
border: 1px solid #ff9412;
width: 150px;
height: 40px;
margin: 40px auto;
display: block;
color: #ff9412;
font-size: 14px;
text-decoration: none;
text-align: center;
line-height: 40px;
border-radius: 5px;
}

  

效果图如下:

day6 云道页面 知识点梳理(1)的更多相关文章

  1. Javascript重要知识点梳理

    Javascript重要知识点梳理 一.Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for 二.Javas ...

  2. Memcache知识点梳理

    Memcache知识点梳理 Memcached概念:    Memcached是一个免费开源的,高性能的,具有分布式对象的缓存系统,它可以用来保存一些经常存取的对象或数据,保存的数据像一张巨大的HAS ...

  3. jsp&html页面知识点集锦

      CreateTime--2016年12月16日16:08:03Author:Marydonjsp&html页面知识点集锦1.标签的class属性 标签同时拥有多个class时,要写在同一个 ...

  4. [独孤九剑]Oracle知识点梳理(十)%type与%rowtype及常用函数

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  5. [独孤九剑]Oracle知识点梳理(九)数据库常用对象之package

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  6. [独孤九剑]Oracle知识点梳理(八)常见Exception

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  7. [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  8. [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure、function、Sequence

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  9. [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table、View

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

随机推荐

  1. ESB总线的核心架构

    根据近期对开源ESB产品的研究,已经对Oracle和Tibco的ESB总线产品的实施经验积累,对ESB总线的核心产品架构有了进一步的清晰认识,将ESB的核心架构整理为上图,上图中看到的内容也是做为一款 ...

  2. 【codeforces 749B】Parallelogram is Back

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  3. MVC,MVP,MVVM基本原理

    MVC,MVP,MVVM基本原理 模式与框架,其诞生就是为了解决日益复杂的事务处理 当同一问题不断出现,人们就会总结细分出相应的问题解决办法 当需求变得庞大的时候,就会出现细分,在细分的过程中就会出现 ...

  4. H3C配置设备的FTP服务

  5. 被孟加拉题吊打的ACM考试

    https://codeforces.com/gym/101864 题目并不难 B 考虑新加入的线段和之前线段有交的个数 总数-不交的,不交的:右端点在[l,r]左边,左端点在[l,r]右边的. 维护 ...

  6. js 快速取整

    我们要将23.8转化成整数  有哪些方法呢 比如 Math.floor( ) 对数进行向下取整  它返回的是小于或等于函数参数,并且与之最接近的整数 Math.floor(5.1) 返回值 //5 M ...

  7. opacity兼容性以及存在问题处理

    opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...

  8. Team Foundation Server 2015使用教程【9】:tfs用户账号切换

  9. Visioi形状相关应用

    选择手柄为白点  按住shift的同时移动白点更为灵活 黄色的点就是控制手柄(只有一维图形有) 当调整形状出现绿色边的时候说明:这个时候这个形状的边等于了某个形状的长 铅笔工具可以移动控制点来更形状 ...

  10. 20191031-6beta week 1/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 git地址:https://e.coding.net/Eustia/ ...