前端基础6:背景常用属性和定位以及BFC
背景常用属性
background-color:
背景颜色- 属性值有三种书写方式:
- 1.关键字法(不常用)
- 2.十六进制法
- 3.RGB(0~255,0~255,0~255)
- 属性值有三种书写方式:
background-image :
背景图片- 语法:background-image : url(“图片路径”)
- 特点:铺满内容区,x轴和y轴进行重复平铺
background-repeat:
背景重复 |属性值|描述| |--|--| |repeat|默认,背景在水平和垂直方向平铺| |repeat-x|背景在水平方向平铺| |repeat-y|背景在垂直方向平铺| |no-repeat|不平埔,只显示一张背景|background-position:
背景定位- 语法:
background-position:x y;
- 数值表示方式:
- 1.可以为具体数值
- 2.可以为关键字:top,left,right,bottom
- 可以设置为百分比
- 当只设置一个值时,第二个值默认为center
- 语法:
background-attachment:
背景关联- 设置背景图像是否固定或者随着页面其余部分滚动 |属性值|描述| |--|--| |scroll|默认,背景属性随着页面其余部分滚动| |fixed|背景图像固定|
background
复合属性- 语法:
background:color imge position repeat attachment
- 语法:
background: pink url("img/logo.png") center center no-repeat fixed;/*背景颜色 背景图片 位置 背景重复 背景关联*/复制代码
-background-size:
背景颜色大小 - 属性值可以为: - 具体的数值 当只设置一个值时:表示宽度,高度自适应(保持宽高比例进行缩放) - 百分比(相对容器) - auto 默认值 背景图片的真实大小 - cover 将背景图像等比缩放到完全覆盖容器,背景图像可能超出容器,被裁切 - contain 将图像进行等比缩放,背景图像始终被包含在容器中
网页常用的排版(布局方式)
- 常规流
- 块级元素独占一行,由上到下排布
- 行内元素从左到右排布
- 浮动
- 当对元素进行左浮动后,元素是从左向右排布的。设置又浮动同理。
- 设置完浮动后需要在最后一个浮动元素的后面清除浮动
- 利用伪元素的方式清除浮动clear:both
- 定位
poison
relative
相对定位- 不脱离文档流,不会影响后面元素的排布
- 参照物是它本身
- 当同时设置top和bottom时听top的
- 当同时设置right和left时听left的
- 任何元素都可以设置相对定位属性
absolute
绝对定位- 脱离文档流
- 当父级元素都没有定位特性时,他是以浏览器为参照物的。
- 可以手动设置参照物,参照物必须是它的父辈。
- 当同时设置top和bottom时听top的
- 当同时设置right和left时听left的
fixed
固定定位脱离文档流
参照物是浏览器可视窗口
任何元素都可以设置固定定位
值可以为
left/top/bottom/right
的值可以为具体值,也可以为百分数z-index
控制定位元素的层级- 值越大,层级越高,当不设置
z-index
时,在后面的层级高 fixed
- 当出现两个fixed
元素时,想改变层级需对两个元素同时进行设置
- 值越大,层级越高,当不设置
BFC(块级格式化上下文)
- 可以形成封闭的区域,里面的内容不会影响到外面的元素。
如何触发BFC
默认情况(普通文档流下)叫FC
- HTML根元素是一个
BFC
float
值为left
或者right
时可以触发BFCoverflow
值为hidden
时可以触发BFCdisplay
为inline-block
时可以触发BFCposition
值为absolute
或者fixed
时可以触发BFC
BFC布局规则
- 计算BFC高度时,浮动高度也参与计算
转载于:https://juejin.im/post/5b8539ade51d4538c021fe8d
前端基础6:背景常用属性和定位以及BFC相关推荐
- Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
- 第四次网页前端培训(CSS常用属性和盒子模型)
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin 1.安装编译器 VS Code:Visual St ...
- 第四次网页前端培训(CSS常用属性与盒子模型)
CSS常用属性 背景 <head><meta charset="utf-8"><title>常用属性设置</title><st ...
- 7. 前端基础--CSS背景和行高
文章目录 CSS背景和行高 1. CSS 背景(background) 1.1 背景颜色(color) 1.2 背景图片(image) 1.3 背景平铺(repeat) 1.4 背景位置(positi ...
- HTML+CSS+JavaScript复习笔记持更(十)——CSS3常用属性之定位
定位 定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
- 前端基础速成day03--文本属性and盒模型介绍
day03 回顾: 二维数据展示标签 表格 宽度高度自适应 <table><tr><td>div>a>img+p</td></tr&g ...
- (七)前端基础之背景图片,图片超链接存在的问题
一,background background-color和background-image可同时设置,背景颜色会作为背景图片的底色,背景图片默认在元素的左上角显示 background-positi ...
- 前端基础:CSS字体属性
目录 1. 字体系列 2. 字体大小 3. 字体粗细 4. 字体样式 5. 字体复合属性 6. 字体属性总结 css fonts(字体)属性用于字体系列.大小.粗细.文字样式(如斜体). 1. 字体系 ...
- 【零基础入门前端系列】—背景属性(十二)
[零基础入门前端系列]-背景属性(十二) 一.背景属性 CSS背景属性主要有以下几个: CSS3中可以通过background-image属性添加背景图片. 不同的背景图像和图像用逗号隔开,所有的图片 ...
最新文章
- python画树叶-手把手|如何用Python绘制JS地图?
- android之下载416错误
- SNMP功能开发简介 五 使用MIB Builder创建MIB文件图文介绍
- Linux GCC用法
- 红外测试操作步骤_红外光谱仪操作规程
- Android开发之刷新图片到相册 | 刷新视频到相册的方法区分发广播刷新方法
- 【JVM】第一章 JVM体系结构
- 一个MD4在线加密脚本源码
- 基于深度卷积神经网络的大豆叶斑病识别
- java的各种加载和初始化的详细过程
- micropython 驱动 移植_MicroPython v1.12 版本更新
- 腾讯,360,华为等应用市场相继发布适配公告,发力安卓P版本
- Silverlight开源项目与第三方控件收集
- PHP接口报错:500服务器错误
- 娓娓道来图模型、图查询、图计算和图学习知识
- python 提取字幕_使用Python从zimuku下载字幕
- 考拉消息中心消息盒子处理重构(策略模式)
- 【渝粤教育】电大中专药理学基础 (2)_1作业 题库
- python自动排版_你熟悉Python的代码规范吗?如何一键实现代码排版
- Jekyll 教程——安装