在网站制作过程中发现的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 主要体现在两个方面,一个是编码习惯问题,另一个是编码质量的问题.编码习惯主要有日志编写.代码注释以及编码风格的问题,而编码质量则与很多方面相关,比如 ...
随机推荐
- Expression表达式 实现and、or搜索
用法: [HttpPost] public ActionResult GetBannerList(int pageIndex, int pageSize, string search) { Resul ...
- 内核下枚举进程 (二)ZwQuerySystemInformation
说明: SYSTEM_INFORMATION_CLASS 的5号功能枚举进程信息.其是这个函数对应着ring3下的 NtQuerySystemInformation,但msdn上说win8以后ZwQu ...
- 类欧几里德算法(洛谷 P5170
#include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...
- 前端CSS样式操作
目录 字体和文字 设置标签的宽高 字体属性 文字的属性 文字对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 背景属性 背景图片 边框 画圆 di ...
- python的meshgrid用法和3D库 mpl_toolkits.mplot3d 与PolynomialFeatures多项式库学习
meshgrid import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Ax ...
- intrinsicContentSize和Content Hugging Priority
Mgen | 首页 | | 发新文章 | 联系 | 订阅 | 管理 iOS: 在代码中使用Autolayout (2) - intrinsicContentSize和Content Hugging ...
- vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...
- Python网络爬虫之三种数据解析方式 (xpath, 正则, bs4)
引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...
- Vue中的better-scroll插件
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- 04_springmvc注解开发
一.注解开发 需求:1.进入商品查询列表页面. 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询),要修改的商品从数据库查询,根据商品id(主键)查询商品信息. 3.在商品修改页 ...