background-postion 规定背景图片的位置 px 第一值是x轴,第二个是y轴,默认是从左上角开始的,如果只设置第一个,第二个默认是auto 百分比,根据相对于父元素 top | center | bottom | left | center | right cover 把图像扩展至足够大,以使背景完全覆盖背景区域。背景图像的某些部分会无法显示(保持等比比例) contain 吧图片扩...

今天在调试一个前端项目时碰到一个贼尴尬的问题: 今天老师让做一个送花的前端项目,就是一个男孩跑到女孩面前送花的纯css项目   本来这项目就要完成的,可是就在这时,,我发现了一个严重的问题 花的z-index无论我怎么设置它都只能只能贴在手上,不能设置到右手的下面!!感觉就是绑着的一样       按我一贯的作风!!!! 额,,可惜我找了好久。。。大部分都说...

web前端--grid布局

css3  css  css3

  

2020-05-19 00:58:59

grid 布局 grid概述 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局; Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局 gird很强大,采用网格布局的区域,称为"容器"(container)。容器内部子...

彻底弄懂CSS优先级规则

css3  css  css3

  

2020-05-31 20:44:42

彻底弄懂CSS优先级规则 文章目录 彻底弄懂CSS优先级规则 1. css继承 & 距离 1.1 css继承距离优先 1.2 非继承的平级css距离无关,取决于加载顺序 2. 单个选择器 & 优先级关系链 2.1 demo1 — 优先级关系链应用 2.2 demo2 — 基于形式的优先级 3. 选择器组合 & 优先级计算 4. !important ...

[CSS3] CSS3学习摘录(1)

CSS/CSS3  css3

  

2020-10-28 03:09:37

一、CSS3的主要新特性 1)选择器 2)阴影 3)形状转换(2d,3d) 4)变形 5)动画(过度动画,帧动画) 6)边框 7)多重背景 8)反射 9)文字 10)颜色(rgba/hsl/hsla) 11)滤镜 12)弹性布局 13)多列布局 14)盒模型 15)web字体 16)媒体查询 二、CSS3属性前缀 兼容不同浏览器,添加厂商前缀 Trident内核:主要代表为IE浏览器 Gecko内...

【Hello CSS】序章-起源

CSS  CSS3

  

2019-07-26 06:08:52

作者:陈大鱼头 github: KRISACHAN HTML的诞生 HTML是怎么来的? 在1982年的时候,万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享,造了HTML(HyperText Markup Language) 超文本置标语言。 在1991年3月,Tim Berners-Lee把HTML介绍给了给他在CERN(欧洲核子研究中心) 工...

CSS sticky footer布局

css  css3

  

2019-09-11 05:26:45

Sticky Footer布局: 当页面中的内容高度小于屏幕高度的时候, 让底部footer显示在底部, 当内容高度大于屏幕高度的时候, 底部footer会紧随内容其后, 滚动内容区域,footer会在内容的最后方显示。 利用flex布局实现sticky footer布局 利用定位和负margin的方法实现...

前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布)。随着CSS的广泛应用,设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中,这有悖于HTML原生响应的特性。 过去几年出现了一场革命,包括自适应设计,响应式设计,移动优...

关于css3中nth-of-type()的使用

css  css3

  

2019-09-30 06:40:09

nth-of-type(n)选择器用于匹配同类型中的第n个同级兄弟元素。n可以是一个数字,一个关键字,或者一个公式。(ps:n不能为判断语句) p:nth-of-type(n=2) ---------- 错误,不能为赋值语句 p:nth-of-type(n==2) -------- 错误,不能为布尔型 p:nth-of-type(2) ------------- 正确,选取第二个p元素 ...