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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从《黑客帝国》说起,我们如何证明这个世界不是一个系统?

大数据文摘出品来源&#xff1a;nautil尽管《黑客帝国》第四部带给我们的震撼已不如前作&#xff0c;但我们仍能回想起20多年前看第一部时的激动。以及那样的一部作品带给我们的思考。正如在电影开头&#xff0c;尼奥的身体和大脑封锁在一个非模拟世界的吊舱里&#xff0c;与另…

day05_vue路由

文章目录1.路由的概念2.前端路由的初体验3.Vue Router简介4.Vue Router的使用步骤(★★★)5.嵌套路由&#xff0c;动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由&#xff1a;给路由取别名B.编程式导航(★★★)8.实现后…

QNX下挂载USB设备

你应用命令 #io-usb 之后&#xff0c;应该将你的虚拟机菜单下的"VM”里面有"removable Device” 将列出的设备中你插入的usb设备选择"connect",之后在vmare右下角会有usb设备插入的标志。 此时你再使用 #usb 会显示你插入的usb设备的类型信息&#xff0c;很…

Meta旨在打造世界上最快的人工智能超级计算机

来源&#xff1a;ScienceAI编辑&#xff1a;萝卜皮Facebook 的母公司 Meta 表示&#xff0c;它已经建造了一台世界上最快的研究超级计算机。Meta 研究人员 Kevin Lee 和 Shubho Sengupta 在今天的博客文章中写道&#xff0c;到今年年中&#xff0c;系统的扩展完成后&#xff0c…

day07-vue项目-搭建项目到登录功能

文章目录1.电商业务概述2.项目初始化3.码云相关操作B.安装gitD.在本地创建公钥&#xff1a;在终端运行&#xff1a;ssh-keygen -t rsa -C "xxxxxx.com"4.配置后台项目A.安装phpStudy并导入mysql数据库数据B.安装nodeJS&#xff0c;配置后台项目,从终端打开后台项目vu…

SSE,MSE,RMSE,R-square指标讲解

SSE(和方差、误差平方和)&#xff1a;The sum of squares due to errorMSE(均方差、方差)&#xff1a;Mean squared errorRMSE(均方根、标准差)&#xff1a;Root mean squared errorR-square(确定系数)&#xff1a;Coefficient of determinationAdjusted R-square&#xff1a;D…

互联互通下的超级App价值重构

来源&#xff1a;虎嗅APP题图&#xff1a;视觉中国站在岁末回看&#xff0c;这过去的一年&#xff0c;发生了无数影响深远的事件&#xff1a;反垄断政策落地、用户存量争夺愈演愈烈、商业创新乏力……互联网人突然发现&#xff0c;以往基于流量的增长打法逐渐失灵。与此同时&am…

css_01_承接部分html+css快速入门

文章目录HTML标签&#xff1a;表单标签CSS&#xff1a;页面美化和布局控制概念css与html结合选择器-基础选择器选择器-扩展选择器属性案例&#xff1a;1. HTML标签&#xff1a;表单标签2. CSS&#xff1a;HTML标签&#xff1a;表单标签 * 表单&#xff1a;* 概念&#xff1a;用…

WCF进阶:将编码后的字节流压缩传输

在前面两篇文章WCF进阶&#xff1a;将消息正文Base64编码和WCF进阶:为每个操作附加身份信息中讲述了如何通过拦截消息的方式来记录或者修改消息&#xff0c;这种方式在特定条件下可以改变消息编码格式&#xff0c;但实现方式并不规范&#xff0c;而且使用范围也有限制。 WCF缺省…

物理学四大神兽,除了“薛定谔的猫”, 你还知道哪几个?

来源 &#xff1a; 逗逼的500T硬盘物理学是一门研究物质运动最一般规律和物质基本结构的学科。分为纯物理学和多学科物理学&#xff0c;其中的纯物理学又分为&#xff1a;1.经典力学&#xff1b;2.热力学和统计力学&#xff1b;3.电磁学&#xff1b;4.相对论&#xff1b;5.量子…

JDBC-01-快速入门

文章目录01 JDBC快速入门02 JDBC各个类详解03 JDBC之CRUD练习04 ResultSet类详解05 JDBC登录案例练习抽取JDBC工具类 &#xff1a; JDBCUtils练习06 PreparedStatement类详解07 JDBC事务管理目标 1. JDBC基本概念 2. 快速入门 3. 对JDBC中各个接口和类详解 01 JDBC快速入门 1…

Synchronized 关键字的用法

第一条:当一个线程访问某对象的synchronized方法或者synchronized代码块时&#xff0c;其他线程对该对象的该synchronized方法或者synchronized代码块的访问将被阻塞。 public class MoreThread {public static void main(String[] args) {Piao piao new Piao();Thread t1 n…

研究速递:预测学习——神经元高效运作的最佳策略

来源&#xff1a;集智俱乐部作者&#xff1a;袁郭玲、梁金编辑&#xff1a;邓一雪摘要了解大脑如何学习有助于制造具有与人类类似智力水平的机器。之前有理论提出&#xff0c;大脑可能是根据预测编码的原理运行。然而&#xff0c;对于预测系统如何在大脑中实现还没有很好的解释…

Element-UI-快速入门(极简教程)

文章目录4. ElementUI4.1 ElementUI介绍4.2 常用组件4.2.1 Container 布局容器4.2.2 Dropdown 下拉菜单4.2.3 NavMenu 导航菜单4.2.4 Table 表格4.2.5 Pagination 分页4.2.6 Message 消息提示4.2.7 Tabs 标签页4.2.8 Form 表单4. ElementUI 4.1 ElementUI介绍 ElementUI是一套…

centos 6.5 防火墙开放指定端口

清除防火墙规则&#xff1a;iptables -F 关闭防火墙 /etc/init.d/iptables stop 关闭防火墙开机自启&#xff1a;chkconfig iptables off 查看iptables 是否开启&#xff1a;Chkconfig –list | grep iptables iptables 0:关闭 1:关闭 2:启用 3:关闭 4:启用 5:关闭 6:关…

破解人工智能系统的四种攻击方法!

来源&#xff1a;未来科技前沿没有人喜欢早上起床&#xff0c;但现在人工智能驱动的算法可以设置我们的闹钟、管理我们家中的温度设置以及选择适合我们心情的播放列表&#xff0c;贪睡按钮的使用越来越少。人工智能安全辅助系统使我们的车辆更安全&#xff0c;人工智能算法优化…

PowerDesigner-快速入门(极简教程)

文章目录3. PowerDesigner3.1 PowerDesigner介绍3.2 PowerDesigner使用3.2.1 创建物理数据模型3.2.2 从PDM导出SQL脚本3.2.3 逆向工程3.2.4 生成数据库报表文件3. PowerDesigner 3.1 PowerDesigner介绍 PowerDesigner是Sybase公司的一款软件&#xff0c;使用它可以方便地对系…

关于dev无法更新、调试的问题

转载于:https://www.cnblogs.com/IcefishBingqing/p/5109876.html

MIT发布白皮书:美国欲重返世界半导体霸主!

来源&#xff1a;新智元编辑&#xff1a;时光 David近年来&#xff0c;全球芯片的持续性短缺已引发了一连串的产能瓶颈问题。各种消费品的价格都随着「缺芯」而上升&#xff0c;从CPU到显卡&#xff0c;从智能冰箱到SUV&#xff0c;这凸显出半导体在日常生活种所扮演的重要作用…

dubbo-快速入门-分布式RPC框架Apache Dubbo

文章目录分布式RPC框架Apache Dubbo1. 软件架构的演进过程1.1 单体架构1.2 垂直架构1.3 SOA架构1.4 微服务架构2. Apache Dubbo概述2.1 Dubbo简介2.2 Dubbo架构3. 服务注册中心Zookeeper3.1 Zookeeper介绍3.2 安装Zookeeper3.3 启动、停止Zookeeper4. Dubbo快速入门4.1 服务提供…