0
点赞
收藏
分享

微信扫一扫

html+css知识点复习

吴陆奇 2022-04-14 阅读 71
html

最近在温习学过的基础

从html基础及标签
一、HTML语言化
1.对人:增加代码的可读性,让代码更加容易维护
2.对机器对引擎更加友好有利于seo

二、块级元素:
1.div、p、h1~h6、ul、ol
2.独占一行,可以设置宽高
3.display:block可以设置为块级元素

三、行内元素
1、span、a、input、button
2.行内元素一般出现在一行,不会另起行,不能声明宽高
3.display:inline设置行内元素

四、行内块元素
1.不会自动换行,但是可以声明宽高
2.display:inline——block设置成行内块

五、单元格合并
1、colspan=“所要合并的单元格的列数”左合并
2.、rowspan=“所要合并的行数”上下合并

六、表单
1.type=text 文本框
2.type=password 密码框
3.type=submit 提交框  
4.type=button 单纯的提交框
5.type=reset 清空效果
placeholder 输入预期的简短提醒信息,但是要兼容到ie8以上

七、盒模型
盒模型:margin+padding+border+content
标准盒模型和IE盒模型的区别就是计算高度不同:
1.标准盒模型:盒子总高度/宽度=width/height+padding+border+margin 注意width/height只是内容宽度 不包含padding和border
2.ie盒模型:盒子总高度/宽度=width/height+margin 
注意width/height包含内容宽度和border、padding

八、margin之间的距离
当两个元素都设置margin时候,纵向会发生重叠问题,而最终显示的margin只会取最大那个值

九、margin负值问题
1.margin-right为负值时,自身不会移动,右侧元素会向左移动相应局距离
2.margin-left为负值时,元素自身向左移动相应距离
3.margin-bottom为负值时,自身不会移动,底部侧元素会向上移动相应局距离
4.margin-top为负值时,元素自身向上移动相应距离

十、BFC(格式化上下文)
了解BFC之前,我们知道常见的元素定位方法:
1.普通流:html元素按照从上到下而布局
2.浮动float:先按照普通流布局之后根据浮动的方向,尽可能地向左或者向右偏移
3.绝对定位方式 absolute position :
元素会与普通流脱离,位置是有绝对定位坐标确定

BFC块级格式化上下文,他是属于普通流
BFC特性:形成一个独立容器,容器里面的布局不会影响外面的元素

形成BFC的条件
overflow不是visible
display是flex或者inline-block等
position是absolute或fixed
float不是none

BFC特性应用:
1.同一个BFC下外边距会发生折叠
设置两个div时候,同时给上margin 这时候两个div之间的margin数值不是相加,而是会发生重叠
解决:设置两个容器,各自放一个div

2.BFC可以包含浮动的元素(清除浮动)
浮动会脱离文本流,当我们给这个浮动元素触发BFC特性就可以清除浮动

3.BFC可以阻止元素被浮动元素覆盖
其实第二部分有些地方会被浮动元素所覆盖(文本信息不会被覆盖)这时候触发BFC(设置overflow:hidden),就可以避免元素被覆盖

十一、清除浮动
主要是因为两个方面的问题
1.垂直方向上margin塌陷问题
2.子元素float脱离文档流后,父元素高度塌陷问题

1.给父盒子加上overflow:hidden (触发BFC)清除父元素中子元素浮动对页面的影响(不建议,因为超出的内容会被隐藏)

2.使用额外标签;给浮动的盒子下面加一个空标签 ,添加样式clear:both 
内部标签:重新把父盒子的高度撑开
外部标签:清除浮动盒子的影响,不会撑开父盒子
(不建议使用,增加空的标签,使页面混乱)  

3.使用伪元素清除  


.clearfix:after{
centent:"";
height:0;
line-height:0;
display:block;
visibility:hidden;//将元素隐藏
clkear:both;}   //清除浮动
.clearfix{
zoom:1}  //兼容ie

十二、CSS提升页面性能的方法
1.属性设置简写比如设置一个元素的上下左右margin,可以直接简写margin: 10px 12px 23px 34px;这样写的目的是减少最后打包代码的包的体积
2.去除0后面的单位有很多人写样式愿意写margin: 0px 10px;其实可以把0后面的单位去掉:margin: 0 10px;这样做的目的也是减少最后打包代码的包的体积
3.用css代替图片比如,可以用css画三角形代替一些箭头图片这样做的目的是减少http请求用
4.css雪碧图代替单个图片这样做的目的是减少http请求节约带宽

十三、音频
controls 显示音频插件
autoplay 自动播放
loop 循环播放
```
<audio src="" controls="constrol"  autoplay= "autoplay" loop></audio>
```

十四、视频
```
<video src ="">
```

举报

相关推荐

0 条评论