一、定位
1.1页面常见布局方式
1、标准流
块级元素独占一行——>垂直布局；
行内元素/行内块元素一行显示多个——>水平布局；
2、浮动
可以让原本垂直布局的块级元素变成水平布局；
3、定位
可以让元素自由地摆在网页的任意位置；
一般用于盒子之间的层叠情况；
搭建一个网页需要用到哪些布局方式？
答：用到了3种布局方式。分别是标准流、浮动和定位。
1.2定位的常见应用场景
1、可以解决盒子与盒子之间的层叠问题
定位之后的元素层级最高，可以层叠在其他盒子上面；比如下图中的Hot：
可以让盒子始终固定在屏幕中的某个位置：
如下图，京东上面那一条搜索框的盒子保持不动，鼠标滑动，下面的内容动，也就是说搜索的盒子压在了内容的上面：
1.3定位的使用步骤
首先，设置定位方式；
属性名position；常用的属性值如下：static就是不定位，加不加没影响；
然后，设置偏移值。水平和垂直方向各选一个，left和right中只选择一个，根据就近原则；top和bottom中只选择一个，根据就近原则；比如，hot图标，离右边和上边近，就选择right和top。
1.4相对定位
相对于自己之前的位置进行移动；
代码：position:relative;
特点：
1. 占有原来的位置——>没有脱标
2. 仍然具体标签原有的显示模式特点
3. 改变位置参照自己原来的位置
没写相对定位之前，如图所示，是三个标准流：
写了定位以后，如图所示，粉色盒子移动了，并且原来的位置没有被占领：
.box {
position: relative;
left: 100px;
top: 200px;
/*
1. 占有原来的位置
2. 仍然具体标签原有的显示模式特点
3. 改变位置参照自己原来的位置
*/
width: 200px;
height: 200px;
background-color: pink;
}相对定位不会改变盒子的属性，这个盒子是块级元素，加了相对定位也是。
注意事项：1、如果只加了position，没加left这些，盒子不会移动。
2、如果left和right都写上了，以left为准；如果top和bottom都写上了，以top为准；
1.5绝对定位
相对于非静态定位的父元素进行定位：在盒子1里面写绝对定位，如果盒子1的父级标签没有写定位（静态定位相当于没有定位），参照物就是浏览器窗口；如果盒子1的父级标签写了定位，参照物就是父级。
代码：position:absolute;
方法：先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位。就是以浏览器为参照物，向左或者右移动。这个父级是一个广义的父级，爷爷辈的可以，爷爷的爸爸辈儿也可以。
绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位
特点：
1. 脱标, 不占位
2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
一般来说：子级写了绝对定位，其父级一般写相对定位（可以不写left那些），简称子绝父相；
学成在线案例可以加hot图标。
1.5.1关于居中
如果是标准流，用margin:0 auto;
如果是定位的要居中，绝对定位的盒子不能使用左右margin auto居中，
法一代码如下：
.box {
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
margin-left: -200px;
top: 50%;
margin-top: -150px;
width: 400px;
height: 300px;
background-color: pink;
}法二：使用法二更好，用二！
.box {
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
left: 50%;
top: 50%;
/* 实现位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: pink;
}若子级和父级宽度相同，可以写width:100%，用了绝对定位，会转成行内块，如果没有内容就不会把盒子撑开，所以写了绝对定位一定要写宽高！
1.6 固定定位
.box {
position: fixed;
left: 0;
top: 0;
/*
1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点
*/
width: 200px;
height: 200px;
background-color: pink;
} 1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点
1.7 元素的层级关系
标准流显示在最底下，定位在最上面。
都是定位的，那么层级就是一样的，哪个写在后面，他就会在前面元素的上面。不过还可以用z-index，哪个的数字大，哪个就在上面。
默认情况下, 定位的盒子 后来者居上 ；
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0；
注意: z-index必须配合定位才生效；
.one {
position: absolute;
left: 20px;
top: 50px;
z-index: 1;
background-color: pink;
}
.two {
position: absolute;
left: 50px;
top: 100px;
background-color: skyblue;
}二、装饰
2.1 基线
浏览器解析文字的时候默认按照基线对齐
按照基线对齐，就会容易一个往上一些，一个往下一些，比如上图的p，下面就凸出来了。
2.2 垂直对齐
垂直方向拧巴着，就可以用垂直对齐。
例如：如下图，就是拧巴着的
加上vertical-align:middle;以后如下图：
浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象，就导致垂直方向无法对齐；
vertical-align专治各种垂直不服。
要让图片垂直居中：在图片的父级加line-height: 父级的高;且在图片这一级加上vertical-align: middle;
要让图片水平居中，在图片的父级加text-align: center。和让文字水平居中是一样的，因为浏览器对行内、行内块当文字处理；
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>2.3 光标类型
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 手型 */
/* cursor: pointer; */
/* 工字型, 表示可以复制 */
/* cursor: text; */
/* 十字型, 表示可以移动 */
cursor: move;
}
</style>
</head>
<body>
<div>div</div>
</body>2.4 边框圆角
属性值就是圆角的半径；4个值分别是左上、右上、右下、左下（顺时针），如若没写满4个值，就是取对角的那个值。
.box {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值: 表示4个角是相同的 */
border-radius: 10px;
/* 4值: 左上 右上 右下 左下 -- 从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* border-radius: 10px 40px 80px; */
/* border-radius: 10px 80px; */
}
胶囊按钮图示：
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% : 取盒子尺寸的一半 */
border-radius: 50%;
}
/* 胶囊状: 长方形, border-radius取值是高度的一半 */
.two {
width: 400px;
height: 200px;
background-color: skyblue;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>2.5 overflow溢出部分显示效果
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域；
如图所示：
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow
常见属性值：
一般hidden最常用，用来解决问题。
2.6 元素本身隐藏
场景：让某元素本身在屏幕中不可见。
常见属性： 1. visibility：hidden
2. display：none（更常用）
区别： 1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
2. display：none 隐藏元素本身，并且在网页中 不占位置
注意点： • 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
可以在设置鼠标悬停的hover伪类结构选择器里面写 display：block；
2.7 元素整体透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
注意点： opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
