CSS | 背景和定位

2021-04-10


CSS 进阶篇



上一期的CSS技术贴向大家介绍了CSS的概念、CSS的基本语法和创建CSS文件的过程。感兴趣的小伙伴有没有试验呢~话不多说,开始今天的CSS课程~



01

CSS 背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。


CSS 在这方面的能力远远在 HTML 之上。


1

背景色

    可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。


    这条规则把元素的背景设置为灰色:


body {background-color: gray;}




2

背景图像

    要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。


    如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:


body {background-image: url(/i/eg_bg_04.gif);}



02

CSS 定位

    CSS 定位属性允许你对元素进行定位。


1

一切皆为


    div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容。



2

CSS position 属性含义:

static

    元素框正常生成。

relative (相对定位)

    元素框偏移某个距离(相对原来)。保持形状,原本所占空间仍保留。


#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}



absolute (绝对定位)


    元素原先所占空间会关闭,就好像元素原来不存在一样。定位后生成一个块级框(相对最近的已定位的父级/祖先元素),不论原来它是何种类型的框。


#box_relative {

  position: absolute;

  left: 30px;

  top: 20px;

}



原来框二的位置已被框三占据

 

fixed(固定定位)

    元素框的表现类似于将 position 设置为 absolute,不过是相对视窗本身。

    

    表现为固定在窗口的某位置,不随页面滚动而滚动

当向下滚动百度时,实时热点不会滚动。



父级/祖先元素:

。。。

<div>ç父/祖先元素(对于元素A)

<div>ç最近的父/祖先元素(对于元素A)

    <div></div>ç元素A

</div>

</div>

。。。


今天CSS技术贴 第二弹的内容到这里就结束啦,希望能为你的学习之旅助力,能起到一些帮助。


后续还会不断更新技术贴,欢迎你在下方留言区留言,和我们一起交流,共同学习,同样也可以留言你想学习的技术,我们倾力而为,为同学们做技术贴~下期再见~


责任编辑 | 于文博

相关文章

css背景渐变(动画)

2021-04-10
css背景渐变(动画) .writeFarming{ background: linear-gradient(-45deg, #2d8cf0, #19be6b, #ff9900, #ed3f14); animation: ...

CSS | 背景和定位

2021-04-10
CSS 进阶篇上一期的CSS技术贴向大家介绍了CSS的概念、CSS的基本语法和创建CSS文件的过程.感兴趣的小伙伴有没有试验呢~...

【专栏试读】(09)CSS 给盒子、背景、链接、列表、表单、表格等加样式 | CSS

2021-04-10
CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的.本篇的所有知识点为必掌握项,我们学...

CSS背景看这篇文章就够了【案例讲解】

2021-04-10
本文从简单到深入讲解了CSS背景相关的知识,请一定要耐心看完,切勿浮躁!CSS background是最常用的CSS属性之一.但是,在...

纯CSS实现常见的UI,多么朴实无华的CSS3

2021-04-10
笔者准备了一个aqua.css模版,大家可以用它来进行CSS的创作常见UI效果条纹效果demo地址:https://codepen.io/alphardex/pen/...

[CSS]背景图片中平铺与拉伸

2021-04-10
0x00 background-size在CSS中有background-size属性,平铺与拉伸可以通过下面两个值实现:平铺:cover拉伸:100% 100%0x01 ...

CSS常用属性

2021-04-10
CSS字体属性字体大小:font-size: px/em/pt;(值使用数值即可)字体样式:font-style: oblique;(偏斜体) italic;(斜体) normal;...

9个独特的 CSS 背景视觉效果

2021-04-10
CSS颜色混合模型(Blend Mode)视觉效果CSS的混合模型(Blend Mode)是一个新属性,可以实现Photoshop中的图层的混合模型...

奇思妙想CSS之百变背景

2021-04-10
css-doodle,后面会专门写一篇针对css-doodle的讲解.关注公众号【前端筱园】,回复“CSS背景”获取本期全部源码;动态背景上...

css 网页视频背景

2021-04-10
通过css的固定定位修饰video标签,让video占满整个窗口,然后在video标签下面正常写你的页面内容即可.具体操作:1. 给video 宽...

随机推荐

Nordic发布通过蓝牙5认证的量产级协议栈及配套的SDK以帮助客户开发蓝牙5认证终端产品

2021-04-26
“nRF52832自推出以来一直深受蓝牙开发人员社群所欢迎.现在,许多开发人员渴望利用蓝牙5出色的新特性,包括较高速度2Mbps...

全网唯一:移动互联网服务器端开发课程!

2021-04-20
移动互联网时代来了!App市场爆发式增长为Web开发程序员带来新一轮机遇,近两年新增创业者,几乎全部选择了移动互联网项目!...

iPhone 已落后安卓3年?啪啪打脸...

2021-03-24
今年可是2020年啊,安卓手机内存都已经搭配 12GB 了!苹果这是要步诺基亚后尘呀?/ 黑鲨游戏手机3 宣传页这是什么概念呢?举个...

Wowza 技术:在Linux系统(Ubuntu和SUSE)下,如何使用Intel Quick Sync 加速编码?

2021-03-11
这篇文章介绍了在Linux系统下,如何使用这个Intel Quick Sync 加速编码技术: Ubuntu Server 12.04 (amd64) 系统下的配置指南...

酷工作丨学而思网校招 PHP 实习生、中兴通讯招前端/Python 工程师、字节跳动招高级前端工程师、伴芯多岗位招聘

2020-07-30
也为社区开发者提供招聘信息参考.点击阅读原文进入社区联系意向公司,还有更多工作机会可选哦~更多合作可发送邮件咨询:bd@...

实习基地内推 | 扇贝、嘉网传媒等你来!

2019-09-29
iOS 开发技术;5.包括但不限于网络、图片加载、存储、自定义 View 等;6.了解软件迭代开发流程;7.了解软件工程和敏捷软件过程的...

南京大学教务系统http://elite.nju.edu.cn/jiaowu/

2018-12-14
学参网小编整理分享南京大学教务系统http://elite.nju.edu.cn/jiaowu/用户 密码 看不清?验证 使用帮助教师登录:用户名为工资号,初始...

亚洲“FaZe”成型!NG俱乐部官宣xccurate加盟

2018-10-31
NG俱乐部官宣xccurate加盟泰国俱乐部NG宣布xccurate加盟队伍,去年10月下旬他们曾以书面形式邀约印尼选手临时为队伍出战,现在...

计算机公共基础课的在线教学答卷

2016-10-07
用心用情书写计算机公共基础课的在线教学答卷.聚焦教学质量提升,做好课程资源建设 本着在线教学不仅是为了应对此次疫情的认识...

主题精选|数字电子技术与微机原理

2016-07-02
以下是已发布的,和“数字电子技术与微机原理”相关的内容.你可按顺序观看,也可按兴趣选择观看.曾经,它们相当于你在学校几...