本萌新还未毕业，在一家外包公司干了一个月，因烦恼日常琐事任务，深感外包之坑，以及上班路途艰辛，特转战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>

CSS宽高背景介绍的更多相关文章

  1. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  2. CSS——宽高问题大汇总

    1.宽高继承 他们是要属性的,并不是直接就能继承,inherit. 2.浮动的盒子不要给宽,宽度由内容来决定

  3. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  4. 关于css宽高问题

    问题:span标签的width和height分别为多少? <!DOCTYPE html> <html> <head> <meta charset=" ...

  5. CSS 宽,高,背景设置

    width 宽,height 高,background 背景:背景色 background-color:颜色值--英文单词/十六进制/rgb:背景图 background-image:url(‘图片路 ...

  6. 前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  7. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

随机推荐

  1. Lesson 28 No parking

    Text Jasper White is one of those rare people who believes in ancient myths. He has just bought a ne ...

  2. [Swift]LeetCode664. 奇怪的打印机 | Strange Printer

    There is a strange printer with the following two special requirements: The printer can only print a ...

  3. [Swift]LeetCode746. 使用最小花费爬楼梯 | Min Cost Climbing Stairs

    On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you pay ...

  4. [Swift]LeetCode995. K 连续位的最小翻转次数 | Minimum Number of K Consecutive Bit Flips

    In an array A containing only 0s and 1s, a K-bit flip consists of choosing a (contiguous) subarray o ...

  5. 机器学习入门 - Google机器学习速成课程 - 笔记汇总

    机器学习入门 - Google机器学习速成课程 https://www.cnblogs.com/anliven/p/6107783.html MLCC简介 前提条件和准备工作 完成课程的下一步 机器学 ...

  6. 第五周 IP通信基础回顾

    广播请求,单播响应,ARP IPV4,IP地址32位二进制代码分为8个位一组 路由器每一个接口都是一个网段 ,网段与网段区分看网络地址 同一段链路是同网段 直接广播:主机号全为1 受限广播:全为1 特 ...

  7. 剖析项目多个logback配置(上)

    来源:http://www.cnblogs.com/guozp/p/5949744.html 以下两个是我在使用slf4j + logback时候日志提示的问题,问题不大,都是WARN,并不真正影响运 ...

  8. JavaDBF：保存行情实时数据到DBF文件

    JavaDBF.jar其实很早都不再更新了,在日新月异的科技圈算得上远古上神的jar包,早该身归混沌了. 但我们的项目要用到,因为之前做的大宗期货交易行情的分析文件依然是dbf文件,没有办法,还得用 ...

  9. asp.net mvc中action接收客户端发送过来的html片段

    出于安全的考虑,默认情况下,如果从客户端发送过来的数据中直接包括了HTML内容,ASP.NET会自动启动保护措施,这当然是一个比较好的设计,只不过在某种情况下我们真的需要获取这个值,那我们应该怎么办呢 ...

  10. SpringBoot+gradle项目构建war

    前言 一开始觉得这并不是什么很难的事情,但是踩坑了之后才发现... 步骤 1.在build.gradle配置文件中加入apply plugin: 'war' 很多人以为这样就完事了,我一开始也是这样认 ...