inline元素、block元素
inline元素
- 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行
- 高、行高、以及外边距和内边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化
- 内联元素只能容纳文本和其他内联元素
- 只有水平方向margin-left、margin-right、padding-left、padding-right会产生边距效果
block元素
- 会独占一行,默认情况下,其宽度自动填满父级元素宽度
- 高度、行高、以及外边距和内边距都可控制
- 宽度缺省时默认容器的百分之百
- 可以容纳内联元素和其他块级元素
display属性
inline:
- 使元素变成行内元素,拥有行内元素的特性,既可以与其他行内元素一起共享一行,不会独占一行。
- 不能改变元素的height、width值,大小由内容撑开
- 可以使用padding、margin的left和right产生边距效果,但是top和bottom不行
- 行内元素之间先默认水平排列,若剩余空间不足以容纳下一个内联元素,则换行 <input/><input/><input/><input/><input/>
block:
- 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素默认填满父级元素的宽度
- 能够更改元素的height,width的值
- 可以设置padding、margin的各个属性值,top、left、bottom、right都能产生边距效果。
inline-block:
- 行内块级元素,可用于块级元素,也可用于行内元素
- 可用于换行,但有一个缺点,同一行内元素内的内容不能换行,只能行内元素之间
- 结合了inline与block的一些特点,结合了inline的第一个特点和block的第2,3,4个特点。用通俗的话讲,就是不独占一行的块级元素
inline元素、block元素的更多相关文章
- HTML inline 与block元素
行标签:内容撑开宽度,不可以控制宽和高,它的宽和高随标签里的内容而改变 块标签:撑满行(默认) ,可以用样式控制其宽和高 但行标签 img,textarea,select,input 是可以设置宽和高 ...
- css中inline、block、inline-block的区别
http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 块元素block,内联元素inline; inline-block;
block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
随机推荐
- mysql授权指定ip远程登录
use user //更新用户表: UPDATE `user` SET `Host` = '175.6.6.230' where `Host` = '175.6.6.230'; //授权用户表: GR ...
- GIT管理以及运行规范
继前天看分享的前后端分离后,又重新研究了GIT分支与各个环境的应用. 从开始使用git就一直有在网上查各种资料,查他的运行规范.但不知道是自己理解不够还是怎么的,一直用得不是很好. 根据自己的摸索,整 ...
- react+laravel与服务端渲染的几点思考
一.前后端完全分离 1.用React.js做MVC中的V,剩下的交给Laravel 2.Laravel用来做API接口开发. 3.好处:实现了前后端开发的分离,从而加快前后端开发效率.另外若是多端的如 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-3.Vidoe相关接口完善和规范协议
笔记 3 .Vidoe相关接口完善和规范协议 简介:完善相关接口,协议规范讲解 1.save接口保存对象 1)@RequestParam(value = "p ...
- Windows10系统python环境下安装Dlib库(转载,蔡军帅亲测可用)
Dlib是一个很优秀的机器学习库,最近做人脸识别要用到这个库,简要记录一下配置过程,准备工作: 1.python环境 2.安装好pip(这里有个简单的安装教程) 3.Dlib包,贴一个我安装的版本,链 ...
- memcached源码分析-----item过期失效处理以及LRU爬虫
memcached源码分析-----item过期失效处理以及LRU爬虫,memcached-----item 转载请注明出处:http://blog.csdn.net/luotuo44/article ...
- 树莓派-Ubuntu Mate开启远程桌面xrdp服务
树莓派3B+安装Ubuntu Mate后,开启远程桌面xrdp服务可以使用KRDC或mstsc远程登录访问,感觉比vnc要快一些: $ sudo apt install xrdp 安装后重启xrdp服 ...
- nginx反向代理cookie相关
http://blog.csdn.net/xiansky2015/article/details/51674997 http://www.jianshu.com/p/aeed2a56a3eb
- Tanimoto Coefficient
Tanimoto Coefficient The Tanimoto coefficient between two points, a and b, with k dimensions is calc ...
- curl指令的坑
今天使用curl指令构造一个docker api访问,一直得不到预期的结果.调试了半天,发现是网址没加引号. token=$(curl -v -XGET -H >& 由于网址跟了一串参数 ...