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学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...
随机推荐
- log4j简单的使用
1.引入log4j.jar包 2.在类中使用 package com.donghai.log4j; import org.apache.log4j.Logger; public class LogTe ...
- POJ 2226 Muddy Fields 二分图(难点在于建图)
题意:给定一个矩阵和它的N行M列,其中有一些地方有水,现在有一些长度任意,宽为1的木板,要求在板不跨越草,用一些木板盖住这些有水的地方,问至少需要几块板子? 思路:首先想到如果没有不准跨越草的条件则跟 ...
- LoraLU
一.定义动画过程中形成的状态用transform transform 分为2D 和 3D,主要包含以下几种变换:旋转rotate.扭曲skew.缩放scale和移动 translate以及矩阵变形ma ...
- Hi3518_SDK
第一章 Hi3518_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章 首次安装SDK 1.Hi3518 SDK包位置 在"Hi3518_V10 ...
- 【WPF学习】第五十一章 动画缓动
线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地 ...
- 02ARM体系结构
1.哈佛结构和冯式结构 8086: 冯氏结构 相同存储RAM相同的通道 统一编址 区别:运行态与存储态 STM32F103:哈弗结构 不同的存储不同的通道 统一编址 8051: 改进型的哈弗结构 不 ...
- Jessica's Reading Problem POJ - 3320
Jessica's Reading Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17562 Accep ...
- 【,NetCore】WebApi使用统一时间格式
1.在Startup中配置统一时间格式 services.AddMvc() .AddJsonOptions(options => { //配置时间序列化格式 options.Serializer ...
- 《一步步成为 Hacker_Day 01》
环境搭建 传统运行模式 - 一台机器同时只能运行一个操作系统 |:----------|----------:| | 应用程序 | 应用程序 | |:----------|----------:| | ...
- Serializable详解(1):代码验证Java序列化与反序列化
说明:本文为Serializable详解(1),最后两段内容在翻译上出现歧义(暂时未翻译),将在后续的Serializable(2)文中补充. 介绍:本文根据JDK英文文档翻译而成,本译文并非完全按照 ...