[19/06/07-星期五] CSS基础_布局&定位&背景样式

时间 2019-11-16

标签星期五 css 基础布局定位背景样式栏目 CSS 繁體版

原文原文链接

1、固定布局（不适应设备的浏览器的变化）css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单布局</title>
        <style type="text/css">
            /*清除默认样式*/
            *{
                margin: 0;
                padding: 0;
            }
            .header{
                width: 1000px;
                height: 100px;
                background-color: yellowgreen;
                margin: 0 auto;
            }
            .content{
                width: 1000px;
                height: 400px;
                background-color: orange;
                margin: 10px auto;
            }
                .left{
                    width: 200px;
                    height: 100%;
                    background-color: skyblue;
                    /*设置向左浮动*/
                    float: left;
                        }
                .center{
                    width: 580px;
                    height: 100%;
                    background-color: royalblue;
                    float: left;
                    margin: 0 10px;
                    
                }
                .right{
                    width: 200px;
                    height: 100%;
                    background-color: cyan;
                    float: left;
                }
            .footer{
                width: 1000px;
                height: 100px;
                background-color: salmon;
                margin: 0 auto;
            }
            
        </style>
    </head>
    <body>
        <!--头部信息-->
        <div class="header"> </div>
            
        <!--主体内容-->
        <div class="content"> 
            <!--左中右3个div-->
            <div class="left"> </div>
            <div class="center"> </div>
            <div class="right"> </div>    
        </div>
            
        <!--底部信息-->
        <div class="footer"> </div>
            
        
    </body>
</html>

扩展：高度塌陷html

　　在文档流中，父元素的高度默认被子元素撑开，也就是子元素多高，父元素就多高。浏览器

　　在浮动流中，当为子元素设置浮动之后，子元素会彻底脱离文档流，此时会致使子元素没法撑起父元素的高度，即会致使父元素的塌陷。因为父元素的高度塌陷，因此布局

会致使父元素下边的元素向上移动，这样页面会很混乱。因此必定要避免高度塌陷。网站

解决方案1：能够将父元素的高度写死，可是这样父元素的高度不能自动适应子元素高度的改变。因此这种方案不推荐。url

解决方案2：spa

　　根据W3C的标准，在页面中的元素都有一个隐含的属性叫Block Formatting Context 简称BFC，该属性能够打开或关闭，默认是关闭的。code

　　当设置开启以后，元素会具备以下的特性：orm

　　　　一、父元素的垂直外边距不会和子元素重叠。htm

　　　　二、开启BFC的元素不会被浮动元素所覆盖；

　　　　三、开启BFC的元素能够包含浮动的子元素。

　　如何开启？（只能间接开启）

　　　　一、设置元素浮动（即让父元素也浮动起来）：能够撑开高度，可是能够致使父元素的宽度丢失，并且也会致使下边元素上移

　　　　二、设置元素的绝对定位：跟方案1同样效果

　　　　三、设置元素为inline-block：能够解决问题，可是也是致使父元素的宽度丢失。

　　　　四、将元素的overflow设置为一个非visible的值。通常设置为auto或hidden是最好的方案，推荐设置为hidden，反作用最小。

注意：IE6及如下不支持BFC,它具备一个隐含属性叫haslayout，做用和BFC相似，能够开启这个。

　　　　开启方式：直接将元素的zoom（放大）设置为1便可，反作用最小。zoom： 1 表示不放大元素，可使用这种方式。只在IE中支持，其余不支持。

解决方案3：

前言：如何清除浮动的影响？

　　　　使用clear来清除其余浮动元素（上边元素）对当前元素（下边元素）的影响（即下边往上移动），其余元素该浮动还浮动，下边的不动即在原来的位置。

　　　　none：默认值，不清除浮动

　　　　left：清除左侧浮动

　　　　right：清除右侧浮动

　　　　both：清除两侧浮动元素对当前元素的影响，即清除对他影响最大的元素的浮动

　　能够在高度塌陷的父元素后边，添加一个空白的div,因为这个div没有浮动，能够撑开父元素的高度，而后再对它清除浮动，这样能够经过这个空白的div撑开高度，

基本没有反作用。使用这种方式虽然能够解决问题，可是会在页面中添加多余的结构。

　　经过after伪类，选中父元素的后边添加一个空白的块元素，而后清除浮动，原理跟div同样，效果同样，并且不会添加多余的div，最推荐的方式。在IE6不支持，因此

还须要使用haslayout来处理。

2、定位

　　指的是将指定的元素摆放在页面的任意位置。经过position属性来设置

　　可选值：　　static，默认值，元素没有开启定位

　　　　　　　　relative，元素开启相对定位

　　　　　　　　absolute，元素开启绝对定位

　　　　　　　　fixed，元素开启固定定位（也是绝对定位的一种）

　　当开启定位时，能够经过left、right、top、bottom来设置（是相对于自身定位位置的）左侧、右侧、上侧、下侧设置偏移量。一般只使用2个偏移量就能够对元素

定位。通常选择水平和垂直方向的偏移量来为元素定位。相对于自身定位的。

　　一、相对定位（relative）

　　　　　　　当开启相对定位可是不设置偏移量时，元素不会产生任何变化。

　　　　　　　相对定位的元素不会脱离文档流。

　　　　　　　相对定位会使元素提高一个层级。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: relative;
                left: 100px;/*开启左偏移，是相对于自身所在位置*/
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <!--div.box$*3 快捷键 建立3个div名字叫box1-3 -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

　　二、绝对定位（absolute）

　　　　　　　绝对定位会使元素脱离文档流。

　　　　　　　开启绝对定位若是不设置偏移量，元素的位置不会发生变化。

　　　　　　　绝对定位是相对于窗口的左上角，即浏览器窗口的左上角坐标是（0，0），是相对于最左上角定位的。准确说是相对于离他最近的开启了定位的祖先

　元素来定位的。若是祖先没有开启定位，是相对于浏览器窗口来定位，通常开启子元素的定位都会开启父元素的定位。

　　　　　　　绝对定位会提高一个层级，会改变元素的性质。　　　　

　　三、固定定位（fixed）

　　　　　　固定定位也是一种绝对定位，是种特殊的绝对定位。IE6不支持。

　　　　　　不一样点：永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器的位置不会随着滚动条向下的移动而移动，如网站的广告，二维码。

【扩展】元素的层级和透明度

　　若是元素的层级同样，则下边的元素会盖住上边的元素，这里的上下指的是代码结构上的上下。

　　经过z-index属性来指定元素的层级，能够设置为一个正整数来指定层级。层级越高，即整数的数字越大，越优先显示。对于没有开启定位的元素则不能使用z-index。

　　父元素的层级再高也盖不住子元素。

　　经过opacity来设置元素背景的透明度，它须要一个0-1之间的值。0，彻底透明；1，彻底不透明；0.5，半透明。在IE8及如下的浏览器不支持，须要使用以下属性：

　filter（滤镜）属性。filter：alpha（opacity=50）；50表示半透明，它须要一个0-100之间的值。

3、背景相关的样式　

　　一、使用图片作网页的背景（属性： background-image: url(../img/zhifou.jpg); ）

　　二、设置背景图片的位置（background-position）

　　三、设置背景图片是否随着页面滚动（background-attachment）

简写样式：background #bfa center no-repeat; 中间空格隔开，没有没有顺序要求，也没有数量的要求。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style type="text/css">
            .box1{
                width: 500px;
                height: 500px;
                margin: 0 auto;
                /*这里：若是背景图片大于指定的尺寸500*500，默认显示左上角的部分
                 要显示所有：一、把指定尺寸设置为图片的大小，即同样大就能够所有显示
                 * */
                background-image: url(../img/zhifou.jpg);
                /*若是背景图片小于指定尺寸，则把图片平铺，就是把图片多复制几个充满指定的尺寸。
                 * 能够同时为一个元素指定背景颜色和图片，这样背景颜色会做为背景图片的底色。
                 * 通常都会同时设置背景颜色和图片
                 * 
                 * 若是不想让图片平铺？
                 * 采起background-repeat: no-repeat; 不让图片重复，有多大显示多大。
                 * 默认双方向重复
                 * repeat-x:背景图片水平方向重复
                 * repeat-y:背景图片垂直方向重复
                 * 
                 */
                
                
                /* background-position:
                 * 调整背景图片在元素中的位置、可选值：left、right、top、bottom、center 选择其中的2个值
                       也可使用具体偏移量
                 * */
                background-position:left top ;/* 实际上就是9宫格，使用这5个值来肯定*/
                background-position:100px 100px ;
                /*2个值表示水平和垂直偏移量，正数表示向右和向下，负数表示相反的方向*/
                
                /*background-attachment:设置背景图片是否随着页面滚动
                 fixed:背景图片固定在某个位置，不随着页面滚动。 如博客的背景图片
                 scroll：默认值，背景图片随着窗口滚动
                 不随窗口滚动的图片通常设置给body
                 
                 * */
                background-attachment: fixed;
                
                
            }
        </style>
    </head>
    <body>
        <div class="box1"> </div>
            
        
    </body>
</html>

4、把图片作为按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按钮</title>
        <style type="text/css">
            .more{                
                display: block;/*将a转成块元素*/
                width: 200px;
                height: 200px;
                background-image: url(../img/更多.png);
                background-repeat:no-repeat ;                
            }
            .phone{
                display: block;
                width: 48px;
                height: 48px;
                background-image: url(../img/phone_black_48.png);
            }
            .phone:hover{/*伪类：设置鼠标放到图片上有变化的 能够换张背景图*/
                background-image:url(../img/phone_blue_48.png) ;                
            }
            /*同理也能够设置active这个伪类，当点击图片时有变化*/
            /*问题：
             * 背景图片是之外部资源的形式加载进网页的，浏览器每加载一个外部资源就须要单独发送一次请求。
             *可是浏览器的外部资源不是同时加载的，用的时候才会去加载。可是加载有时间差，有段时间背景图片
             * 没法显示，通常不会注意到。解决措施将2个图片整合成一个图片，这样能够将3个图片同时加载出来，
             * 而后使用图片的偏移量来切换图片的显示位置，这种技术叫图片的整合技术(CSS-Sprite,雪碧图)
             * 优势：
             * 一、浏览器只需发送一次请求，提升访问效率，提升用户体验。
             * 二、将多个图片整合成一张图片即雪碧图，减少了图片的大小。注意找好雪碧图中每一个小图片的坐标。
             * 
             * */
        </style>
    </head>
    <body>
        <a class="more" href="https://www.baidu.com/"> </a>
        <a class="phone" href=""></a>
    </body>
</html>