WEB前端第十三课——浏览器内核、位置

RainyX 2020-07-26

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>

相关推荐

玫瑰余香000 / 0评论 2013-05-30