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 ...
随机推荐
- Codeforces 888E Maximum Subsequence
原题传送门 E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input ...
- CSS position: absolute、relative定位问题详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...
- 洛谷 P1028 数的计算【递推】
P1028 数的计算 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n<=1000),然后对此自然数按照如下方法进行处理: 1.不作任何处理; 2.在它 ...
- HDU1372搜索
Knight Moves Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...
- NEFU_117素数个数的位数
题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...
- javaIO详解、包含文件以及流操作
1.File 文件操作 java.io.File用来表示文件或者目录.只能用来表示文件或者目录的大小名称等信息,而无法完成对文件内容的CRUD. 1.1构造方法 有四种,当然基本都是根据文件的路径或者 ...
- WEB应用:预览
主题 建立WEB应用通用目录 配置classpath 将WEB应用注册到服务器中 使用制定url前缀调用WEB应用的servlet.html.jsp 为所有自己编写的servlet制定url 建立WE ...
- Struts2------Result处理&获取页面请求参数&API
一.Result处理 1.1 说明 平常我们设置跳转页面,是在action标签里面加上 result标签来控制,这种设置的页面跳转,称之为 局部结果页面:但是我们有时候在很多个action里面,针对不 ...
- 用程序读取CSV文件的方法
CSV全称 Comma Separated values,是一种用来存储数据的纯文本文件格式,通常用于电子表格或数据库软件.用Excel或者Numbers都可以导出CSV格式的数据. CSV文件的规则 ...
- NPM使用命令总结
NPM使用命令总结 npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm ...