CSS学习笔记五:display,position区别
最近常用css,经常在位置方面使用导display与position这两个属性,所以想要弄清楚它们之间的意思。
一、display
作用是规定元素应该生成的框的类型。意思是定义建立布局时元素生成的显示框类型。其默认值位inline,JavaScript语法:object.style.display="inline";
display 的可能值比较多,不过我自己常用的只有几个;
常用的值有 none,block,inline-block,inline,inherit。
none 是让这个元素不会被显示出来。我使用的时候是在设置这种先设置这个区域位隐藏状态,当鼠标触发事件后则显示出来
.container:hover .btn{
display: block;
}
inline 是个默认样式,该元素被认为为内联样式。
inherit继承父类样式;.container样式是父类 其display:block;, .container .box display:inherit;,这里box是含block;
二、position
position是规定元素的定位类型。position的值比较少包含absolute,fixed,relative,static,inherit。
static是默认属性值。而absolute和fixed是绝对定位,其位置通过top, left, bottom, right来设置,但是又有所不同,fixed是相对于浏览器定位的,该样式如果使用了fixed,那它便回始终处于浏览器的某个地方,不会随着你的滑动而移动或者消失。像那些返回顶部的样式基本都使用该属性值。
relative 是一个生成相对定位的元素,该样式不会重叠,但可以通过四个方向进行移动。
inherit是集成父类的属性值,父亲有什么它就有什么。
CSS学习笔记五:display,position区别的更多相关文章
- Html CSS学习(五)position定位 原
Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- 集群通信组件Tribes之如何维护集群成员信息
一个集群包含若干成员,要对这些成员进行管理就必须要有一张包含所有成员的列表,当要对某个节点做操作时通过这个列表可以准确找到该节点的地址进而对该节点发送操作消息.如何维护这张包含所有成员的列表是本节要讨 ...
- java反射案例详解
白首为功名.旧山松竹老,阻归程.欲将心事付瑶琴.知音少,弦断有谁听? [案例1]通过一个对象获得完整的包名和类名 package Reflect; /** * 通过一个对象获得完整的包名和类名 * * ...
- Android中怎样获取SD卡路径
很多时候我们需要将我们的数据或者apk保存到SD卡中,但是使用绝对路径可能会遇到错误,怎样解决这个问题呢? 可以通过以下方法获取SD卡的路径: Environment.getExternalS ...
- Unity3D学习笔记(一)GUI控件的调用
GUI控件:1.在Start中初始化,在OnGUI中调整.2.公有变量才会出现在Inspector面板.3.GUI控件的初始化和处理在OnGUI内完成.4.JavaScript的中文为UTF-8编码可 ...
- Android 添加library的时候出错添加不上
在向android工程中导入library的时候,会和出现导入不成功,打开查看添加library界面,会发现你添加的library的路径出现D:/work/...?类似的情况,但是别的工程使用的时候又 ...
- 页面缓存js问题解决
1.在jsp中加入头 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP ...
- Shell Scripts - 条件语句,case语句,function功能
修改之前的代码 1.判断 $1 是否为 hello,如果是的话,就显示 "Hello, how are you ?": 2.如果没有加任何参数,就提示使用者必须要使用的参数 ...
- 使用钩子参与到TCP拥塞事件的处理中
TCP定义了几个拥塞事件,当这些事件发生时,我们可以通过TCP的拥塞控制算法,调用自定义的处理函数, 来做一些额外的事情的.也就是说,我们可以很简便的参与到TCP对拥塞事件的处理过程中. Author ...
- iOS中获取本地通讯录联系人以及汉字首字母排序
iOS中获取手机通讯录中的联系人信息: /*** 加载本地联系人*/ - (void)loadLocalContacts { //新建一个通讯录类 ABAddressBookRef addressBo ...
- iOS视频播放Demo VideoPlayerDemo
VideoPlayerDemo https://github.com/CaliosD/VideoPlayerDemo 一个视频播放的例子,使用了pod.