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

(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. golang http get请求方式

    client := &http.Client{} //生成要访问的url,token是api鉴权,每个api访问方式不同,根据api调用文档拼接URLurl := fmt.Sprintf(&q ...

  2. H3C 单路径网络中环路产生过程(1)

  3. H3C根路径开销

  4. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(7)之扩展基类和区域创建以及文本编辑配置

    一.扩展基类和区域创建 (1)在应用之前,我们先在表现层创建一个公共的系统扩展文件来(SystemExtension)存放我们需要延伸和扩展的方法类. 在常规的项目系统操作中,我们都需要用到增删查改的 ...

  5. jQuery 工具类函数-检测对象是否为原始对象

    调用名为$.isPlainObject的工具函数,能检测对象是否为通过{}或new Object()关键字创建的原始对象,如果是,返回true,否则,返回false值,调用格式为: $.isPlain ...

  6. sed工具

    SED是一个非交互式文本编辑器,它可对文本文件和标准输入进行编辑,标准输入可以来自键盘输入.文本重定向.字符串.变量,甚至来自于管道的文本,与VIM编辑器类似,它一次处理一行内容,Sed可以编辑一个或 ...

  7. kali添加路由

    kali添加路由 vim /etc/network/interfaces iface eth0 inet static address 192.168.1.10 netmask 255.255.255 ...

  8. 17.python内置函数2

    python内置函数1:https://www.cnblogs.com/raitorei/p/11813694.html # max,min高级玩法 # l=[1,3,100,-1,2] # prin ...

  9. $[NOIp2015]$ 子串 $dp$

    \(Sol\) 不知道为啥看起来就很\(dp\)的亚子.我们关心的只有\(A\)串当前用到哪一个,\(B\)串已经匹配到哪个位置,已经匹配的被分成了多少段.所以设\(f_{i,j,k,0/1}\)表示 ...

  10. 基于WPF&Prism&AvalonEdit的XAML轻量编辑器

    1. 写在前面 一直从事WPF的相关开发工作,有时为了尝试或演示某些仅仅基于XAML的效果时,但又不想大动干戈打开VS去创建项目,所以一个轻便简单,集编辑与预览于一身的XAML编辑器就显得格外重要. ...