WEB前端第十三课——浏览器内核、位置
1.浏览器内核及前缀
在CSS中新的属性标准尚未明确的情况下，各浏览器厂商对新属性的支持情况也不相同，这个阶段会对属性加厂商前缀进行区分。
根据不同的浏览器内核，CSS前缀有所不同，最基本的浏览器内核有四种，其他内核都是基于此四种进行再研发的。
① Gecko内核，前缀为“-moz-”，火狐浏览器
② Webkit内核，前缀是“-webkit-”，也叫谷歌内核，Chrome浏览器最先开发使用，Safari浏览器也使用该内核
目前，国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等
③ Trident内核，前缀为“-ms-”，也称 IE内核
④ Presto内核，前缀是“-o-”，目前只有Opera使用
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浏览器内核</title>
<style>
div {
width: 500px;
height: 500px;
background-color:orange;
border: 36px solid rgba(255,255,255,0.5);
margin: 60px auto;
padding: 50px;
font-size: 200px;
font-weight: bolder;
color: rgba(255,255,255,0.5);
text-align: center;
-webkit-background-clip: content-box;
/*属性值：
border-box，从边框开始实现背景
padding-box，从padding开始实现背景
content-box，从内容开始实现背景
text，从文本开始实现背景 为适应不同浏览器，需要同时设置带有不同浏览器内核前缀的属性
*/
}
</style>
</head>
<body>
<div>马可波罗</div>
</body>
</html>2.定位，定义元素相对于正常位置应该出现的位置
分类：
⑴ 普通流定位，Normal
⑵ 浮动定位
将元素排除在普通流之外，浮动元素不在页面中占据空间，可以放置在包含框的左边或者右边，浮动元素依旧位于包含框内
浮动元素框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框
浮动元素外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠、不会上下浮动
行内元素浮动后会变为块级元素
语法：float: none / left / right;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮动定位</title>
<style>
div {
width: 200px;
height: 200px;
}
div.one{ background-color: pink; float: right;}
div.two{ background-color: hotpink;}
div.three{ background-color: deeppink;}
</style>
</head>
<body>
<div class="one" align="center">1</div>
<div class="two" align="center">2</div>
<div class="three" align="center">3</div>
</body>
</html>清除浮动，是在使用了浮动之后必不可少的，为了网站布局的效果清除浮动也变的非常麻烦
属性 clear，属性值：left（清除左浮动）、right（清除右浮动）、both（全部清除）
常用清除方式：① 结尾处加空div标签 clear: both，或在下一个元素前加 clear:both ② 浮动元素的父元素定义伪元素“ ::after” ③ 浮动元素的父元素定义“overflow: hidden” ④ 浮动元素的父元素定高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮动定位</title>
<style>
div.parent{ border:2px solid red; overflow: hidden} /*第三种方式：overflow:hidden 或 display:inline-block 或 display:table-cell */
div.one{ width: 150px; height: 150px; background-color: pink; float: left;}
div.two{ width: 150px; height: 150px; background-color: hotpink; float: left;}
div.three{ width: 150px; height: 150px; background-color: deeppink; float: left;}
/*div.clear{ clear: both;} 第一种方式*/
/*div.parent::after{
content: "";
display: block;
clear: both;
} 第二种方式*/
</style>
</head>
<body>
<div class="parent">
<div class="one" align="center">1</div>
<div class="two" align="center">2</div>
<!-- <div class="clear"></div> 第一种方式-->
</div>
<div class="three" align="center">3</div>
</body>
</html>⑶ 相对定位
⑷ 绝对定位
⑸ 固定定位
3.display属性
根据CSS规范，每一个网页元素都有一个display属性，用于确定该元素的类型
每一个元素都有默认的display属性值，比如 div的默认display属性值为“ block”（块级元素），而 span的默认display属性值为“ inline”（行内元素）
块级元素与行内元素是可以转换的，即 display属性值可以设置修改
display常用属性值：
none，隐藏对象，且不占据空间
inline，指定对象为内联元素（行内元素）
block，指定对象为块级元素
inline-block，指定对象为内联块级元素，可以设置宽高、margin、padding，但会识别代码之间的空白！
table-cell，指定对象作为表格的单元格
flex，指定对象为弹性盒子
另外，visibility:hidden和 opacity:0 也会隐藏对象，但仍然占据物理空间
4.position定位，指定一个元素定位方法的类型
属性值：① static，默认值，元素显示在正常的内容流中，忽略top、bottom、left、right偏移量及z-index声明，一般用于去除定位
② relative，生成相对定位的元素，相对于其正常位置进行定位，因此，left:20px会向元素的left位置添加20像素，但其正常位置依然占据
③ fixed，生成固定定位的元素，一旦生成其原始位置不再占据，且不随浏览器界面滚动而改变，元素的位置通过 top、right、bottom、left属性值进行规定
④ absolute，生成绝对定位的元素，相对于浏览器窗口进行偏移，一旦发生偏移，原正常位置不再占有，元素的位置通过 top、right、bottom、left属性值进行规定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
left: 50px;
top: 30px;
/*position: absolute;*/
/*position: relative;*/
position: fixed;
}
pre{font-size: 130px;}
</style>
</head>
<body>
<div></div>
<pre>文本内容</pre>
<pre>文本内容</pre>
<pre>文本内容</pre>
<pre>文本内容</pre>
<pre>文本内容</pre>
</body>
</html>5.常用居中方式小结
文本内容水平居中，text-align:center
行内文字垂直居中，line-height=height
盒子水平居中，margin:0px center
子元素在父元素内居中，① 父元素定义为弹性盒子，display:flex; align-items:center; justify-content:center;
② 定义父元素为单元格，display:table-cell; vertical-align:middle; 子元素中定义水平居中，margin: 0 auto;
③ 定义父元素为相对位置，position:relative; 定义子元素为绝对位置，position:absolute; left:25%; top:25%;
6.z-index堆叠顺序
一旦修改了元素的定位方式，在元素可能发生堆叠，使用 z-index属性可以控制元素重叠的顺序
z-index属性：
① z-index仅能在定位的元素上生效
② z-index属性值为数值，数值越大表示堆叠越高，即离用户越近
③ 可以设置为负值，表示离用户更远，一般不建议设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
left: 100px;
top: 100px;
/*position: absolute;*/
position: relative;
/*position: fixed;*/
}
div:first-child{
background-color: deeppink;
left: 0px;
top: 0px;
z-index: 2;
}
div:last-child{
background-color: darkorange;
left: 200px;
top: 200px;
z-index: 3;
}
div:nth-child(2){
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>