zoukankan      html  css  js  c++  java
  • CSS宽高背景介绍

      本萌新还未毕业,在一家外包公司干了一个月,因烦恼日常琐事任务,深感外包之坑,以及上班路途艰辛,特转战erp实施,继写日常随笔,望来日屌丝逆袭,走上人生巅峰。

    若有错误,请前辈指点迷津,在下谢过。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>宽,高,背景</title>
        <style>
            /*html{
                font-size: 30px;
            }*/
            body{
                font-size: 20px;
            }
    
            div{
                width: 200px;
                height: 900px;
                /*对于这个div元素,你想设置多少宽高,比如宽是100px,高是10px
                这些东西你随便设置(根据实际需要)*/
    
                /*对于一个元素(比如div,span,a什么的,html
                5还出现了一些新的标签,例如canvas。所谓的样式就是对
                元素,或者元素里面的字体或图片进行设置(文本样式))*/
    
                /*background-color:#000;*/
                /*background-color: red;*/
                /*background-color: rgb(0,0,0);*/
                /*background-color: rgba(0,0,0,0.5);*/
                /*这是背景的表示方式*/
    
                /*background-image: url(search.png);*/
    
                /*background-position: left top;*/
                /*background-position: center center;*/
                /*background-position: 20px 10px;*/
                /*background-position: 20px 20px;*/
                /*背景图片的位置,第一个值为水平方向,第二个为垂直方向。可以是数值也可以是top,center类*/
                
                /*background-repeat: no-repeat;*/
                /*background-repeat: repeat-x;*/
                /*background-repeat: repeat-y;*/
                /*这是设定背景图片是否平铺,以及平铺方向。*/
    
                /*接下来是复合型写法,给元素一张背景图片,位置,是否平铺。*/
                background:red url(search.png) 50px 0px no-repeat;
    
                /*了解背景的其他属性*/
    
                background-attachment:fixed;
                /*背景图是否滚动scroll是滚动;fixed相对于屏幕某个位置固定,不随滚动条移动; */
                
                /*background-size: 50% 50%;*/
                background-size: 10px 500px;
                /*设置背景图片大小,此属性有兼容性问题*/
                /*更多的比如多背景等,以后讲解,这些常用属性要熟悉。*/
                
    
            }
            /*span{
                display: block;
                font-size: 4em;
            }
            span a{
                display: block;
                font-size: 1em;
            }*/
            /*span{
                display: block;
                font-size: 2rem;
            }
            span a{
                display: block;
                font-size: 2rem;
            }*/
        </style>
    </head>
    <body>
        <div>这是一个容器,接下来我们对容器的宽,高,背景进行一些设置。
        </div>
    
        <!-- <span>
        这是em
            <a href="javascript;">这是span标签下的em</a>
        </span> -->
        <!-- 在body下加入一个span元素,对span元素设置字体大小em,其会继承父级元素body的字体大小,span下的a为1em,意思是a中字体大小和父级span字体大小一直。可见如果嵌套越复杂,em越复杂。 -->
    
        <!-- <span>
        这是rem
            <a href="javascript;">这是span标签下的rem</a>
        </span> -->
        <!-- rem是相对根元素html大小进行设定的,(px相对body,em相对父级),如果当浏览器缩放影响到字体效果的时候,会用rem来设置字体样式,当然css3会有兼容性问题,对于ie6-8,我们可以一起和px一起写。 -->
        
        <!-- 一般会在html或者body中加入font-size:62.5%,
        就是16px=1.6em=1.6rem;可以更方便书写。
        关于单位的问题就谈到这里,了解有限,等到实际业务再做分析。 -->
    
    
    </body>
    </html>
  • 相关阅读:
    列式数据库
    Subway POJ
    操作系统知识汇总
    Linux工具指南
    常用数据结构
    bzoj1257: [CQOI2007]余数之和 整除分块
    HDU
    hdu1693 Eat the Trees 插头dp
    HDU
    poj2411 轮廓线dp裸题
  • 原文地址:https://www.cnblogs.com/LoveMarvin/p/8325467.html
Copyright © 2011-2022 走看看