目录
前瞻:基础认知:
1.1 基础认知:
1、网页组成
2、基础认知
3、渲染引擎(浏览器内核)
4、Web标准三个构成:
2.1 HTML
1、HTML页面固定结构
2、开发工具
3、HTML语法规范
注释:
标签:
格式:
结构说明:
父子关系:
兄弟关系:
4、基本标签
3.1 路径的介绍
绝对路径:
相对路径:
4.1 标签
一、列表标签
二、表格标签
四、语义化标签
五、字符实体
一:CSS基础认知
1.1 css的介绍
二、基础选择器
1.2 标签选择器
1.3 类选择器
1.4 id选择器
1.5 通配符选择器
三、字体和文本样式
1.1 字体大小
1.2 字体粗细
1.3 字体样式(是否倾斜)
1.5 字体系列 font-family
1.4 常见字体系列(了解)
1.6 样式的层叠问题
1.7 字体font相关属性的连写
2.1 文本缩进
2.2 文本水平对齐方式
2.4 水平居中方法总结text-align: center
2.3 文本修饰
3.1 行高
拓展 颜色常见取值(了解)
拓展 标签水平居中方法总结 margin:0 auto
二:CSS进阶学习
一、选择器进阶
1.1 后代选择器:空格
1.2 子代选择器:>
2.1 并集选择器:,
3.1 交集选择器:紧挨着
4.1 hover伪类选择器
5.1 emmet语法
二、背景相关属性
1.1 背景颜色
2.1 背景图片
3.1 背景平铺
4.1 背景位置
5.1 背景相关属性的连写形式
三、元素的显示模式
1.1 块级元素
2.1 行内元素
3.1 行内块元素
4.1 元素显示模式转换
拓展1:
HTML嵌套规范注意点
1.1 继承性的介绍
2.1 层叠性的介绍
3.1 优先级介绍
3.2 权重叠加计算
三、盒子模型
1.1 盒子模型的介绍
2.1 内容的宽度和高度
3.1 边框(border) --- 连写形式
3.2 边框(border) --- 单方向设置
3.3 边框(border) --- 单个属性
(案例)新浪导航案例
3.4 内边距
4.3 盒子实际大小终极计算公式
4.5 CSS3盒模型(自动内减)
5.1 外边距
5.4 清楚默认的内外边距
5.7 外边距折叠现象---1合并现象
5.8 外边距折叠现象---2塌陷现象
5.5 行内标签垂直位置修改
四、伪类选择器,伪元素,标准流,浮动
一、结构伪类选择器
二、伪元素
三、标准流
四、浮动
1.1 浮动的作用
3.1 浮动的特点
(案例)小米模块案例
五、清除浮动
1.1 清除浮动的介绍
2.1 清除浮动的方法---1直接设置父元素高度
2.2 清除浮动的方法---2额外标签法
2.3 清除浮动的方法---3单伪元素清除法
文字、图片、音频、视频、超链接
浏览器:是网页显示、运行的平台,是前端开发必备利器
常见的五大浏览器:IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器(苹果浏览器)、Opera浏览器(欧朋浏览器)
注意:因为不同浏览器渲染引擎不同,解析的效果会存在差异
定义:浏览器中专门对代码进行解析渲染的部分
浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
FireFox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Blink其实是Webkit的分支
注意:渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同的
HTML:负责结构(内容),页面元素和内容
CSS:负责表现,网页元素的外观和位置等页面样式(如颜色、大小等)
JavaScript:负责行为,网页模型的定义与页面交互
HTML(Hyper Text Markup Language)中文翻译为:超文本标记语言
网页的标题 网页的主体内容
使用VS code快捷方式:
创建HTML5创建骨架结构:先输入“!”,后敲击Tab即可快速创建HTML骨架结构。
格式:
在VS Code中: 将光标定位到注释部分,使用Ctrl+/,同理,取消注释也是使用Ctrl+/。
文字要变粗 | ||
---|---|---|
开始标签 | 包裹的内容 | 结束标签 |
1、标签由<、>、/、英文单词或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名。
2、常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。
3、少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
标签之间的关系有:
eg:
eg:
标题标签:
格式:
vs code特性:
输入"h1"后,键入Tab。
使用“ctrl+D"快捷键可以快速选择附近相同单词。
段落标签:
格式:
段落内容
vs code特性:
段落之间存在间隙,且独占一行。
可以使用查看菜单里面的自动换行来查看代码。
换行标签:
格式:
vs code特征:在文本内容中直接输入即可。
水平分割线:
格式:
vs code特征:在
等代码中直接输入即可。文本格式化标签:
标签 强调突出 说明
b strong 加粗
u ins 下划线
i em 倾斜
s del 删除线
媒体标签:
图片标签格式:
vs code特征:
单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置;
src指文件路径(URL),eg-->"./1.jpg";
alt指替换文本,当src路径下文件不能显示的时候将显示alt属性的值。
title指当前标签的值,当鼠标定位到当前标签5秒左右会出现。
width或height指图片宽高,一般调整一个值即可。
音频标签:
音频标签格式:
提示:src指音频的路径,controls指显示播放的控件,autoplay指自动播放(部分浏览器不支持),loop指循环播放.
视频标签:
视频标签格式(支持MP4、WebM、Ogg)格式文件:
file:///D:/APP/Typora/Typora/resources/app//window.html
提示:src指音频的路径,controls指显示播放的控件,autoplay指自动播放(谷歌浏览器中需配合muted实现禁音播放),loop指循环播放.
链接标签:
链接标签格式:
超链接
eg:跳转到百度
提示:href指跳转地址,_target可取值 _self(默认值,在当前窗口中跳转---覆盖原网页) 或者 _blank(在新窗口中跳转---保留原网页) 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接)
定义:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
eg:D:\day01\images\1.jpg
定义:从当前文件开始出发找目标文件的过程
分类:
1.同级别
eg:"目标文件.jpg"与"./目标文件.jpg"
2.下级别
eg:“目标图片父目录/目标图片.jpg"
3.上机别
eg:“../目标文件.jpg”
场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
特点:按照行的方式,整齐显示内容
种类:无序列表、有序列表、自定义列表
2.1 无序列表
场景:
在网页中表示一组无顺序之分的列表,如:新闻列表。
标签组成:
标签名 说明
ul 表示无序列表的整体,用于包裹标签
li 表示无序列表的每一项,用于包含每一行的内容
显示特点:
列表的每一项前默认显示原点标识
注意点:
ul标签中只允许包含li标签,li标签可以包含任意内容
3.1 有序列表
场景:
在网页中表示一组有顺序之分的列表,如:排行榜。
标签组成:
标签名 说明
ol 表示有序列表的整体,用于包裹标签
li 表示有序列表的每一项,用于包含每一行的内容
显示特点:
列表的每一项前默认显示序号标识
注意点:
ol 标签中只允许包含li标签,li标签可以包含任意内容
4 .1 自定义列表
场景:
在网页的底部导航中通常会使用自定义列表实现
标签组成:
标签名 说明
dl 表示自定义列表的整体,用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
显示特点:
dd前会默认显示缩进效果
注意点:
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
目标:能够使用表格相关标签和属性,实现网页中表格结构的搭建
1.1 表格的基本标签
场景:
在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
基本标签:
标签名 说明
table 表格整体,可用于包裹多个tr
tr 表格每行,可用于包裹td
td 表格单元格,可用于包裹内容
注意点:
标签的嵌套关系:table > tr > td
2.1 表格的相关属性
场景:
设置表格基本展示效果
常见相关属性:
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
注意点:
实际开发时针对于样式效果推荐用css设置
3.1 表格标题和表头单元格标签
场景:
在表格中表示整体大标题和一列小标题
其他标签:
标签名 名称 说明
caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
注意点:
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)
4.1 表格的结构标签(了解)
场景:
让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
结构标签:
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
注意点:
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
引申:
vs code鼠标选择多行后,使用tab键可以整体向后移动,鼠标选择多行后,使用shift+tab键可以整体向左移动。
5.1 合并单元格-思路
场景:将水平或垂直多个单元格合并成一个单元格
5.2 合并单元格-代码实现
合并单元格步骤:
1、明确合并哪几个单元格
2、通过左上原则,确定保留谁删除谁
上下合并-->只保留最上的,删除其他
左右合并-->只保留最左的,删除其他
3、给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并,将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并,将多列的单元格水平合并
注意点:
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)
目标:能够认识开发中常用的没有语义布局标签(div、span)和 有语义的布局标签
学习路径:
1、没有语义的布局标签
2、有语义的布局标签(了解)
1.1 没有语义的布局标签-div和span
场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
2.1 有语义的布局标签(了解)
场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用
标签:
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
注意点:
以上标签显示特点和div一致,但是比div多了不同的语义
目标:能通过字符实体在网页中显示特殊符号
学习路径:
1、HTML中的空格合并现象
2、常见字符实体
2.常见的字符实体
场景:在网页中展示特殊符号效果时,需要使用字符实体替代
结构:&英文
常见字符实体:
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | & nbsp; | |
< | 小于号 | & lt; |
> | 大于号 | & gt; |
& | 和号 | & amp; |
" | 引号 | & quout; |
' | 撇号 | & apos;(IE不支持) |
¢ | 分(cent) | & cent; |
£ | 镑(pound) | & pound; |
¥ | 元(yen) | & yen; |
€ | 欧元(euro) | & euro; |
§ | 小节 | & sect; |
© | 版权(copyright) | & copy; |
css:层叠样式表(Cascading style sheets)
css作用是什么??
目标:理解选择器的作用,能够使用基础选择器在HTML中选择元素
学习路径:
1、标签选择器
2、类选择器
3、id选择器
4、通配符选择器
结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
1.标签选择器选择的是一类标签,而不是单独某一个
2.标签选择器无论嵌套关系有多深,都能找到对应的标签
结构:.类名{css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名,类名之间以空格隔开
4. 类名可以重复,一个类选择器可以同时选中多个标签
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
1. 所有标签上都有一个id属性
id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
一个标签上只能有一个Id属性值
一个id选择器只能选中一个标签
结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意点:
1. 开发中使用极少,只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除默认的margin和padding(后续讲解)
目标:能够使用字体和文本相关样式修改元素外观样式
学习路径:
字体样式
字体大小:font-size
字体粗细:font-weight
字体样式:font-style
字体类型:font-family
字体类型:font属性连写
文本样式
文本缩进:text-indent
文本水平对齐方式:text-align
文本修饰:text-decoration
line-height行高
属性名:font-size
取值:数字+px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置,否则无效
属性名:font-weight
取值:
关键字:
正常 | normal |
---|---|
加粗 | bold |
纯数字:100~900的整百数:
正常 | 400 |
---|---|
加粗 | 700 |
注意点:
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
实际开发中以:正常、加粗两种取值使用最多。
属性名:font-style
取值:
正常(默认值):normal
倾斜:italic
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4,... ,字体系列
具体字体:”Microsoft YaHei“、微软雅黑、黑体、宋体、楷体等... ...
字体系列:sans-serif、serif、monospace等... ...
渲染规则:
1.从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
2.如果都不支持,此时会根据操作系统,显示最后字体系列的默认习题
注意点:
1.如果字体名称中存在多个单词,推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
无衬线字体(sans-serif)
1. 特点:文字笔画粗细均匀,并且首尾无装饰
场景:网页中大多采用无衬线字体
常见该系列字体:黑体、Arial
衬线字体(serif)
1. 特点:文字笔画粗细不均,并且首尾有笔锋装饰
场景:报刊书籍中应用广泛
常见该系列字体:宋体、Times New Roman
等宽字体(monospace)
1. 特点:每个字体或文字的宽度相等
场景:一般用于程序代码编写,有利于代码的阅读和编写
常见该系列字体:Consolas、fira code
属性名:font(复合属性)
取值:
font: style weight weight size family;
省略要求:
只能省略前两个,如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
属性名:text-indent
取值:
数字+px
数字+em(推荐:1em = 当前标签的font-size的大小)
属性名:text-align
取值:
属性名 | 效果 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
注意点:
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
text-align : center能让那些元素水平居中?
1. 文本
span标签,a标签
input标签,img标签
注意点:
1. 如果需要让以上元素水平居中,text-align : center需要给以上元素的父元素设置
属性名:text-decoration
取值:
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
注意点:
开发中会使用text-decoration : none;清除a标签默认的下划线
作用:控制一行的上下行间距
属性名:line-height
取值:
数字+px
倍数(当前标签font-size的倍数)
应用:
让单行文本垂直居中可以设置line-height:文字父元素高度
网页精准布局时,会设置line-height:1 可以取消上下间距
行高与font连写的注意点:
如果同时设置了行高和font连写,注意覆盖问题
font: style weight size/line-height family;
属性名:
如:文字颜色:color
如:背景颜色:background-color
属性值:
颜色表示方式 | 表示含义 | 属性值 |
---|---|---|
关键词 | 预定义的颜色名 | red、green、blue、yellow... ... |
rgb表示法 | 红绿蓝三原色,每项取值范围:0~255 | rgb(255,255,255),rgb(255,0,0)... ... |
rgba表示法 | 红绿蓝三原色+a表示透明度,取值范围是0~1 | rgba(255,255,255,0.5),rgba(255,255,0,0.3) |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000、#e92322、简写:#000、#f00 |
如果需要让div、p、h(大盒子)水平居中?
可以通过margin:0 auto;实现
注意点:
1.如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可
2.margin:0 auto一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
目标:能够理解 复合选择器 的规则,并使用 复合选择器 在HTML中选择元素
学习路径:
复合选择器
并集选择器
交集选择器
hover伪类选择器
Emmet语法
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法:父选择器1 子选择器2{css}
结果:
在选择器1所找到标签的后代(儿子、孙子、重孙子... ...)中,找到满足选择器2的标签,设置样式
注意点:
后代包括:儿子、孙子、重孙子... ...
后代选择器中,选择器与选择器之间通过空格隔开
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
选择器语法:选择器1>选择器2{css}
结果:
在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
注意点:
1. 子代只包括:儿子
子代选择器中,选择器与选择器之间通过>隔开
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1,选择器2{css}
结果:
找到 选择器1 和 选择器2 选中的标签,设置样式
注意点:
1. 并集选择器中的每组选择器之间通过,分隔
并集选择器中的每组选择器可以是基础选择器或者符合选择器
并集选择器中的每组选择器通常一行写一个,提高代码的可读性
作用:选中页面中,同时满足多个选择器的标签
选择器语法:选择器1 选择器2{css}
结果:
(既又原则)找到页面中 既 能被选择器1选中, 又 能被选择器2选中,设置样式
注意点:
1. 交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover{css}
注意点:
1. 伪类选择器选中的元素的某种状态
作用:通过简写语法,快速生成代码
语法:
类似于刚刚学习的选择器的写法
记忆 | 示例 | 效果 |
---|---|---|
标签名 | div | |
类选择器 | .red | |
id选择器 | #one | |
交集选择器 | p.red#one | |
子代选择器 | ul>li | |
内部文件 | ul>li(我是li的内容) |
|
创建多个 | ul>li*3 | |
创建div同级标签 | div+p | |
创建父子级 | div>p | |
属性名:background-color(bgc)
属性值:
颜色取值:关键字、rgb表示法、rgba表示法、十六进制... ...
注意点:
背景颜色默认值是透明:rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
属性名:background-image(bgi)
属性值:background-image:url('图片的路径');
注意点:
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
属性名:background-repeat(bgr)
属性值:
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
属性名:background-position(bgp)
属性名:background-position:水平方向位置 水平方向位置;
属性值:
1.方向名词(最多只能表示9个位置)
水平方向--> left 、center、right
垂直方向--> top、center、bottom
2.数字+px(坐标)
坐标系:
原点(0,0)--> 盒子的左上角
x轴--> 水平向右
y轴--> 垂直向下
操作:
将图片左上角与坐标点重合即可
注意点:
方位名词取值和坐标取值可以混合使用,第一个取值表示水平,第二个取值表示垂直
属性名:background(bg)
属性值:
单个属性值的合写,取值之间以空格隔开
书写顺序:
推荐:background : color image repeat position
省略问题:
可以按照需求省略
特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写background:url()
注意点:
如果需要设置单独的样式和连写
1. 要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
6.1 (拓展)img标签和背景图片的区别
需求:需要在网页中展示一张图片的效果?
方法一:直接写上img标签即可(比较重要的图片实用img标签)
img标签是一个标签,不设置宽高默认会以原尺寸显示
方法二:div标签+背景图片(不是很重要的图片适用div标签)
需要设置div的宽高,因为背景图片只是装饰的css样式,不能撑开div标签
目标:能够认识三种常见的元素显示模式,并通过代码实现不同元素显示模式的转换
学习路径:
块级元素
行内元素
行内块元素
元素显示模式转换
显示特点:
1. 独占一行(一行只能显示一个)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高
代表标签:
div、p、h系列、ul、dl、dt、dd、form、header、nav、footer... ...
显示特点:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
(span)--- ---不换行;设置宽高不生效;尺寸和内容的大小相同
代表标签:
a、span、b、u、i、s、strong、ins、em、del... ...
显示特点:
1. 一行可以显示多个
可以设置宽高
代表标签:
input、textarea、button、select... ...
特殊情况:img标签有行内块元素特点,但是chrome调试工具中显示结果是inline
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 较多 |
块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等... ...
但是:p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
四、css特性
目标:能够认识css的基础和层叠特性
学习路径:
继承性
层叠性
特性:子元素有默认基础父元素样式的特点(子承父业)
可以基础的常见属性(文字控制属性都可以继承)
color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
... ...
注意点:
可以通过调试工具判断样式是否可以继承
特性:
给同一个标签设置不同的样式-->此时杨海生会层叠叠加-->会共同作用在标签上
给同一个标签设置相同的样式-->此时杨海生会层叠覆盖-->最终写在最后的样式会生效
注意点:
当样式冲突是,只有当选择器优先级相同时,才能通过层叠性判断结果
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
!important写在属性值的后面 ,分号的前面
!important不能提升继承的优先级,只要是继承优先级最低!
实际开发中不建议使用!important
Document 测试优先级
场景:如果是复合选择器,此时需要通过权重重叠计算方法,判断最终哪个选择器优先级最高会生效
权重叠加公式:(每一级之间不存在进位)
比较规则:
先不交第一级数字,如果比较出来了,之后的统统不看
如果第一级数字仙童,此时再去比较第二级数字,如果比较出来了,之后的统统不看
... ...
如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点:!important如果不是继承,则权重最高,天下第一!
Document 我是一个标签
目标:能够认识 盒子模型的组成,能够掌握盒子模型 边框、内边距、外边距 的设置方法
学习路径:
盒子模型的介绍
内容区域的宽度和高度
边框(border)
内边框(padding)
外边框(margin)
盒子的概念
1.页面中的每一个标签,都可以看做是一个“盒子”,通过盒子的视角更方便的 进行布局
2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
2.盒子模型
CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边框区域(margin)构成,这就是盒子模型
3.记忆:可以联想现实中的包装盒
作用:利用 width 和 height 属性默认设置是盒子 内容区域的大小
属性:width / height
常见取值:数字+px
注意:
盒子尺寸 = width 或者 height +边框线
即:需要400 * 400 的盒子,那么width应该设置为380px,height应该设置为380px,因为另外还可能设置上下左右边框10px
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
如:border:10px solid red; (border : 像素 线条种类 线条颜色)
快捷键:bd+tab
注意:
参数名 | 参数值 |
---|---|
solid | 实线段 |
dashed | 虚线段 |
dotted | 点线段 |
场景:只给盒子的某个方向单独设置边框
属性名:border - 方位名词
属性值:连写的取值
注意:
方向 | 参数名 |
---|---|
上 | border-top |
下 | border-bottom |
左 | border-left |
右 | border-right |
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实线 solid、虚线 dashed、点线 dotted |
边框颜色 | border-color | 颜色取值 |
需求:根据设计图,通过PxCook量取数据,通过代码在网页中完成一致的效果
布局顺序:
从外往内,从上往下
从外到内:先宽高背景色,放内容,调节内容位置,控制文字粗细
每一个盒子的样式:
宽高
辅助的颜色背景
盒子模型的部分:border、padding、margin
其他样式:color、font-、text-、 ... ...
Document 文字
需求:盒子尺寸300*300,背景粉色,边框10px实际黑色,上下左右20px的内边距,如何完成
盒子实际大小终极计算公式:
解决:当盒子被border和padding撑大后,如何满足需求?
Document 文字
需求:盒子尺寸300*300,背景粉色,边框10px实际黑色,上下左右20px的内边距,如何完成?
给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
解决方法1:手动内减
操作:自己计算多余大小,手动在内容中减去
缺点:项目中计算量太大,很麻烦
解决方法2:自动内减
操作:给盒子设置属性box-sizing:border-box;即可
优点:浏览器会自动计算多余大小,自动在内容中减去
Document 文字
场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
比如:body标签默认有margin:8px
比如:p标签默认有上下的margin
比如:ul标签默认由上下的margin和padding-left
... ...
解决方法:
场景:垂直布局 的 块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
只给其中一个盒子设置margin即可
场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
给父元素设置border-top或者 padding-top(分隔父子元素的margin-top)
给父元素设置overflow:hidden
转换成行内块元素
设置浮动
Document span span
目标:能够使用 结构伪类选择器 在HTML中定位元素
作用与优势:
作用:根据元素在HTML中的结构关系查找元素
优势:减少对于HTML中类的依赖,有利于保持代码整洁
场景:常用于查找父级选择器中的子元素
选择器
选择器 | 说明 |
---|---|
E:first-child{} | 匹配父元素中第一个子元素,并且是E元素 |
E:last-child{} | 匹配父元素中最后一个子元素,并且是E元素 |
E:nth-childn(){} | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素,并且是E元素 |
注意点:
n为0、 1 、2、 3、 4 、... ...
通过n可以组成常见公式
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1、odd |
找到前5个 | -n+5 |
找到从第5个往后 | n+5 |
目标:能够使用伪元素在网页中创建内容
伪元素:一般页面中的非主体内容可以使用伪元素
区别:
元素:HTML设置的标签
伪元素:由CSS模拟出的标签效果
种类:
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前面添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意点:
必须设置content属性才能生效
伪元素默认是行内伪元素
Document 爱
目标:能够认识标准流的默认排布方式及其特点
标准流:又称文档流,是浏览器在渲染显示网页内容是默认采用的一套排版规则,规定 了应该以何种方式排列元素
常见标准流排版规则:
目标:能够认识使用 浮动的作用,了解 浮动的特点
学习路径:
浮动的作用
浮动的代码
浮动的特点
浮动的案例
早期的作用:图文环绕
现在的作用:网页布局
浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
浮动元素比标准流高半个级别,可以覆盖标准流中的元素
浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点:
浮动的元素不能通过text-align:center或者margin:0 auto
CSS书写顺序:浏览器执行效率更高
1. 浮动/display
盒子模型:margin border padding 宽度高度背景色
文字顺序
需求:使用浮动,完成设计图中布局效果
含义:清除浮动带来的影响
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:
子元素浮动后脱标--->不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
特点:
优点:简单粗暴,方便
缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块
操作:
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear:both
.clearfix{ /*清除左右两侧浮动的影响*/ clear: both; }
特点:
缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂
操作:用伪元素替代了额外标签
1:基本写法
.clearfix::after{ content:''; display:block; clear:both; }
2:补充写法
/*单伪元素清除浮动*/ .clearfix::after{ content: ''; /*伪元素添加的标签是行内,要求块*/ display: block; clear: both; /*伪类兼容性*//*补充代码:在网页中看不到伪元素*/ height: 0; visibility: hidden; }
特点:
优点:项目中使用,直接给标签加类即可清除浮动
操作:
直接给父元素设置overflow:hidden
特点:
优点:方便