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

    Given an unsorted array nums, reorder it such that nums[0] < nums[1] > nums[2] < nums[3]... ...

  2. python glob的安装和使用

    基本概念 glob是python自己带的一个文件操作相关模块,用它可以查找符合自己目的的文件,类似于Windows下的文件搜索,支持通配符操作.*,?,[]这三个通配符,*代表0个或多个字符,?代表一 ...

  3. 【Git】（2）---checkout、branch、log、diff、.gitignore

    常用命令 一.命令 1.checkout 切换分支 git checkout 分支名 #切换分支 #如果在当前分支上对文件进行修改之后,没有commit就切换到另外一个分支b, 这个时候会报错,因为没 ...

  4. 简单实现 C# 与 Javascript的兼容

    本文章介绍下自己这刚实现的一个c#与js交互的插件.需求来源于一次与朋友的讨论.主要对话如下: 朋友:最近我想模拟一些数据,来测试我现在写的接口,但手工编写这些测试数据太麻烦了 本人:是啊,.net能 ...

  5. 在.net core上使用Entity FramWork(Db first)

    在.net core中不可以向往常一样去直接可视化创建EF了,那我们可以通过命令安装 其依赖项有 Install-package Microsoft.EntityFrameworkCore Insta ...

  6. Python接口自动化

    1.unittest单元测试框架&接口介绍 2.接口测试框架设计 3.接口的安全机制 4.Mock服务介绍&实现原理 5.Jenkins使用和配置 6 .发送邮箱设置

  7. JSP面试题都在这里

    下面是我整理下来的JSP知识点: 图上的知识点都可以在我其他的文章内找到相应内容. JSP常见面试题 jsp静态包含和动态包含的区别 jsp静态包含和动态包含的区别 在讲解request对象的时候,我 ...

  8. LeetCode专题-Python实现之第28题： Implement strStr()

    导航页-LeetCode专题-Python实现 相关代码已经上传到github:https://github.com/exploitht/leetcode-python 文中代码为了不动官网提供的初始 ...

  9. css加载会造成阻塞吗

    本文由云+社区发表 作者:嘿嘿嘿 可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...

  10. 程序员十大热门flag，有你的吗？

    2018的尾声,南方人期盼已久的下雪天终于到了,实在是太鸡冻了! 而赏雪的喜悦也伴随着寒冷的忧伤 早上起床越来越难,衣服怎么裹都还是冷 这时,穿搭届的神话般的人物——程序员们,可能又要引起轰动了吧! ...