CSS每日学习笔记(2)
7.31.2019
1.CSS定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
CSS 定位属性允许你对元素进行定位。
属性 |
描述 |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
|
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
|
定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
|
定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
|
定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
|
设置当元素的内容溢出其区域时发生的事情。 |
|
设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
|
设置元素的垂直对齐方式。 |
|
设置元素的堆叠顺序。 |
2. 如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
3. 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
对比:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
4. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。(不占据空间,会覆盖别的框)
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
5. 浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像。要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
6. 类型(元素)选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。(CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。)
7.选择器分组:相同规则的选择器放在规则左边,通过逗号分隔。通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。
通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配。
8.类选择器:为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。有*应用于所有class为该值的元素,无*则应用于同名元素。类选择器也可以结合元素选择器来使用。
<p class="important">
This paragraph is very important.
</p>
p.important {color:red;}
多类选择器:一个 class 值中可能包含一个词列表,各个词之间用空格分隔。通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
<p class="important warning">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
注意:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。
9. ID 选择器:前面有一个 # 号,引用id属性里的值。
区别 1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
区别 2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。
区别 3:ID 能包含更多含义(类选择器需要知道特定的类型)
类似于类,可以独立于元素来选择 ID。#mostImportant {color:red; background:yellow;}
注意:类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
10.后代选择器:规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。(无论间隔多远层次多深)
11. 如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,使用子元素选择器(Child selector)。如果希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的strong 元素变为红色。
12. 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
CSS每日学习笔记(2)的更多相关文章
- CSS每日学习笔记(3)
8.1.2019 1.CSS伪类:用于向某些选择器添加特殊的效果. 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. a ...
- CSS每日学习笔记(1)
7.30.2019 1.CSS 文本属性 属性 描述 color 设置文本颜色 direction 设置文本方向. line-height 设置行高. letter-spacing 设置字符间距. t ...
- CSS每日学习笔记(0)
7.29.2019 1. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- 【干货】Html与CSS入门学习笔记1-3
从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...
- (6)《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...
随机推荐
- 在中国实现自我价值的英国研究员——微软亚洲研究院英国籍研究员Darren的7年之路
"我和妻子在这儿已经待了7年了,这里的一切都很棒,无论是微软亚洲研究院还是北京."Darren笑着说,似乎他和中国,和北京,和研究院一直停留在"蜜月期",并未曾 ...
- python标准库:csv 模块
原文地址:http://www.bugingcode.com/blog/python_csv.html csv 模块被用来读取CSV格式(用逗号分割数值)的数据文件,CSV格式的文件经常在微软的Exc ...
- 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog
传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...
- Docker Linux下安装
下载脚本并运行安装: sudo wget -qO- https://get.docker.com/ | sh wget:下载文件工具, -q:不显示指令执行过程, -O-:-O-以'-'作为file参 ...
- linux记录每次登陆的历史命令
编辑/etc/profile,增加如下代码 #Record history operation USER_IP=`>/dev/null |awk '{print $NF}' |sed -e 's ...
- L53-Maximum-Subarray
题目描述 Find the contiguous subarray within an array (containing at least one number) which has the lar ...
- ansible使用指北(二)
前言在上一篇文章里我们了解了ansible的常用模块,今天我们来了解下ansible-playbook,ansbile-playbook是一系统ansible命令的集合,其利用yaml 语言编写,an ...
- Hexo搭建个人博客(一)— 前期准备
最近几个月自学python的过程中,搜索爬虫资料的时候关注了xlzd的博客,为我开启了一片新世界,之后慢慢收藏了各方高人的博客.搭建一个自己博客的萌芽也悄然种下,也许是命运使然,在逛知乎的时候偶然间看 ...
- Oracle最大进程连接数问题
问题描述 分析报告保存功能,在本地测试使用时可以正常保存:但是部署在客户现场的系统该功能无法保存成功(全部保存): ---->代码功能没有问题,问题应该在服务器配置或者数据库配置等方面出现问题: ...
- 初学Qt——程序打包(环境vs2012+qt5.1.0)
说来可笑,网上那么多的教程,偏偏结尾的时候就没有一个能详细的讲下关于程序的发布.开发Qt是这样,刚开始做web也是这样,因为是自学的,所以都没人可以教下,结果到了项目完成的最后总是要花费成吨的时间去查 ...