在网站制作过程中发现的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 主要体现在两个方面,一个是编码习惯问题,另一个是编码质量的问题.编码习惯主要有日志编写.代码注释以及编码风格的问题,而编码质量则与很多方面相关,比如 ...
随机推荐
- PyTorch中的C++扩展
今天要聊聊用 PyTorch 进行 C++ 扩展. 在正式开始前,我们需要了解 PyTorch 如何自定义module.这其中,最常见的就是在 python 中继承torch.nn.Module,用 ...
- html--垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- linux 系统优化初始化配置
一.系统优化配置 1.修改yum源 配置国内yum源 阿里云yum源地址 #CentOS 5.x wget -O /etc/yum.repos.d/CentOS-Base.repo http://m ...
- Oracle Database 18c数据库安装步骤
1.Oracle官网登录下载https://login.oracle.com/mysso/signon.jsp WINDOWS.X64_180000_db_home.zip 2.D盘根目录新建文件夹: ...
- server端并发聊天
mul_server和mul_client实现了客户端发什么消息,服务器端回复什么消息 server_dialog和mul_client实现了客户端与服务器并发通信
- thinkphp 动态查询
借助PHP5语言的特性,ThinkPHP实现了动态查询,核心模型的动态查询方法包括下面几种: 方法名 说明 举例 getBy 根据字段的值查询数据 例如,getByName,getByEmail ge ...
- Ubuntu GitHub操作——使用仓库
若你想更新github代码 在正式更新github仓库时,可以先 git status 查看一下分支master的状态 1.因为是更新代码,所以不用前面那么多步骤,直接添加所更新的文件到 分支mast ...
- Jdk8 Hashmap ConcurrentHashMap
JDK1.8 Hashmap JDK1.8 ConcurrentHashMap 不采用segment而采用 synchronized (f) f = table[i]; 减小锁的力度 设计了MOVE ...
- matlab调用keras深度学习模型(环境搭建)
matlab没有直接调用tensorflow模型的接口,但是有调用keras模型的接口,而keras又是tensorflow的高级封装版本,所以就研究一下这个……可以将model-based方法和le ...
- <jsp:forward page=""></jsp:forward>标签失效异常
解决方案:在web.xml <filter-mapping> <filter-name>struts2</filter-name> ...