inline元素

  • 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行
  • 高、行高、以及外边距和内边距不可改变
  • 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化
  • 内联元素只能容纳文本和其他内联元素
  • 只有水平方向margin-left、margin-right、padding-left、padding-right会产生边距效果

block元素

  • 会独占一行,默认情况下,其宽度自动填满父级元素宽度
  • 高度、行高、以及外边距和内边距都可控制
  • 宽度缺省时默认容器的百分之百
  • 可以容纳内联元素和其他块级元素

display属性

  inline:

  1. 使元素变成行内元素,拥有行内元素的特性,既可以与其他行内元素一起共享一行,不会独占一行。
  2. 不能改变元素的height、width值,大小由内容撑开
  3. 可以使用padding、margin的left和right产生边距效果,但是top和bottom不行
  4. 行内元素之间先默认水平排列,若剩余空间不足以容纳下一个内联元素,则换行 <input/><input/><input/><input/><input/>

  block:

  1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素默认填满父级元素的宽度
  2. 能够更改元素的height,width的值
  3. 可以设置padding、margin的各个属性值,top、left、bottom、right都能产生边距效果。

  inline-block:

  1. 行内块级元素,可用于块级元素,也可用于行内元素
  2. 可用于换行,但有一个缺点,同一行内元素内的内容不能换行,只能行内元素之间
  3. 结合了inline与block的一些特点,结合了inline的第一个特点和block的第2,3,4个特点。用通俗的话讲,就是不独占一行的块级元素

 

inline元素、block元素的更多相关文章

  1. HTML inline 与block元素

    行标签:内容撑开宽度,不可以控制宽和高,它的宽和高随标签里的内容而改变 块标签:撑满行(默认) ,可以用样式控制其宽和高 但行标签 img,textarea,select,input 是可以设置宽和高 ...

  2. css中inline、block、inline-block的区别

    http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...

  3. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

  4. 块元素block,内联元素inline; inline-block;

    block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...

  5. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  6. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  7. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  8. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  9. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  10. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

随机推荐

  1. mysql授权指定ip远程登录

    use user //更新用户表: UPDATE `user` SET `Host` = '175.6.6.230' where `Host` = '175.6.6.230'; //授权用户表: GR ...

  2. GIT管理以及运行规范

    继前天看分享的前后端分离后,又重新研究了GIT分支与各个环境的应用. 从开始使用git就一直有在网上查各种资料,查他的运行规范.但不知道是自己理解不够还是怎么的,一直用得不是很好. 根据自己的摸索,整 ...

  3. react+laravel与服务端渲染的几点思考

    一.前后端完全分离 1.用React.js做MVC中的V,剩下的交给Laravel 2.Laravel用来做API接口开发. 3.好处:实现了前后端开发的分离,从而加快前后端开发效率.另外若是多端的如 ...

  4. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-3.Vidoe相关接口完善和规范协议

    笔记 3 .Vidoe相关接口完善和规范协议     简介:完善相关接口,协议规范讲解 1.save接口保存对象             1)@RequestParam(value = "p ...

  5. Windows10系统python环境下安装Dlib库(转载,蔡军帅亲测可用)

    Dlib是一个很优秀的机器学习库,最近做人脸识别要用到这个库,简要记录一下配置过程,准备工作: 1.python环境 2.安装好pip(这里有个简单的安装教程) 3.Dlib包,贴一个我安装的版本,链 ...

  6. memcached源码分析-----item过期失效处理以及LRU爬虫

    memcached源码分析-----item过期失效处理以及LRU爬虫,memcached-----item 转载请注明出处:http://blog.csdn.net/luotuo44/article ...

  7. 树莓派-Ubuntu Mate开启远程桌面xrdp服务

    树莓派3B+安装Ubuntu Mate后,开启远程桌面xrdp服务可以使用KRDC或mstsc远程登录访问,感觉比vnc要快一些: $ sudo apt install xrdp 安装后重启xrdp服 ...

  8. nginx反向代理cookie相关

    http://blog.csdn.net/xiansky2015/article/details/51674997 http://www.jianshu.com/p/aeed2a56a3eb

  9. Tanimoto Coefficient

    Tanimoto Coefficient The Tanimoto coefficient between two points, a and b, with k dimensions is calc ...

  10. curl指令的坑

    今天使用curl指令构造一个docker api访问,一直得不到预期的结果.调试了半天,发现是网址没加引号. token=$(curl -v -XGET -H >& 由于网址跟了一串参数 ...