提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
前端的第二种语言学习,与HTML绑定,同样为第一周学习内容。
一、CSS基础
1.CSS简介
CSS 的全称为:层叠样式表 ( Cascading Style Sheets ) 。
CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等。
- CSS的编写位置
2.1 行内样式
写在标签的 style 属性中,(又称:内联样式)。
语法:
注意点:
-
style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的形式。
-
行内样式表,只能控制当前标签的样式,对其他标签无效。
<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>
存在的问题:
书写繁琐、样式不能复用、并且没有体现出:结构与样式分离 的思想,不推荐大量使用,只
有对当前元素添加简单样式时,才偶尔使用。
2.2 内部样式
写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在
中。
- 此种写法:样式可以复用、代码结构清晰。
<style>
h1 {
color: red;
font-size: 40px;
}
</style>
存在的问题:
-
并没有实现:结构与样式完全分离。
-
多个 HTML 页面无法复用样式。
2.3 外部样式
写在单独的 .css 文件中,随后在 HTML 文件中引入使用。
语法:
- 新建一个扩展名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
h1{
color: red;
font-size: 40px;
}
- 在 HTML 文件中引入 .css 文件。
<link rel="stylesheet" href="./xxx.css">
注意点:
【1. 标签要写在 标签中。
- 标签属性说明:
href :引入的文档来自于哪里。
rel :( relation :关系)说明引入的文档与当前文档之间的关系。
-
外部样式的优势:样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速
度 ,实现了结构与样式的完全分离。 -
实际开发中,几乎都使用外部样式,这是最推荐的使用方式!】
-
样式表的优先级:优先级规则:行内样式 > 内部样式 = 外部样式
-
CSS语法规范:
二、CSS选择器
1.引入库
代码如下(示例):
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
2.读入数据
代码如下(示例):
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
该处使用的url网络请求的数据。
二、CSS选择器
1.CSS基本选择器
1.1 通配选择器
* {
属性名: 属性值;
}
1.2 元素选择器
/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}
1.3类选择器
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}
1.4 ID选择器
/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}
2、复合选择器:
①交集选择器
②并集选择器
③后代选择器
④子元素选择器
2.1 交集选择器
语法:选择器1选择器2选择器3…选择器n {}
作用:选中同时符合多个条件的元素。
/* 选中:类名为beauty的p元素,为此种写法用的非常多!!!! */
p.beauty {
color: blue;
}
/* 选中:类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
注意:
-
有标签名,标签名必须写在前面。
-
id 选择器、通配选择器,理论上可以作为交集的条件,但实际应用中几乎不用 —— 因为没
有意义。 -
交集选择器中不可能出现两个元素选择器,因为一个元素,不可能即是 p 元素又是 span 元
素。 -
用的最多的交集选择器是:元素选择器配合类名选择器,例如: p.beauty 。
2.2 并集选择器
作用:选中多个选择器对应的元素,又称:分组选择器。
语法:选择器1, 选择器2, 选择器3, … 选择器n {}
2.3 HTML元素间的关系
分为:①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。
- 父元素:直接包裹某个元素的元素,就是该元素的父元素。
- 子元素:被父元素直接包含的元素(简记:儿子元素)。
- 祖先元素:父亲的父亲…,一直往外找,都是祖先。
- 后代元素:儿子的儿子…,一直往里找,都是后代。
- 兄弟元素:具有相同父元素的元素,互为兄弟元素。
2.4 后代选择器
作用:选中指定元素中,符合要求的后代元素。
语法:选择器1 选择器2 选择器3 … 选择器n {} (先写祖先,再写后代)
2.5 子代选择器
作用:选中指定元素中,符合要求的子元素(儿子元素)。
语法:选择器1 > 选择器2 > 选择器3 > … 选择器n {}
2.6 兄弟选择器
相邻兄弟选择器
语法: 选择器1+选择器2 {} 。
作用:选中指定元素后,符合条件的相邻兄弟元素。
注意:所谓相邻,就是紧挨着他的下一个
通用兄弟选择器
作用:选中指定元素后,符合条件的所有兄弟元素。
语法: 选择器1~选择器2 {} 。
2.7 属性选择器
作用:选中属性值符合一定要求的元素。
语法:
-
[属性名] 选中具有某个属性的元素。
-
[属性名=“值”] 选中包含某个属性,且属性值等于指定值的元素。
-
[属性名^=“值”] 选中包含某个属性,且属性值以指定的值开头的元素。
-
[属性名$=“值”] 选中包含某个属性,且属性值以指定的值结尾的元素。
-
[属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。
/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}
2.8 伪类选择器
作用:选中特殊状态的元素。(如何理解“伪” ? — 虚假的,不是真的。
如何理解“伪类”? — 像类( class ),但不是类,是元素的一种特殊状态。 )
一、动态伪类:
-
:link 超链接未被访问的状态。
-
:visited 超链接访问过的状态。
-
:hover 鼠标悬停在元素上的状态。
-
:active 元素激活的状态。(什么是激活?—— 按下鼠标不松开。)
-
:focus 获取焦点的元素。(表单类元素才能使用 :focus 伪类。当用户:点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式,选择元素时,就是获得焦点。)
二、结构伪类
-
:first-child 所有兄弟元素中的第一个。
-
:last-child 所有兄弟元素中的最后一个。
-
:nth-child(n) 所有兄弟元素中的第 n 个。
-
:first-of-type 所有同类型兄弟元素中的第一个。
-
:last-of-type 所有同类型兄弟元素中的最后一个。
-
:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
三、否定伪类:
:not(选择器) 排除满足括号中条件的元素。
四、UI伪类:
-
:checked 被选中的复选框或单选按钮。
-
:enable 可用的表单元素(没有 disabled 属性)。
-
:disabled 不可用的表单元素(有 disabled 属性)。
2.9 伪元素选择器
作用:选中元素中的一些特殊位置。
常用伪元素:
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。
::after 在元素最后的位置,创建一个子元素(必须用 content 属性指定内容)。
3. 选择器的优先级(权重)
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。
CSS三大特性
1.层叠性
概念:如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆
盖)。
2. 继承性
概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则:优先继承离得近的。
常见的可继承属性:
3. 优先级
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样
式。
四、CSS常用属性
1. 像素的概念
概念:我们的电脑屏幕是,是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)。
规律:像素点越小,呈现的内容就越清晰、越细腻。
2. 颜色的表示
2.1 表示方式一:颜色名
编写方式:直接使用颜色对应的英文单词,编写比较简单,例如:
-
红色:red
-
绿色:green
-
蓝色:blue
-
紫色:purple
-
橙色:orange
-
灰色:gray
2.2 表示方式二:rgb 或 rgba
编写方式:使用 红、黄、蓝 这三种光的三原色进行组合。
r 表示 红色
g 表示 绿色
b 表示 蓝色
a 表示 透明度
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色(用的少) */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
2.3 表示方式三:HEX 或 HEXA
HEX 的原理同与 rgb 一样,依然是通过:红、绿、蓝色 进行组合,只不过要用 6位(分成3组) 来
表达,格式为:# rrggbb
每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,
d, e, f )
所以每一种光的最小值是: 00 ,最大值是: ff【16进制】
2.4 表示方式四:HSL 或 HSLA(用得比较少)
HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
色相:取值范围是 0~360 度,具体度数对应的颜色如下图:
饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有
灰)
亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是
白色了)
HSLA 其实就是在 HSL 的基础上,添加了透明度。
3. CSS字体属性
3.1 字体大小
属性名: font-size
作用:控制字体的大小。
语法:div {
font-size: 40px;
注意点:
-
Chrome 浏览器支持的最小文字为 12px ,默认的文字大小为 16px ,并且 0px 会自动
消失。 -
不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大
小。 -
通常以给 body 设置 font-size 属性,这样 body 中的其他元素就都可以继承了。
3.2 字体族
属性名: font-family
作用:控制字体类型。
语法:
div {
font-family: "STCaiyun","Microsoft YaHei",sans-serif
}
注意:
-
使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里
去寻找。 -
如果字体名包含空格,必须使用引号包裹起来。
-
可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面
的,且通常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体)。 -
windows 系统中,默认的字体就是微软雅黑。
3.3 字体风格
属性名: font-style
作用:控制字体是否为斜体。
常用值:
-
normal :正常(默认值)
-
italic :斜体(使用字体自带的斜体效果)
-
oblique :斜体(强制倾斜产生的斜体效果)
3.4 字体粗细
属性名: font-weight
作用:控制字体的粗细。
常用值:
关键词
-
lighter :细
-
normal : 正常
-
bold :粗
-
bolder :很粗 (多数字体不支持)
数值:
-
100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的
精确程度)。 -
100~300 等同于 lighter , 400~500 等同于 normal , 600 及以上等同于
bold 。
3.5 字体复合写法
属性名: font ,可以把上述字体样式合并成一个属性。
作用:将上述所有字体相关的属性复合在一起编写。
编写规则:
-
字体大小、字体族必须都写上。
-
字体族必须是最后一位、字体大小必须是倒数第二位。
-
各个属性间用空格隔开。
实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 font
size
属性。
4. CSS文本属性
4.1 文本颜色
属性名: color
作用:控制文字的颜色。
可选值:
-
颜色名
-
rgb 或 rgba
-
HEX 或 HEXA (十六进制)
-
HSL 或 HSLA
开发中常用的是: rgb/rgba 或 HEX/HEXA (十六进制)。
4.2 文本间距
字母间距: letter-spacing
单词间距: word-spacing (通过空格识别词)
属性值为像素( px ),正值让间距增大,负值让间距缩小。
4.3 文本修饰
属性名: text-decoration
作用:控制文本的各种装饰线。
可选值:
-
none : 无装饰线(常用)
-
underline :下划线(常用)
-
overline : 上划线
-
line-through : 删除线
可搭配如下值使用: -
dotted :虚线
-
wavy :波浪线
-
也可以指定颜色
4.4 文本缩进
属性名: text-indent 。
作用:控制文本首字母的缩进。
属性值: css 中的长度单位,例如: px
4.5 文本对齐_水平
属性名: text-align 。
作用:控制文本的水平对齐方式。
常用值:
-
left :左对齐(默认值)
-
right :右对齐
-
center :居中对齐
4.6 细说 font-size
- 由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能
小。
例如: font-size 设为 40px ,最终呈现的文字,可能比 40px 大,也可能比 40px
小。
- 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。
4.7 行高
属性名: line-height
作用:控制一行文字的高度。
可选值:
-
normal :由浏览器根据文字大小决定的一个默认值。
-
像素( px )。
-
数字:参考自身 font-size 的倍数(很常用)。
-
百分比:参考自身 font-size 的百分比。
备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响
观感。
4.8 文本对齐_垂直
-
顶部:无需任何属性,在垂直方向上,默认就是顶部对齐。
-
居中:对于单行文字,让 height = line-height 即可。
4.9 vertical-align
属性名: vertical-align 。
作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式。
常用值:
-
baseline (默认值):使元素的基线与父元素的基线对齐。
-
top :使元素的顶部与其所在行的顶部对齐。
-
middle :使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
-
bottom :使元素的底部与其所在行的底部对齐。
5. CSS列表属性
列表相关的属性,可以作用在 ul 、 ol 、 li 元素上。
list-style-type:设置列表符号
常用值:none:不显示前面的标识;square:实心方块;disc:圆形;decimal :数字;lower-roman :小写罗马字;upper-roman :大写罗马字;lower-alpha :小写字母;upper-alpha :大写字母;
6. CSS表格属性
- 边框相关属性(其他元素也能用):
border-width 边框宽度 CSS 中可用的长度值;
border-color 边框颜色 CSS 中可用的颜色值;
border-style 边框风格:none 默认值,solid 实线,dashed 虚线,dotted 点线,double 双实线;
border 边框复合属性 没有数量、顺序的要求;
- 表格独有属性(只有 table 标签才能使用):
table-layout 设置列宽度:auto :自动,列宽根据内容计算(默认值);fixed :固定列宽,平均分。
border-spacing 单元格间距CSS 中可用的长度值。生效的前提:单元格边框不能合并。
border-collapse 合并单元格边框:collapse :合并;separate :不合并。
empty-cells隐藏没有内容的单元格:show :显示,默认hide :隐藏。
生效前提:单元格不能合并。
caption-side 设置表格标题位置:top :上面(默认值)bottom :在表格下面
7. CSS背景属性
8. CSS鼠标属性
五、CSS盒子模型
1.CSS长度单位
1.px:像素。
2.em:相对像素font-size的倍数。
3.rem:相对根字体的大小,html标签就是根。
4.%:相对父元素计算。
2.元素的显示模式
块元素(block)
又称:块级元素
特点:
-
在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
-
默认宽度:撑满父元素。
-
默认高度:由内容撑开。
-
可以通过 CSS 设置宽高。
行内元素(inline)
又称:内联元素
特点:
-
在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。 -
默认宽度:由内容撑开。
-
默认高度:由内容撑开。
-
无法通过 CSS 设置宽高。
行内块元素(inline-block)
又称:内联块元素
特点:
-
在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。 -
默认宽度:由内容撑开。
-
默认高度:由内容撑开。
-
可以通过 CSS 设置宽高。
3.总结各元素的显示模式
块元素(block)
1.主体结构标签:、
2.排版标签:
——
3.列表标签:
4.表格相关的标签:
5.
行内元素(inlint)
1.文本标签:
(上标) (下标) (del语义为删除的内容) (ins的语义的插入文档的内容)
2.和
行内块元素(inline-block)
1.图片:
2.单元格:
3.表单控件:
4.框架标签:
4. 修改元素的显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式,常用值如下:
none 元素会被隐藏。
block 元素将作为块级元素显示。
inline 元素将作为内联元素显示。
inline-block 元素将作为行内块元素显示。
5. 盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子,所有的样式也都是基于这个盒子。
-
margin(外边距): 盒子与外界的距离。
-
border(边框): 盒子的边框。
-
padding(内边距): 紧贴内容的补白区域。
-
content(内容):元素中的文本或后代元素都是它的内容。
6. 盒子内容区(content)
width 设置内容区域宽度 长度
max-width 设置内容区域的最大宽度 长度
min-width 设置内容区域的最小宽度 长度
height 设置内容区域的高度 长度
max-height 设置内容区域的最大高度 长度
min-height 设置内容区域的最小高度 长度
7. 关于默认宽度
所谓的默认宽度,就是不设置 width 属性时,元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右
padding 。
8. 盒子内边距(padding)
CSS属性名:padding-top,padding-bottom,padding-right,padding-left,padding。
padding:x;四个方向都是x
padding:x y;上下为x,左右为y;
padding:x y z;上为x,左右为y,下为z;
padding:x y z u;上为x,右为y,下为z,左为u;
注意点:
-
padding 的值不能为负数。
-
行内元素 的 左右内边距是没问题的,上下内边距不能完美的设置。
-
块级元素、行内块元素,四个方向内边距都可以完美设置。
9. 盒子边框(border)
CSS属性名:
1.border-style:边框线风格——none(默认值)、solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)
2.border-width:边框线得宽度——默认为3px;
3.border-color:边框的颜色——默认为黑色;
4.border:复合属性——没有顺序和要求;
根据方位还有:
border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
10. 盒子外边距_margin
CSS属性名:margin-left,margin-right,margin-top,margin-bottom,margin。
10.1 margin 注意事项
-
子元素的 margin ,是参考父元素的 content 计算的。(因为是父亲的 content 中承装着
子元素) -
上 margin 、左 margin :影响自己的位置;下 margin 、右 margin :影响后面兄弟元素
的位置。 -
块级元素、行内块元素,均可以完美地设置四个方向的 margin ;但行内元素,左右
margin 可以完美设置,上下 margin 设置无效。
-
margin 的值也可以是 auto ,如果给一个块级元素设置左右 margin 都为 auto ,该块级
元素会在父元素中水平居中。 -
margin 的值可以是负值。
10.2 margin 塌陷问题
什么是 margin 塌陷?
第一个子元素的上 margin 会作用在父元素上,最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷?
方案一: 给父元素设置不为 0 的 padding 。
方案二: 给父元素设置宽度不为 0 的 border 。
方案三:给父元素设置 css 样式 overflow:hidden
11. 处理内容溢出
overflow:溢出内容的处理方式
其属性:
1.visible——显示,默认值;
2.hidden——隐藏;
3.scroll——显示滚动条,不论内容是否溢出;
4.aoto——自动显示滚动条,内容不溢出不显示。
12. 隐藏元素的方式
方式一:visibility 属性
visibility 属性默认值是 show ,如果设置为 hidden ,元素会隐藏。
元素看不见了,还占有原来的位置(元素的大小依然保持)。
方式二: display 属性
设置 display:none ,就可以让元素隐藏。
彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。
13.布局技巧
1.如何让子元素,在父亲中水平居中:
若子元素为块元素,给父元素加上:margin:0 auto;
若子元素为行内元素、行内块元素,给父元素加上:text-align:center;
2.如何让子元素在父亲中垂直居中:
若子元素为块元素,给子元素加上: margin-top ,值为:(父元素 content -子元素盒子
总高) / 2。
若子元素为行内元素、行内块元素:让父亲的height=line-height,每个子元素都加上:vertical-align:middle;
若想绝对垂直居中,父元素中font-size设置为0;
14.元素之间的空白问题
产生的原因:
行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案:
-
方案一: 去掉换行和空格(不推荐)。
-
方案二: 给父元素设置 font-size:0 ,再给需要显示文字的元素,单独设置字体大小(推
荐)。
15.行内块的幽灵空白问题
产生原因:
行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
解决方案:
方案一: 给行行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、
top 均可。
方案二: 若父元素中只有一张图片,设置图片为 display:block 。
方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置 font
size。
六、浮动
1. 浮动的简介
在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
2.元素浮动后的特点
3.解决浮动产生的影响
3.1影响
对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟
无影响。
对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元
素。
4.2解决浮动产生的影响
方案一:给父元素指定高度;
方案二:给父元素也设置浮动,但会带来其他影响;
方案三:给父元素设置overflow:hidden;
方案四:在所有浮动元素的最后面,添加一个块级元素,并给块级元素设置clear:both;
方案五:给发动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。
.parent::after {
content: "";
display: block;
clear:both;
}
七、 定位
1.相对定位
1.1如何设置相对定位?
给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
1.2相对定位的参考点在哪?
相对自己原来的位置
1.3 相对定位的特点:
-
不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
-
定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
默认规则是:
定位的元素会盖在普通元素之上。
都发生定位的两个元素,后写的会盖在先写的元素之上。 -
left 不能和 right 一起设置, top 和 bottom 不能一起设置。
-
相对定位的元素,也能继续浮动,但不推荐这样做。
-
相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。
2.绝对定位
2.1 如何设置绝对定位?
给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
2.2 绝对定位的参考点在哪里?
参考它的包含块。
2.3 绝对定位元素的特点:
-
脱离文档流,会对后面的兄弟元素、父元素有影响。
-
left 不能和 right 一起设置, top 和 bottom 不能一起设置。
-
绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
-
绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
-
无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
定位元素:默认宽、高都被内容撑开,且能自由设置宽高。
3.固定定位
3.1如何设置为固定定位?
给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
3.2 固定定位的参考点在哪里?
参考它的视口
3.3 固定定位元素的特点
-
脱离文档流,会对后面的兄弟元素、父元素有影响。
-
left 不能和 right 一起设置, top 和 bottom 不能一起设置。
-
固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
-
固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
-
无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
4.粘性定位
4.1 如何设置为粘性定位?
给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过最常用的是 top 值。
4.2 粘性定位的参考点在哪里?
离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
假如没有设置滚动条,那就是body。
4.3 粘性定位元素的特点
不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置,但不推荐这样做。
粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做。
网页效果:
5. 定位层级
-
定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
-
如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
-
可以通过 css 属性 z-index 调整元素的显示层级。
-
z-index 的属性值是数字,没有单位,值越大显示层级越高。
-
只有定位的元素设置 z-index 才有效。
-
如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。
6. 定位的特殊应用注意:
注意:
{1. 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设
置宽高。
-
发生相对定位后,元素依然是之前的显示模式。
-
以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。}
让定位元素的宽充满包含块
-
块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0 。
-
高度想与包含块一致, top 和 bottom 设置为 0 。
让定位元素在包含块中居中
方案一:
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
方案二(不推荐):
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
注意:该定位的元素必须设置宽高!!!
八、布局
1. 版心
在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页
的版心。
版心的宽度一般是 960 ~ 1200 像素之间。
版心可以是一个,也可以是多个。
2. 常用布局名词
顶部导航条 topbar
页头 header 、 page-header
导航 nav 、 navigator 、 navbar
搜索框 search 、 search-box
横幅、广告、宣传图 banner
主要内容 content 、 main
侧边栏 aside 、 sidebar
页脚 footer 、 page-footer
3. 重置默认样式
方案一:使用全局选择器:此种方法,在简单案例中可以用一下,但实际开发中不会使用,因为 * 选择的是所有元素,而并
不是所有的元素都有默认样式;而且我们重置时,有时候是需要做特定处理的,比如:想让 a 元
素的文字是灰色,其他元素文字是蓝色。
方案二:reset.css:选择到具有默认样式的元素,清空其默认的样式。
经过 reset 后的网页,好似“一张白纸”,开发人员可根据设计稿,精细的去添加具体的样式。(需要自己下载)
方案三:Normalize.css :
Normalize.css 是一种最新方案,它在清除默认样式的基础上,保留了一些有价值的默认样式。
官网地址:http://necolas.github.io/normalize.css/