深入理解display属性——前端布局常用重要属性
小注:display属性在网页布局中非常常见,但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面
定义
display属性用于规定元素生成的框类型,影响显示方式
常用值: none | inline | block | inline-block | list-item
初始值: inline
应用于: 所有元素
继承性: 无
[注意]IE7-浏览器不支持table类属性值及inherit
分类
block
【特征】
[1]不设置宽度时,宽度为父元素宽度
[2]独占一行
[3]支持宽高
【不支持的样式】
[1]vertical-align
inline
【特征】
[1]内容撑开宽度
[2]非独占一行
[3]不支持宽高
[4]代码换行被解析成空格
【不支持的样式】
[1]background-position
[2]clear
[3]clip
[4]height | max-height | min-height
[5]width | max-width | min-width
[6]overflow
[7]text-align
[8]text-indent
[9]text-overflow
inline-block
【特征】
[1]不设置宽度时,内容撑开宽度
[2]非独占一行
[3]支持宽高
[4]代码换行被解析成空格
【不支持的样式】
[1]clear
none
【特征】
隐藏元素并脱离文档流
list-item
【特征】
[1]不设置宽度时,宽度撑满一行
[2]独占一行
[3]支持宽高
深入理解display属性——前端布局常用重要属性的更多相关文章
- CSS display的几个常用的属性值,inline , block, inline-block
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...
- 深入理解line-height与vertical-align——前端布局常用属性
line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作.下面将主要介绍lin ...
- Android 控件布局常用的属性
<!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...
- android 布局常用混淆属性
1.如何控制某一控件在父控件中的相对位置呢? 在Android系统中提供了layout_margin,用来控制某一控件边缘相对于父控件的边距. 其中, android:layout_marginTop ...
- 前端--CSS之使用display:inline-block来布局(转)
CSS之使用display:inline-block来布局 css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...
- CSS之使用display:inline-block来布局
css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- 常用前端布局,CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- 前端布局神器 display:flex
前端布局神器display:flex 一直使用flex布局,屡试不爽,但是总是记不住一些属性,这里写来记录一下. 2009年,W3C提出了一种新的方案--Flex布局,可以简便.完整.响应式地实现 ...
随机推荐
- ubuntu tree 查看目录结构
首先需要安装tree这个软件 sudo apt install tree tree -L target_dir/ 2代表列举的目录结构深度
- 微信授权登录mock(在没有真实微信账号的情况下测试大量微信账户授权登录的情况)
场景介绍 对于构建在微信公众号的系统,帐号体系往往使用微信授权登录(如各类微信商城应用系统). 这样操作不仅可以实现静默注册,对用户几乎是无感的,同时也达到了区分用户,获取用户基本信息(头像,昵称等) ...
- C#、WPF中如何自定义鼠标样式
需求:在C#中如何自定义鼠标样式?在这里可以分两种情况,一种是在winForm,另一种是在WPF中(注意使用的Cursor对象不一样) 解决办法如下: a.首先针对WinForm中,我们可以采用图标加 ...
- python监控机器(第1版)
# coding:utf-8 import configparser import logging import os import psutil import ctypes import platf ...
- CodeForces 1151D Stas and the Queue at the Buffet
题目链接:http://codeforces.com/contest/1151/problem/D 题目大意: 有n个学生排成一队(序号从1到n),每个学生有2个评定标准(a, b),设每个学生的位置 ...
- Linux查看文件大小
//查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh * //查看welcome.txt文件占用空间大小 du -sh welcome.txt //方法 ...
- jmeter 安装
3.1 windows10环境下测试工具jmeter安装与配置 3.1.1下载安装java 浏览器中打开链接:http://down-www.7down.net/pcdown/soft/xiazai/ ...
- const命令
一.基本用法 声明一个只读的常量,这个值不会变. const声明常量与let一样,不可重复声明. 二.本质(我困惑的地方) const实际上保证的并不是变量的值不可以改动,而是变量指向的内存地址不可改 ...
- cocos 资源工作流程
前面的话 本文将详细介绍 cocos 中的资源工作流程 概述 [同步性] 资源管理器中的资源和操作系统的文件管理器中看到的项目资源文件夹是同步的 在资源管理器中对资源的移动.重命名和删除,都会直接在用 ...
- Sass和less的区别是什么?用哪个好
什么是Sass和Less? Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 ...