经过几周的HTML大前端学习,现将学习中的一些小总结综合如下:
1、结构分类：
HTML结构层=====html标签
CSS样式层======对html标签的修饰
js行为交互层===需要做一些动态的交互效果
2、构建前准备：做到结构样式行为的分离
img文件夹
CSS文件夹
js文件夹
页面文件.html
3.HTML和HTML5
HTML====超文本标记语言
HTML5===超文本标记语言的第五个版本
页面的后缀名必须以.html/.htm为后缀名
4.如何快速创建基本结构(VS code)
!+tab
html:5
5.标签书写分类
标记就是标签,就是元素
单标记:<标签的名字 属性="属性值" 属性="属性值">
双标记:<标签的名字 属性="属性值" 属性="属性值">文本/图片</标签的名字>
属性:对于一个元素或者是一个标签的描述
属性值:就是这个描述的一个取值
例如:<海蓝时i见鲸 身高="180" 体重="100斤">任务</海蓝时i见鲸>
注意事项:写在标签里面的属性称之为标签属性
6.元素按照显示类型分类
行内元素:默认横向显示,不能设置宽度高度的元素
eg:a,b,strong,i,em,s,del,span,u,sup,sub,font
块级元素:默认纵向排列,默认占宽一整行,并且能设置宽度高度
eg:div,p,h1-h6,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend
行内块元素:有行内元素的特点,也有块级元素的特点
eg:input,img,textarea,select
注:有些单位里面的人说元素分类就两类
行内元素,块级元素会把咱行内块元素直接归纳到行内元素中
7.什么是置换元素和非置换元素
置换元素默认是有自己的一个固定的宽度高度,浏览器也会根据这个标签或者元素的显示类型直接进行区分显示,这样的 元素被称之为置换元素,置换元素简而言之就是咱们的行内块元素
除了置换元素(行内块元素)之外,剩下的都是非置换元素
8.CSS的基本语法
选择器{
属性:属性值;
属性:属性值;
}
选择器:查找页面元素的一种方式方法
{}:样式规则样式声明,能够让选择器查找到的元素实现对应的显示效果
样式规则样式声明由两部分组成
属性和属性值
属性:元素或者是事物的描述
属性值:事物描述的取值
属性和属性值需要使用:链接
每一组属性和属性值结束后需要使用分号分割
9.CSS基本语法的使用===使用位置(样式表)
行内样式
含义:直接把对应的CSS基本语法放在标签里面进行书写
语法:<div style="属性:属性值;属性:属性值"></div>
弊端:只对这一个标签修饰,代码冗余,不易于维护
内部样式
含义:直接把对应的CSS基本语法书写在一个style标签里面,style标签需要放在head标签里面
语法:
<head>
<style>
选择器{
样式规则
}
</style>
</head>
弊端:如果代码过多的话,需要上下滚动屏幕,结构和样式没有分离
外部样式
含义:讲所有的CSS样式修饰放在一个独立的以.css为后缀名的文件中,让通过link标签进行引入
标签:<link rel="stylesheet" href="CSS路径">
扩充另外一个样式表
使用语法:
<style>
@import url(css文件的路径);
</style>
扩充知识点:个样式表的对比知识点(面试题)
1.本质不同link是html语法,@importCSS语法
2.兼容的不同link兼容能够所有的浏览器,@import兼容性不是特别好
3.代码的健在顺序,link加载的时候是同时加载,@import加载页面的时候是先加载结构后加载样式,有抖动的情况
4.操作dom不同.目前操作dom的时候,大部分是通过link操作js的样式的,@import不能操作样式的
10.样式表的优先级
!important>行内样式>内部样式>外部样式 (正常书写顺序 ,如果link引入标签写在内部样式后面,则外部样式>内部样式)
11.选择器
概念:查找页面元素的一种方式方法
选择器:id,类,标签,通配符,后代,子代,伪类
12.选择器的优先级
id>类>标签>通配符
(100)>10>1>0
13.考虑样式表和选择器一起使用的时候
!important>行内样式>id>类选择器>标签>通配符选择器
14.样式表使用的时候会出现一个层叠性
使用不同的选择器修饰同一个元素的时候,元素的样式会根据选择器或者是样式表的优先级进行不同的显示
权值越大的实现的最终的效果,选择器权值相同的话,则代码靠后的实现最终的效果;
如果属性不相同,则不会产生覆盖效果,如果属性相同的话,会被覆盖
这一情况被称之为层叠性
15.关于选择器的权值大小
选择器权值相加的问题
16.如何实现不隐藏元素的情况下隐藏元素中的文本
text-indent:-9999px
font-size:0px
17.有哪些属性能够取负值
text-indent
z-index
transform:scale(数值)
定位的偏移属性的取值:top,bottom,right,left
order:提高排列顺序(移动端里面的)
margin
18.浮动的取值
float:left/right/none
作用:用来让盒子横向显示的,应用于布局上面
影响:后面元素会上去补位置;必然产生高度塌陷
如何不让元素上去补位置
19.清除浮动
clear:none/both/left/right
20.如何解决高度塌陷(面试)
1)可以给父元素添加高度
2)可以直接使用清除浮动解决补位问题
3)父元素里面只有有一个子元素的时候;子元素浮动,产生高度塌陷了
a)在浮动元素后面添加一个块级元素,给这个块级元素进行清除浮动即可
b)给父元素添加oveflow:hidden;触发了BFC会让浮动元素继续参与高度的计算
4)万能清除法
.wnac:after{
content:"文本";
display:block;
clear:both;
width:0px;
height:0px;
font-size:0px;
oveflow:hidden;
visibility:hidden
}
21.盒子模型(面试)
盒子模型分为几类,组成部分有哪些,如何区分盒子模型,二者的计算方法是什么
盒子模型总共分为两类
标准盒子模型(W3C官方盒子模型)
IE怪异盒子模型
组成部分:内容(content),内边距(padding),边框(border),外边距(margin)
如何区分:
看你的CSS代码里面是否携带了咱们box-sizing这个属性
如果没有携带的话则按照对应的标准盒子模型进行计算
如果携带了并且取值为content-box的时候,则按照按照标准盒子模型计算
如果携带了并且取值为border-box的时候,按照ie怪异盒子模型进行计算
通过box-sizing这个属性控制盒子模型大小的计算
计算方法如下
标准盒子模型
实际的宽度=CSS.width+左右的padding+左右的border+左右的margin
实际的高度=CSS.height+上下的padding+上下的border+上下的margin
ie怪异盒子模型
实际的宽度=CSS.width+左右的margin
实际的高度=CSS.height+上下的margin
怪异盒子通过box-sizing:border-box触发的那一瞬间,就改变了盒子模型的计算法昂发
怪异盒子里面的CSSS的width里面已经能包含了对应内容区域.内边距区域,边框区域
22.定位的取值有哪些
position
取值:static===静态定位
relative=相对定位
absolute=绝对定位
fixed====固定定位
sticky===粘性定位
参照物的问题:
静态定位没有参照物,
相对定位的参照物是自己原来的位置
绝对定位的参照物:
1)如果所有外层的父级元素中都没有任何定位的话,则相对于浏览器屏幕左上角的位置(body)
2)如果父元素有定位的话,则相对于比较近的父元素进行位置的微调
固定定位的参照物
浏览器窗口的左上角(视口的左上角),不会收到滚动条的影响
粘性定位:视口的左上角
23.包含块的概念
就是绝对定位的父元素,也就是参照物的问题
父相子绝===父元素使用相对定位,子元素使用绝对定位,改变子元素的参照物
24.浮动和定位的区别
1)不同点
a)概念不容,浮动主要是用来做布局,横向显示元素的
定位,用来调整元素的位置的
b)脱离文档流不同
浮动:半脱离文档流,如果后面补位元素中有文本的话,会产生文本环绕的效果
定位:全脱离文档流,如果后面补位元素中有文本的话,不会产生文本环绕的效果
2)相同点
1)都能让后面的元素上去补位置==都会产生高度塌陷
2)如果补位元素中没有文本的话实现的效果是一致的
3)都能让行内元素变成块级元素
4)都能触发BFC
5)都能解决margin-top作用在父元素上面的问题
6)都能让margin:0 auto失效
7)如果是一个自适应宽度的盒子(块),添加浮动或者是定位的时候,盒子仍然是自适应.是被文本撑开的
25.如何制作溢出显示三个圆点的效果(面试:单行)
div{
width:500px;
white-sapce:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
26.如何制作一个三角形(面试题)
div{
display:inline-block;
width:0px;
height:0px;
border:10px solid transparent;
border-top:10px solid red
}
27.如何隐藏元素(面试)
1.display:none 不占空间
2.visibility:hidden 占页面空间
3.height:0px,width:0px; 不占页面空间的
注意:如果这个盒子里面有文本的话,你需要:font-size:0px; overflow:hidden; visibility:hidden
4.opacity:0 占页面空间
5.transform:scale(0) 占页面空间
28.如何让一个元素边透明(面试)
1.透明的颜色 transparent
2.颜色的透明 rgba(red,green,blue,0) alpha的取值为0-1
3.opacity:0 还能透明元素里面的所有文本/图片/边框
4.如何解决ie低版本浏览器的透明兼容
filter:alpha(opcity=0-100) 0透明 100不透明
29.父子元素中,如果我给父元素添加透明的时候,使用opcity的话.会直接影响达到子元素
如何只给父元素添加透明,不影响子元素
换属性换成rgba
30.实际开发的时候如何处理一些兼容问题
低版本浏览器里面图片添加一个超链接的话,会显示1px的边框如何解决 img{border:none/0}
border:0
border:none
二者都能取消边框,但是实际的意义不一样
0代表的是有数值,有边框,边框的粗细为0
none代表的是没有边框,不设置边框
从加载渲染角度考虑:0会被加载渲染,但是none不会
如果你的低版本浏览器不支持一些兼容的时候.咱们大部分会使用filter过滤器去解决这些问题
31.产生兼容性的问题的原因:由于浏览器的内核不一样造成的
1)Trident内核:IE,遨游,腾讯,世界之窗和360浏览器
2)Grcko内核:火狐
3)webkit内核:Safari,chrome
4)Presto内核:Opera
5)Blink内核:是webkit的分支,由谷歌公司和Opera software开发的浏览器排版引擎
32.有一些属性在使用的时候,不兼容怎么处理呢?
浏览器的属性前缀的问题
-webkit-: 谷歌和Safari
-moz-:支持的是火狐浏览器里面的属性
-ms-:IE浏览器
-o-:Opera浏览器
32.图片下面有3px的留白问题
1)使用vertical-align属性调整图片的行内块元素的垂直对其方式
2)display:block
3)给图片添加浮动,也变成块级元素,在这个图片的外层添加一个div盒子给盒子添加oveflow:hidden
33.图片整合技术了
就是直接讲页面中涉及到的小图标整理到一个大的背景透明的图片上面然后
通过background-position这个属性调整咱们的图片显示位置即可
精灵图技术====不需要你直接整合图片,属于UI
图片整合的优点
1)通过图片整合技术,减少对服务器的请求次数,从而提高页面的加载速度
2)通过图片整合减少对图片的体积,降低节约咱们的带宽
34.定位的知识
实现元素的水平垂直居中显示
1)屏幕中的
div{
width:;
height:;
position:absolute/fixed;
top:50%;
left:50%;
margin-top:-高度的一半;
margin-left:-宽度的一半;
}
二者区别在于:本质上,absolute是相对于咱们左上角的body位置,
fixed是相对于浏览器视口左上角进行位置调整的
如果没有滚动条的话,实现效果没有多大的差别
但是有滚动条的情况下,absolute会被滚上去,但是fixed是不会被滚上去的
2)父级元素中的
父元素{
position:relative
}
子元素{
width:;
height:;
position:absolute;
top:50%;
left:50%;
margin-top:-高度一半;
margin-left:-宽度的一半
}
35:如何让一个元素变成块级元素
1)display:block
2)使用浮动取值不能为none
3)添加定位:absolute/fixed
4)父子元素中,给父元素触发弹性盒子或者是让父元素触发网格布局==子元素变成块级元素
36.继承性的问题
使用CSS属性对页面中的元素进行修饰的时候,这个属性添加到父元素上面能实现对应的效果,添加到子元素上面也能实现对应的效果,这一现象被称之为:继承性
哪些属性具有继承性呢?
文本的大部分属性都具有继承性:字体大小,字体颜色,加粗,倾斜,行高,字体,等等
列表属性:list-style-iamge/type/position list-style
宽度使用百分比的时候,会继承父元素的宽度
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
