HTML5、CSS3
1、前端总共分为几个层次
3个层次:
HTML结构层、CSS样式层、JS行为交互层
2、标签分类:书写
单标签:
只有开始没有结束,自己独立出现
<标签名属性=”属性值”属性=”属性值”>
双标签:
有开始有结束,成对出现,结束标签必须/
<标签名字属性=”属性值”属性=”属性值"></标签名字>
属性:
分为两类:HTML标签属性、CSS属性
3、标签继续分类:元素类型
三类:
行内元素:
不能设置宽度高度,默认横向排列
案例:span,b, i, strong,em, u, s, del, sup, sub
块级元素:
能够设置宽度高度,默认占宽―整行，默认纵向排列
案例: p,div,h1-h6,ul,ol,li, dl，dt，dd，form,table,fieldset,legend,新增的语义化的h5标签
行内块元素:(置换元素)
既有行内元素的特点也块级元素的特点，横向显示，还能设置宽度高度
案例:img, input, select , textrea
4、继承含义
有一些Css的属性既可以应用在父元素上面也可以应用在子元素上面，都能实现对应的效果，这种情况被称之为继承属性维承:
字体属性都能继承:
font-sizef family/ weightf stylecolor
letter-spacing===字符间距
word-spacing=====单词间距
line-height
list-style
list-style-image
list-style-type
list一style-position
5、层叠
使用不同的选择器修饰同一个元素的时候。相同的属性会被覆盖，不同的属性会被留下，这种情况被称之为层叠，这里面的主要内容是跟选择器的权重值有关,当选择器权重一样的情况下，后面的代码把前面的代码给覆盖掉，与代码的先后顺序有关系
6、浮动:
float : none/left/right;
带来的影响:
让默认纵向排列的元素横向显示
缺点:脱离文档流,产生高度塌陷
7、清除浮动
clear : left/right/both/none;
8、元素类型之间互相转化,使用display属性
如何隐藏—个元素
display:none;
/*显示或隐藏属性*/
visibility:hidden;
height:0px;
/*透明度属性*/
opacity:0;
/*缩放，隐藏元素，占页面空间*/
transform: scale(0);
9、如何在不隐藏元素的同时把元素里面的文本隐藏掉
font-size:0px;
/*缩进*/
text-indent:-99999px;
10、如何让一个元素变成块级元素
display: block
float : left
position: absolute/fixed
让元素变成弹性盒子: display: flex
父元素变成网格: display: grid
11、如何实现益出显示三个圆点
div{
width:200px;
/*让文本不折行 ====剩余空间位置*/
white-space:nowrap;
oveflow:hidden;
/* 超出部分变成圆点 */
text-overflow: ellipsis
}
12、请列列举出来h5新增的语义化标签(10个)
header,section,footer,nav main,article,aside,figure,figcaption,audio,video
13、请列举五个块级元素同上
14、如何制作一个三角形,向左
div{
/*为啥使用行内块元素,因为这样能与前面文本横向排列,避免浮动*/
display:inline-block;
width:0px;
height:0px;
border:10px solid transparent;
border-right:10px solid red;
}
15、如何实现让一个元素水平垂直居中
1)使用定位(文元素)
.father{
pomition:relative;
}
.son{
width:20Opx;
heighe:200px;
background-color:red;
position:absolute;
top:50%;
margin-top:-100px;
left:50%:
margin-left:-100px;
}
2)使用弹性盒子
.father{
display:flex;
}
.son{
margin:auto;
}
16、弹性盒子里面:margin:muto实现的原理
justify-content:center;
alin-item:center;
17、浮动带来的影响是高度塌陷
如何能解决高度塌陷?
1)给父元素添加固定的高度
2)有补位元素的话:给补位元素清除浮动带来的影响
clear: both
3)没有补位元素:
a)自己悄悄的补一个元素,必须是一个块级元素:你悄悄的清除浮动
弊端:页面中多了一个元素
b)给交元素添加一个oveflow: hidden:就触发了BFC，形成了一个独立的区球不会干扰到外界
弊瑞:能把其他定位到外边距的元素隐藏掉
4)万能清除法
.wnqc:after{
content:”勇哥真帅;
display:block;
clear: both;
width:0px;
height:0px;
visibility:hidden;
}
基础代码:
.wnqc:after{
/* 必须添加的:标配基础语法*/
content:"";
/* 让追加进来的元素,变成块元素：因为伪元素加进来的是行内元素，
不能清除浮动，所以得转成块元素
*/
display:block;
/* 清除浮动带来的影响，推荐使用both，left和right不推荐，不确定是哪一边*/
clear:both;
/* 另外一部分代码解决隐藏：往content内添加的文本;兼容性*/
width:0px;
height:0px;
font-size:0px;
/* 隐藏content内的元素 */
/* font-size: 0px; */
/* overflow: hidden; */
/* visibility: hidden; */
/* opacity: 0; */
}
18、盒子模型总共分为几种?盒子模型由几部分组成的?二者的区别?
两种:标准盒子模型,怪异盒子模型
四部分组成:内答(width height)，内边距(padding)，边框(border)，外边距(margin)标淮含子模型和怪异盒子模型之间的区别主要在于,盒子模型的计算方法不—样
通过box-sising属性可以改变盒子模型的计算方法
bos-sizing:content-box就是标准盒子:不添加box-sizing属性的话也是标准盒子模型
添加box-sizing:border-box的时候就是怪异盒子模型
盒子计算方法;
标准盒子模型:
实际宽度=width+左右padding+左右border+左右+argin文际高度=height+上下paddingt上下border-上下margin
怪异盒子模型:
实际宽度=width+左右rmrgin
实际高度=height+上下margin
19、什么是BFC BFC主要解决了什么问题?
BFC被释义成了块级格式化上下文，以独立的一个区域进行显示的，在里面设置的效果间距，等等，
不会干扰到外界，也不会受到外界的干扰(国中国)
如何触发一个BFC:
添加float : left/right
添加position: absolute/ fixed
添加oveflow: hidden
BFC主要解决的问题:
1)高度塌陷
2) margin-top作用到父元素上面
3)解决边距重合问题
20、浮动和定位(绝对，固定)的区别
相同点:
1)都能触发BFC
2)如果添加浮动和定位元素后面的元素中没有文本、图片。
这样的情况下二者实现效果一致，都属于脱离文档流
3)都能让元素变成块级元素
4)对自适应的元素(没有宽，没有高)添加浮动和定位后，仍然是自适应的，宽度变成文本的宽
5) margin:0 auto会失效
不同点:
1)如果后面的元素中有内容的话，实现效果不一致，虽然都属于脱离文档流
浮动:半脱离文档流
定位:全脱离文档流
2)使用情况，浮动应用于布局元素横向显示，定位用来调整元素位置
3)都添加浮动的话，元素会横向显示;都添加定位的话会产生层叠效果
21、哪些属性值可以取负值
缩进：text-indent
margin:
定位的偏移属性: top,right, bottom,left,
旋转：transform:rotate(-10deg)
平移：transform:translatex(-100px)
缩放：transfoem:scale(-l)
背景定位：background-position: x y
层级：z-index
22、实现透明的效果
rgba(0,0,0,.5)
背景颜色透明：transparent
透明度属性：opacity :0-1
ie兼容
filter:alpha(opacity=1-100)
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
