display属性的作用
如何给实现元素布局在自己想要的位置？
相信大家都知道，我们现在学前端的作用就是为了制造出整洁好看又功能化的浏览器页面。
前端主要包含了三个部分 HTML CSS 和JS
html在浏览器的作用就相当于骨架支撑着整个身体（页面）而CSS就好比人的衣服使得整体变得更加整洁好看 JS就像人的运动神经使得整个浏览器页面对想要实现的功能可以运转自如
如何写好CSS样式是做好页面的基础也是很重要的一部分
那么编写代码的过程中我相信大家都会遇到这样一个问题 元素有时候不在我想要的位置怎么办呢？
首先从学习过程中我们可以知道块级元素(例如div、p、h1-h6、ul、li……)是可以设置宽高内外边距来实现对位置的把控而行类元素(例如span、a、b、em、img(img是特殊的行类元素可以设置宽高))则不可以 所以如果想要实现元素位置的布局我们就要通过设置宽高和内外边距来完成 但行类元素不能设置宽高内外边距 那么怎么实现行类元素的位置布局呢？
我们需要引入一个display属性 同时display包含以下属性值
（图片参考与W3school手册）
常用的属性值有display：none； display：block； display：inline；display：inline-block ；
display:none 隐藏该元素
display:block 显示为块级元素
display:inline 显示为行内元素
display:inline-block 显示为行内块级元素
通过以上属性值 我们便可以做到元素之间的转化
顾名思义 行类块级元素display:inline-block 这个属性简单的来说就是使得元素既有block的属性又有inline的属性 可以设置宽高以及上下边距(行类元素只能设置左右边距不能设置上下边距)
上面是原样式 那么怎么实现把字自由移动到我想要的位置呢？因为li标签是行类元素不可以设置宽高及内外边距这时候我们就可以引入display：inline-block使其变为行类块级元素使其具有块级元素的性质来设置边距达到位置的移动
看到了吧通过这个属性就可以实现行类元素块级元素的转换 通过设置宽高内外边距很好的解决行类元素和块级元素的位置问题使其能自由转换调整位置
（欢迎大家指正补充）
display属性的作用相关推荐
- CSS常用属性之display属性（六）
display属性在日常使用中会经常用到,但是它的一些特点及作用可能有很多小伙伴都不太清楚,接下来就让我来详细介绍一下吧. CSS display属性 1.display 属性的作用 2.元素外部显示 ...
- html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
- CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
- 浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- tr的display属性出现td的colspan无效问题
http://www.aichengxu.com/other/9262680.htm 今天在做项目的时候发现用javascript控制 tr 的显示隐藏时,当把tr的显示由"display: ...
- display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述 它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
- css display属性理解
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
最新文章
- linux自带的cd刻录,linux下刻录CDROM的命令
- jquery 轮播插件 bxslider
- spring源码分析之spring-core总结篇
- SAP的资产负债表、损益表的利润体现
- P2764 最小路径覆盖问题（网络流）
- spring mvc学习（15）Referenced file contains errors
- html5炫酷动画及源码,分享8个难忘的HTML5炫酷动画及源码
- IPOP下的tcl脚本使用
- 蓝桥杯 c语言 试题 基础练习 阶乘计算
- SEO人员，如何搭建你的网站基础框架？
- TWaver阶段学习-入门篇
- Win2000命令全集
- OpenGL学习笔记--配置VS环境
- redis加锁和解锁
- Linux服务器cpu性能模式,linux cpu开启性能模式
- hdu dfs入门java_hdu1181变形课dfs/bfs/并查集三种解法(java)
- 路由之间通过静态通信（+回环）
- 一个苦逼站长的十年创业路及感悟
- UBUNTU安装opencv 3.4.3并且使用SIFT特征和viz
- 中国人民公安大学计算机学院,计算机信息与网络安全系赴中国人民公安大学和北京警察学院考察调研...