这是我参与「第五届青训营 」笔记创作活动的第14天
一:你必须掌握的
1、块状元素和内联元素
(1)块状元素
块元素一般是其他元素的的容器元素,块元素一般从新的一行开始,它可以容纳文本、内联元素和其他块状元素,通过width和height属性可以设置其大小,常见的块元素有 h标签 和p标签、div标签
番外:form标签也属于块标签并且只能容纳块级标签
(2)内联元素
内联元素非块级元素。内联元素只能容纳文本或者其他内联元素,不会独占一行,width和height对其不起作用,常见的内联元素有 a img span 等
2、盒子模型
3、css页面控制样式方法
(1)行内式
(2)内嵌式
(3)链接式
(4)导入式
优先级:
就近元素,行内>内嵌>链接>导入,在国内经前端经常用的是 链接式。
4、常用选择器
-标签选择器(div、p)
-id选择器(#)
-类选择器(.)
-通用选择器(*)
-伪类选择器(:link,:active,:hover,:visited)
优先级:
ID>类>标签>通用
5、文本流
文本流讲述的是一个概念性的东西,页面内的元素是:从上至下、从左自右的顺序进行排列的。
番外:
如何脱离文本流?
我们为了方便布局,通常使用浮动和定位的方式布局
即
float
position
6.浮动和定位
浮动:
float:left
float:right
定位:
position:absolute
position:relative
番外:
清除浮动:
-clear:both
-clear:left
-clear:right
浮动清除的并不是本元素的浮动,清除的是上级元素对于本元素的影响,我们可以讲页面整体分为三级
第一级是文本流 也就是页面默认的显示方式
第二级是浮动 它脱离文本流向上一层
第三级是定位 它是比浮动更高一级的为第三级
7.position
-absolute
-relative
-static
-Inherit
-Fixed
Absolute:绝对定位,绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块,绝对定位比较灵活如果你想,可以定位到浏览器的任意点
Relative: 相对定位,相对与父级盒子定位
static:默认的元素定位方式
inherit:继承父级盒子的position属性 这个没多大用,如果我们要继承的话,倒不如自己重写一个省的自己再找一遍元素。
Fixed:元素固定在浏览器body的一个位置,浏览器上拉下拉都不会改变位置
番外:一般网站都是都是以浮动为主,定位为辅,你们可以看看现在的淘宝网站。