欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 前端技术 > CSS >内容正文

CSS

CSS每日学习笔记(2)

发布时间:2024/7/5 CSS 5 豆豆
如意编程网 收集整理的这篇文章主要介绍了 CSS每日学习笔记(2) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

7.31.2019

1.CSS定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

 

CSS 定位属性允许你对元素进行定位。

属性

描述

position

把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top

定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right

定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom

定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left

定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow

设置当元素的内容溢出其区域时发生的事情。

clip

设置元素的形状。元素被剪入这个形状之中,然后显示出来。

vertical-align

设置元素的垂直对齐方式。

z-index

设置元素的堆叠顺序。

 

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 元素拥有共同的父元素”。

转载于:https://www.cnblogs.com/zccfrancis/p/11284139.html

总结

以上是如意编程网为你收集整理的CSS每日学习笔记(2)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。