一、定位: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学习笔记(一):定位与溢出的更多相关文章

  1. CSS学习笔记之定位

    position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...

  2. html+css学习笔记 4[定位]

    如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a ...

  3. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  4. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  5. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  6. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  7. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  10. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. SQL数据开发(经典) 基本操作

    数据开发(经典) 1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Str oke_ci_as ...

  2. UVa 10341 - Solve It【经典二分,单调性求解】

    原题: Solve the equation:         p*e-x + q*sin(x) + r*cos(x) + s*tan(x) + t*x2 + u = 0         where  ...

  3. Codeforces 626D Jerry's Protest(暴力枚举+概率)

    D. Jerry's Protest time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...

  4. 史上最全最强Charles截取手机https协议数据包教程(附上利用此技术制作最近微信比较火的头脑王者辅助外挂)!

    纯原创,思路也是本人花了半个小时整理出来的,整个完成花费了本人半天时间,由于不才刚大学毕业,所以有的编码方面可能不入大牛们的眼,敬请原谅!如有转载请附上本地址,谢谢! 最近微信朋友圈刚刚被跳一跳血洗, ...

  5. c++(单词统计)

    在面试环节中,有一道题目也是考官们中意的一道题目:如果统计一段由字符和和空格组成的字符串中有多少个单词? 其实,之所以问这个题目,考官的目的就是想了解一下你对状态机了解多少. (1) 题目分析 从题目 ...

  6. 浅谈 C/S 和 B/S 架构

    概述 在这个信息急剧膨胀的社会,我们不得不说人类正进入一个崭新的时代,那就是信息时代.信息时代的一个主要而显著的特征就是计算机网络的应用.计算机网络从最初的集中式计算,经过了Client/Server ...

  7. 最简单方法将项目上传到github

    准备材料: 1.首先你需要一个github账号,所有还没有的话先去注册吧!https://github.com/ 2.我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可:ht ...

  8. windows下安装redis3.2.100单机和集群详解

    下载redis 下载地址:https://github.com/MicrosoftArchive/redis/releases 我下载的是3.2.100版本的Redis-x64-3.2.100.zip ...

  9. 【开发技术】java+mysql 更改表字段的步骤

    1).首先通过SQL更改MYSQL库中的表结构(下面是一些例子) ALTER TABLE `illegalactivate` ADD `macethaddress` varchar(250)  NOT ...

  10. jsp中${}

    jsp中${}----是EL表达式的常规表示方式目的是为了获取{}中指定的对象(参数.对象等)的值 如:${user.name}<====>User user = (User)reques ...