在网站制作过程中发现的block和inline-block不同。
inline-block,简单来说就是在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。有时既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。而block的的特性有以下特征:
- block元素会独占一行,多个block元素会各自新起一行。默认情况下(即不设置宽度的情况下),block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
再实际过程中,我们看到碰到这样的情况:

在这里我们的HTML代码如下图所示:

CSS样式如下:

在这里。我们的a 标签的display使用的是inline-block,对象是呈递为内联元素,宽度自适应它的内容。不会独占整个一行。改为display:block后,效果如下图所示:

此处的标签a的宽度就独占真个p标签的一行,自动填充其父元素的宽度。
这是本文所写,请大家关注下他的区别。
在网站制作过程中发现的block和inline-block不同。的更多相关文章
- 调试过程中发现按f5无法走进jdk源码
debug 模式 ,在fis=new FileInputStream(file); 行打断点 调试过程中发现按f5无法走进jdk源码 package com.lzl.spring.test; impo ...
- 为Secure Store Service生成新密钥,解决“生成密钥过程中发现错误”的问题
我们集成TFS和SharePoint Server以后,一个最常见的需求是通过SharePoint Server的Excel Service读取TFS报表中的信息,利用Excel Service的强大 ...
- 常见Code Review过程中发现的问题-续
上一篇列举了一些比较常见的Code Review问题列表,文末有链接,可追溯查看.本篇为上篇的姊妹篇,继续列举一些上篇遗漏的或不易发现的问题清单,希望能整体性把一些常见的问题表述出来. 测试数据不具有 ...
- 网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
- 在window server 2008 64位系统上 发布网站的过程中遇到的问题
发布网站的过程如下: 1.安装数据库系统2.建立数据库,执行sql3.安装iis4.在本地机子上发布网站5.把发布好的东西拷贝到IIS上 1.安装数据库系统: 出现错误:必须使用角色管理工具 安装或配 ...
- 在window server 2008 64位系统上 发布网站的过程中遇到的问题(转)
发布网站的过程如下: 1.安装数据库系统2.建立数据库,执行sql3.安装iis4.在本地机子上发布网站5.把发布好的东西拷贝到IIS上 1.安装数据库系统: 出现错误:必须使用角色管理工具 安装或配 ...
- kolla制作过程中:neutron-sfc-agent 报错的问题
在使用二进制方式编译镜像的时候,neutron的sfc-agent提示如下错误ERROR:kolla.image.build:neutron-sfc-agent Failed with status: ...
- Hive通过查询语句向表中插入数据过程中发现的坑
前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...
- 常见Code Review过程中发现的问题
软件环境:Spring MVC + MyBatis 主要体现在两个方面,一个是编码习惯问题,另一个是编码质量的问题.编码习惯主要有日志编写.代码注释以及编码风格的问题,而编码质量则与很多方面相关,比如 ...
随机推荐
- node中没有全局作用域,只有模块作用域(文件作用域)
node中没有全局作用域,只有模块作用域(文件作用域)
- Loadrunner系列学习--Loadrunner架构(1)
Loadrunner系列学习--Loadrunner架构(1) 最近在学习Loadrunner,发现一个英文网站http://www.wilsonmar.com/1loadrun.htm里面介绍的比较 ...
- CSS3 学习笔记(动画 多媒体查询)
动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 ...
- 阿里云 Aliplayer高级功能介绍(四):直播时移
基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
- 使用UUID和int自增主键的区别
知其然,知其所以然.在看到生成UUID的代码,后带给我的百度结合自己的经验再写下来的区别 一.UUID做主键: 优点: .保证数据在表和库都是独立的,有利于后续的分库 .合并表的时候主键不会重复 .有 ...
- Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...
- 转:Linux 文件IO理解
源地址http://blog.csdn.net/lonelyrains/article/details/6604851 linux文件IO操作有两套大类的操作方式:不带缓存的文件IO操作,带缓存的文件 ...
- Linux 的文件和目录管理类命令
文件和目录管理类的命令 目录: cd ~[username] ~:指定用户的家目录 cd -:回到上一次所在的目录 路径: 相对路径中: .:当前目录 ..:父目录 pwd: print workin ...
- 力扣算法题—146LRU缓存机制
[题目] 运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (k ...
- netty优化参考链接
Netty百万级推送服务设计要点:http://www.infoq.com/cn/articles/netty-million-level-push-service-design-points/ 用N ...