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

    注释以 <!-- 开始并以 --> 结束, 例如 <!--注释内容-->. 注释可以出现在文档序言中,包括文档类型定义 (DTD):文档之后:或文本内容中. 注释不能出现在属性 ...

  2. 【RL-TCPnet网络教程】第12章 TCP传输控制协议基础知识

    第12章      TCP传输控制协议基础知识 本章节为大家讲解TCP(Transmission Control Protocol,传输控制协议),通过本章节的学习,需要大家对TCP有个基本的认识,方 ...

  3. [Swift]LeetCode253.会议室 II $ Meeting Rooms II

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  4. Kubernetes---pod--重启策略

    restartPolicy: Always: 默认 , 总是重启 OnFailure : 错误事重启 Never: 从来不重启 Default  to Always:

  5. Node.js 种子下载器

    Node.js 种子下载器 庆祝 2018 国庆,制作了一个 Node.js 的种子下载器.爬取页面,根据页面的链接,破解另外一个网站,下载种子文件.项目比较简单,爬取页面没有使用任何爬虫框架.项目源 ...

  6. GraphQL-前端开发的利剑与桥梁

    GraphQL-前端开发的利剑与桥梁 基本概念 GraphQL GraphQL 是一种用于 API 的查询语言,由Facebook开发和开源,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的 ...

  7. mongo 根据对象中的某个条件来查询

    假如A表有如下数据 { "id" : 1, "users_info" : [{"uid" : 10001}, {"uid" ...

  8. GoJS学习笔记

    GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...

  9. Python内置函数(21)——filter

    英文文档: filter(function, iterable) Construct an iterator from those elements of iterable for which fun ...

  10. java基础(十五)----- Java 最全异常详解 ——Java高级开发必须懂的

    本文将详解java中的异常和异常处理机制 异常简介 什么是异常? 程序运行时,发生的不被期望的事件,它阻止了程序按照程序员的预期正常执行,这就是异常. Java异常的分类和类结构图 1.Java中的所 ...