1、结构分类:
HTML结构层=====html标签
CSS样式层======对html标签的修饰
js行为交互层===需要做一些动态的交互效果
2、原则:做到结构样式行为的分离
img文件及
css文件夹js文件夹页面文件
3.HTML和HTML5
HTML====超文本标记语言
HTML5===超文本标记语言的第五个版本
页面的后缀名必须以.html/ .htm为后缀名
4.如何快速创建基本结构
!+tab
html:5
5.标签书写分类
标记就是标签,就是元素
单标记:<标签的名字属性="属性值”属性="属性值">
双标记:<标签的名字属性="属性值”属性="属性值">文本/图片</标签的名字>
属性:对于一个元素或者是一个标签的描述
属性值:就是这个描述的一个取值
例如:<铁牛哥哥身高="180”体重="100斤">任务</铁牛哥哥>
注意事项:写在标签里面的属性称之为标签属性
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>行内样式>内部样式>外部样式
11.选择器
概念：查找页面元素的一种方式方法
选择器：id,类,标签,通配符,后代,子代,伪类
12.选择器的优先级
id > 类 > 标签>通配符
(0100)>0010>0001>0000
13.考虑样式表和选择器一起使用的时候
!important>行内样式>id>类选择器>标签>通配符选择器
14.样式表使用的时候会出现一个层叠性
使用不同的选择器修饰同一个元素的时候,元素的样式会根据选择器或者是样式表的优先级进行不同的显示
权值越大的实现的最终的效果,选择器权值相同的话,则代码靠后的实现最终的效果;
如果属性不相同,则不会产生覆盖效果,如果属性相同的话,会被覆益
这一情况被称之为层叠性
15.关于选择器的权值大小
选择器权值相加的问题
16.如何实现不隐藏元素的情况下隐藏元素中的文本
text-indent : -9999px
font-size:epx
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)万能清除法
wnqc :after{
content:"文本" ;
display :block;
clear: both;
width :0px;
height :0px;
font-size:0px;
overflow: 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=绝对定位
fixe====固定定位
sticky===粘性定位
参照物的问题:
静态定位没有参照物，
相对定位的参照物是自己原来的位置
绝对定位的参照物:
1)如果所有外层的父级元素中都没有任何定位的话，则相对于浏览器屏幕左上角的位置(body)
2)如果父元素有定位的话，则相对于比较近的父元素进行位置的微调
固定定位的参照物
浏览器窗口的左上角(视口的左上角)，不会收到滚动条的影响
粘性定位
视口的左上角
23.包含块的概念
就是绝对定位的父元素，也就是参照物的问题
父相子绝===父元素使用相对定位，子元素使用绝对定位,改变子元素的参照物
24.浮动和定位的区别
1)不同点
a)概念不容,浮动主要是用来做布局，横向显示元素的
定位，用来调整元素的位置的
b)脱离文档流不同
浮动:半脱离文档流,如果后面补位元素中有文本的话，会产生文本环绕的效果
定位:全脱离文档流，如果后面补位元素中有文本的话，不会产生文本环绕的效果
2)相同点
1)都能让后面的元素上去补位置==都会产生高度塌陷
2)如果补位元素中没有文本的话实现的效果是一致的
3)都能让行内元素变成块级元素
4)都能触发BFC
5)都能解决margin-top作用在父元素上面的问题
6)都能i让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:epx, width:0px;不占页面空间的
注意:如果这个盒子里面有文本的话，你需要: font-size: 0px；joverflow:hiddem,
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,遨游,騰讯世界之窗和1360浏览器
2)Grcko内核:火狐
3 )webkit内核:Safari, chrome
4)Presto内核:Opera
5)Blink内核:是webkit的分支，由谷歌公司和Opera software开发的浏 览器排版引擎
32.有”些属性在使用的时候，不兼容怎么处理呢?
浏览器的属性前缀的问题
-webkit-: 谷歌和Safari
-moz-:支持的是火狐浏览器里面的属性
-ms-:IE浏览器
-0- : 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-sty1e-iamge/type/position list-style
宽度使用百分比的时候，会继承父元素的宽度
扫一扫
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
