本萌新还未毕业，在一家外包公司干了一个月，因烦恼日常琐事任务，深感外包之坑，以及上班路途艰辛，特转战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. JavaEE开发之Spring中的依赖注入与AOP编程

    上篇博客我们系统的聊了<JavaEE开发之基于Eclipse的环境搭建以及Maven Web App的创建>,并在之前的博客中我们聊了依赖注入的相关东西,并且使用Objective-C的R ...

  2. JVM性能调优监控命令jps、jinfo、jstat、jmap+jhat、jstack使用详解

    JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外,还有jps.jinfo.jstat.jmap+jhat.jstack等小巧的工具,本博客希望能起抛砖 ...

  3. 动态规划----最长递增子序列问题(LIS)

    题目: 输出最长递增子序列的长度,如输入 4 2 3 1 5 6,输出 4 (因为 2 3 5 6组成了最长递增子序列). 暴力破解法:这种方法很简单,两层for循环搞定,时间复杂度是O(N2). 动 ...

  4. [Swift]LeetCode148. 排序链表 | Sort List

    Sort a linked list in O(n log n) time using constant space complexity. Example 1: Input: 4->2-> ...

  5. [Swift]LeetCode343. 整数拆分 | Integer Break

    Given a positive integer n, break it into the sum of at least two positive integers and maximize the ...

  6. [Swift]LeetCode825. 适龄的朋友 | Friends Of Appropriate Ages

    Some people will make friend requests. The list of their ages is given and ages[i] is the age of the ...

  7. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  8. 学习Python--函数进阶

    函数进阶 目标 函数参数和返回值的作用 函数的返回值 进阶 函数的参数 进阶 递归函数 01. 函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以 相互组合,一共有 4 种 组合形 ...

  9. Zabbix系列之七——添加磁盘IO监测

    zabbix给我们提供了一些较常用的监控模板,但现在我们如果想要监控我们磁盘的IO,这时候zabbix并没有给我们提供这么一个模板,所以我们需要自己来创建一个模板来完成磁盘IO的监控. 1. [roo ...

  10. 【从零开始自制CPU之学习篇07】最简单的ALU—全加器

    ALU是算术逻辑单元,是CPU中重要的一部分,因为CPU本质上就是不断重复最简单的计算.而我们这一版CPU的ALU部分更为简单,是一个只能做加法的ALU. 理论部分 我们需要一个能帮我们进行数学计算的 ...