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

    前言 我一直在 Linux 桌面系统下的探索寻找各种界面美观.使用舒适的软件工具.对于Linux下的开发人员来讲,这几年最大的福利就是 MicroSoft 推出的 Visual Studio Code ...

  2. 从SQL注入到内网漫游

    前言 在一次渗透实战中,发现了一个注入点,最后成功的漫游了内网. 正文 在渗透中遇到一个站点,顺手测试了一下,在搜索框随便输入了一个字符加个单引号直接报错了,差不多可以确认这里存在注入了.一般这种站安 ...

  3. SEO需要掌握的基础知识

    什么是SEO?  官方解释:  SEO是指通过对网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名, 从而把精准用户带到网站,获得免费流量,产生直接销售或品牌推广 ...

  4. [Swift]LeetCode74. 搜索二维矩阵 | Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  5. [Swift]LeetCode435. 无重叠区间 | Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  6. [Swift]LeetCode498. 对角线遍历 | Diagonal Traverse

    Given a matrix of M x N elements (M rows, N columns), return all elements of the matrix in diagonal ...

  7. [Swift]LeetCode806. 写字符串需要的行数 | Number of Lines To Write String

    We are to write the letters of a given string S, from left to right into lines. Each line has maximu ...

  8. 低延时的P2P HLS直播技术实践

    本文根据4月21日OSC源创会·武汉站的现场分享为蓝本,重新整理.以下是演讲内容: 近几年,随着直播.短视频等视频领域对带宽要求的提升以及CDN行业竞争的加剧,很多CDN公司开始往P2P-CDN方向发 ...

  9. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  10. Kafka监控系统Kafka Eagle剖析

    1.概述 最近有同学留言反馈了使用Kafka监控工具Kafka Eagle的一些问题,这里笔者特意整理了这些问题.并且希望通过这篇博客来解答这些同学的在使用Kafka Eagle的时候遇到的一些困惑, ...