CSS学习笔记(一):定位与溢出
一、定位:position
static | relative | absolute | fixed | inherit ,各值含义如下:
1)static:
元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
2)relative:
元素框偏移某个距离,元素仍保持其未定位前的形状,它本身所占的空间仍保留
3)absolute:
元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
4)fixed:
元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
二、内容溢出:overflow
visible | hidden | scroll | auto | inherit
1)visible:元素内容可见,元素框外也可见
2)hidden:元素内容在元素框外不可见
3)scroll: 元素内容在元素框外不可见,但提供滚动条查看
4) auto:允许用户代理来决定使用何种行为
CSS学习笔记(一):定位与溢出的更多相关文章
- CSS学习笔记之定位
position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...
- html+css学习笔记 4[定位]
如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative; 相对定位 a ...
- CSS学习笔记:定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记之样式声明
目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- SSH Secure Shell Client最新版,解决Win10不兼容问题
SSH的工具很多,像XShell,SecureCRT等等. 不过我一直用的是:SSH Secure Shell Client 主要的原因就是: 软件本身带文件浏览的功能,可以通过拖拽去实现文件上传和下 ...
- Maven工程搭建spring boot+spring mvc+JPA
添加Spring boot支持,引入相关包: 1.maven工程,少不了pom.xml,spring boot的引入可参考官网: <parent> <groupId>org.s ...
- linux(六)之文本操作
接下来我们一起来看一下再linux中怎么去对文本进行操作的 一.文本文件 既然要操作文本,所以我们要对文本有一个了解,那什么是文本文件呢. 文本文件是一种由若干行字符构成的计算机文件.文本文件存在于计 ...
- CTF---Web入门第十二题 程序逻辑问题
程序逻辑问题分值:20 来源: 实验吧 难度:中 参与人数:6909人 Get Flag:1993人 答题人数:2070人 解题通过率:96% 绕过 解题链接: http://ctf5.shiyanb ...
- 城乡联谊胡策会糊厕R3
因为时间关系这把没设计题面,而且居然还出了锅……T_T 信 原题是leetcode WeeklyContest52 的T1(懒得去找url了 随便搞,但是无解输-1 数字统计 原题PE603 记前n个 ...
- hihoCoder #1015 : KMP算法【KMP裸题,板子】
#1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...
- oracle erp 表结构
BOM模块常用表结构 表名: bom.bom_bill_of_materials 说明: BOM清单父项目 BILL_SEQUENCE_ID NUMBER 清单序号(关键字)ASSEMBLY_ITEM ...
- c++(非递归排序)
在上面一篇博客当中,我们发现普通查找和排序查找的性能差别很大.作为一个100万的数据,如果使用普通的查找方法,那么每一个数据查找平均下来就要几十万次,那么二分法的查找呢,20多次就可以搞定.这中间的差 ...
- addslashes() 函数返回在预定义字符之前添加反斜杠的字符串
. 预定义字符是: 单引号(') 双引号(") 反斜杠(\) NULL 提示:该函数可用于为存储在数据库中的字符串以及数据库查询语句准备字符串. 注释:默认地,PHP 对所有的 GET.PO ...
- 坑爹的file_exists
介绍 我发现了一个问题,今天与大家分享.我把整个过程描述一下. 问题 公司有个框架是基于smarty写的,我负责php的升级,维护人员把新环境布上来之后,测试人员找我提出经常报错(错 ...