第五模块：第五模块：WEB开发基础-第2章 CSS

1.列举你知道的css选择器
一.基础选择器
标签（元素）选择器
p{}
类（class）选择器
.active{}
id（身份证号）选择器
#peiqi{}
二.高级选择器
后代选择器
div a{}
子代选择器
.wrap>a{}
组合选择器
h3,span{}
交集选择器
h2.active{}
伪类选择器
没有被访问过a的状态
a:link{
color:orange;
}
访问过后的a的状态
a:visited{
color: green;
}
鼠标悬浮时a的状态
a:hover{
color: black;
}
鼠标按住时a的状态
a.active{
color: purple;
}
div:hover span{}
2.分别阐述类选择器和id选择器的作用
类选择器:
任何元素都可以设置类
一个元素可以设置多个类
一定要有归类的概念，公共类的想法。选中页面的元素，设置相同的属性
id选择器：
任何元素都可以设置id
id是唯一的，不能重复，表示选中的是有特定元素
3.如何重置网页样式
body,p,ul,ol,dl,dt{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
input{
border: none;
outline: none;
}
a{
text-decoration: none;
}
4.对盒模型是怎么理解的？它们的属性有哪些？
在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型
内容的宽高 内边距 外边距 边框
外边距:margin
span{
background-color: red;
}
.xiongda{
margin-right: 20px;
}
margin垂直方向上会出现外边距合并 外边距塌陷

盒子居中:margin: 0 auto;

边框:border
border: 1px solid red;
border-width: 4px 10px;
border-style: solid dotted double dashed;
border-color: green red purple yellow;
搜索框
.username{
width: 200px;
height: 40px;
font-size: 20px;
padding-left: 10px;
border: 1px solid #666;
}

内边距:padding
padding-top: 20px;
padding-left:20px;
padding-bottom: 20px;
padding-right: 20px;

上下左右 padding: 20px
上下 左右 padding: 20px 40px
上 左右 下 padding: 20px 30px 40px
上 右 下 左 padding: 10px 20px 30px 40px

实际内容
5.什么是标准文档流？
web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
从左往右，从上往下，流式布局

标准文档流下 有哪些微观现象？
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
6.浮动盒子的特点？浮动的好处？如何清除浮动？
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果

1.给父元素设置固定高度
缺点：使用不灵活，后期不宜维护
应用：网页中盒子固定高度的区域，比如固定的导航栏
2.内墙法 （了解）
规则：在最后一个浮动元素的后面加一个块级元素，并且设置该属性
clear: both
缺点：结构冗余
3.伪元素（选择器）清除法
.clearfix::after{
content: “”;
display: block;
clear: both;
}
4.overflow:hidden
overflow: hidden;
7.精灵图的好处是什么？
减少http请求数量
加速内容显示
8.定位有几种？阐述一下“父相子绝”定位是怎样理解的？
1.相对定位 position:relative
不脱离标准文档流，可以调整元素
参考点：以原来的位置为参考点

2.绝对定位 position:absolute
特点：
1.脱离标准文档流,不在页面上占位置
2.层级提高，压盖现象
参考点：
相对于最近的非statics祖先元素定位，如果没有非statics祖先元素，那么以页面根元素左上角进行定位
网站实战应用：子绝父相

3.固定定位 position:fixed
特点
1.脱离标准文档流
2.一旦设置固定定位，在页面中滚动网页，固定不变
参考点：以浏览器左上角为参考点
应用：小广告，回到顶部，固定导航栏

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
9.什么样的盒子脱离了文档标准流？脱离文档标准流的盒子的特点是怎样的？
浮动元素脱离了标准文档流

1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
10.z-index的规则是怎样的？
z-index 值表示谁压着谁，数值大的压盖住数值小的，

只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，
而浮动元素不能使用z-index

z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，
那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

从父现象：父亲怂了，儿子再牛逼也没用
11.display属性值有哪些？分别描述他们的意思？
块级元素：div p h ul ol table form
独占一行，可以设置宽高
display:block

行内元素：a span span em lable
一行内显示，不能设置宽高
display:inlie

行内块元素：input image
一行内显示，可以设置宽高
display:inline-block

标签：WEB,定位,元素,padding,第五,参考点,模块,20px,选择器
来源： https://blog.csdn.net/qq_36993243/article/details/113853069