html+css基础知识体系
2022-09-19 10:23:55 0 举报AI智能生成
html和css基础必须掌握的知识点
作者其他创作
大纲/内容
HTML5
补充：媒体操作
元素内容编辑
contenteditable="true"
document.designMode = "on"
拖拽
拖拽元素
设置了 draggable="true"，不能省略 ="true"
事件
dragstart
event.dataTransfer.setData(key,value)
dragleave
drag
dragend
目标元素
与拖拽元素有交互的元素
事件
dragenter
dragleave
dragover
阻止默认事件，让drop可以执行
drop
event.dataTransfer.getData(key)
存储
localStroage
1. 同源共享
2. 除非用户删除，否则一直存在
sessionStorage
1. 每个页面有自己的存储
2. 关闭页面，存储内容清空
方法
.setItem(key, value)
.getItem(key)
.removeItem(key)
.clear()
.length + .key(index)
获取所有存储内容
注意
1. 存储内容下标不以存储顺序论
2. 存储引用类型需要借助 JSON 保全格式
全屏
开启
ele.requestFullscreen()
关闭
document.exitFullscreen()
判断
document.fullscreen
存在兼容
样式伪类
:fullscreen
:-webkit-full-screen
元素到可视区域的距离
ele.getBoundingClientRect()
top/left
width/height
offsetWidth/Height
bottom/right
CSS3
计算长度
calc(数学表达式)
运算符之间要加空格
带单位的只能相加减
单位与数字之间只能相乘除
遵循数学运算优先级
变量
声明
--变量名: CSS值
使用
var(--变量名, 默认值)
默认值仅在 变量不存在或者值为 initial 时生效
通过JS操作
ele.style.getPropertyValue("变量名")
getComputedStyle(ele, null).getPropertyValue("变量名")
ele.style.setProperty("变量名", 值)
ele:not()
选择不符合条件的xx
动画属性
通过 @keyframes 定义动画序列
百分比设置动画节点
起点可以写为 from，终点可以写为 to
动画节点可以重复书写
可以同时书写多个动画节点的样式，以逗号隔开
动画节点的顺序可以打乱
通过animation样式添加动画
样式 animation-*
name
duration
timing-function
delay
iteration-count
direction
normal
reverse
alternate
alternate-reverse
fill-mode
backwards
both
play-state
paused
running
帧动画
将 timing-function 改为 steps(n)
实现鲨鱼效果、表效果....
Flex
弹性容器布局
弹性容器
设置了 display: flex/inline-flex; 样式的元素，效果类似于 block
样式
justify-content
控制弹性元素在主轴的排列方式
flex-start
默认
center
flex-end
space-around
spac-between
space-evenly
align-items
控制单行弹性元素在交叉轴的排列方式
flex-start
默认
flex-end
center
baseline
stretch
flex-wrap
控制弹性元素是否主轴空间不足时是否可以换行
nowrap
默认
wrap
align-content
设置交叉轴多行内容的排列方式
flex-start
center
flex-end
space-around
space-between
space-evenly
flex-direction
设置主轴的起点方向
row
row-reverse
column
column-reverse
flex-flow
flex-wrap flex-direction 的简写形式，位置可以更换
弹性元素
弹性容器的直接子元素，也可以设置为弹性容器，效果类似于 float
order
0
默认
调节元素顺序，值越小，排列越靠前
align-self
单独设置弹性元素自身的交叉轴排列方式，权重高于父元素设置
值与align-items一致
flex-grow
0
默认
弹性元素在容器主轴有剩余空间时，占据剩余空间的比例
flex-shrink
1
默认
弹性元素在主轴空间不足时，自身缩小的比例
flex-basis
auto
默认
设置弹性元素占据的主轴空间大小，权重高于 width/height 设置
flex
flex-grow flex-shrink flex-basis 三者的简写
可以写为一个值
auto
表示为：1 1 auto
none
表示为：0 0 auto
9
表示为：9 1 0%
10%
表示为：1 1 10%
4 50px
表示为：4 1 50px
HTML
超文本标记语言,依赖于浏览器运行
标签分类
块级标签
段落标签 p
标题标签
div 标签
列表标签
表格标签
行内标签
a 超链接
span
文本标签
行内块标签
img
button
input
头部功能标签
标签语法
标签属性
标签关系
表单 form
input
type:text
type:password
type:radio
type:checkbox
type:file
type:submit
下拉选择: select > option
多行文本text-area
label
for属性实现和某个控件的绑定
提示信息
method
post
通常用于提交数据
get
通常用于获取数据
难点
name属性/value属性的理解
语义化标签
article
header/footer
section
nav
表单新增input
type:tel
type:email
type:number
type:range
type:color
type:date
type:url
表单新增控件
data-list
meter
progress
表单新增属性
checked/selected
disabled
readonly
required
tabindex
autocomplete
音视频
audio
video
controls音视频控件属性
CSS
样式规则
选择器
简单选择器
标签选择器
class选择器(.)
id选择器(#)
属性选择器([])
组合选择器
后代选择器
交集选择器
并集选择器
子代选择器
兄弟选择器
书写位置
行内样式
内联样式
外联样式
三大特性
继承性
层叠性
优先级
字体系列
font-family
font-size
font-weight
font-style
文本系列
text-align
line-height
color
text-indent
显示和隐藏
display
visibility
overflow
文本溢出省略
vertical-align
middle/baseline/top/bottom/具体像素
设置行内块(图片)与文本的对齐方式
解决图片下方的间隙
background背景
background-color
background-image
background-repeat
background-position
background-attachment
background-size
CSS-Sprite
将多个图标合并到一张图片里边,目的是为了减少服务器请求次数
通过调整背景图片位置,显示相应的图标
CSS布局
盒子模型
content
内容区,由宽高设置
padding
内边距,内容区与边框之间的间距
border
边框
margin
外边距,标签与标签之间的间距
设置方法
一个值: 上下左右同时设置
两个值: 代表 上下/左右
三个值: 代表 上/左右/下
四个值: 代表上/右/下/左
也可以单独设置某个方向上的margin/padding/border
盒子大小
盒子大小: content+padding+border
显示模式display
块级元素:block
设置宽高,无法同行展示
行内元素:inline
设置宽高无效,同行展示,放不下才换行
行内块元素: inline-block
介于两者之间,可以设置宽高,可以同行展示
注意
浮动float
float
left;左浮动
right;右浮动
none;
可以解决块级元素同行展示的问题
元素浮动之后,默认会变为行内块的表现形式
元素浮动之后,会从父元素的边界开始同行排列,放不下换行,无法浮动到父元素之外
建议:元素在父元素当中浮动之后,其余兄弟元素最好也浮动(或者定位)
元素浮动之后无法在撑起父元素的高度,有可能会造成父元素高度塌陷
解决高度塌陷,清除浮动带来的影响
定位position
position
开启定位之后,需要通过left/right/top/bottom进行位置的描述
static; 默认(不定位)
relative; 相对定位
不改变元素本身的表现特性
参照物: 元素自身的位置
absolute; 绝对定位
元素特性改变
不设置宽度时,宽度由内容撑开
脱离文档流,不在占据位置
参照物
距离自己最近的具有定位属性的父元素
如果层层向上查找,没有符合规则的,就以html为参照物
子绝父相
fixed; 固定定位
元素特性改变
不设置宽度时,宽度由内容撑开
脱离文档流,不再占据位置
参照物
浏览器视口,不会随着网页滚动
z-index
开启定位之后,可以通过设置z-index属性,调整元素的层叠顺序
使用技巧
定位时,先想清楚要以谁作为参照物,从而选择相应的属性
0 条评论
下一页
