zoukankan      html  css  js  c++  java
  • 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 {
                 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 {
                 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{  150px; height: 150px; background-color: pink; float: left;}
            div.two{  150px; height: 150px; background-color: hotpink; float: left;}
            div.three{  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{
                 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{
                 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>
    

      

  • 相关阅读:
    MySQL "show users"
    MySQL
    A MySQL 'create table' syntax example
    MySQL backup
    MySQL show status
    Tomcat, pathinfo, and servlets
    Servlet forward example
    Servlet redirect example
    Java servlet example
    How to forward from one JSP to another JSP
  • 原文地址:https://www.cnblogs.com/husa/p/13378944.html
Copyright © 2011-2022 走看看