![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 65
css
Hansel.Wn
现在从事软件开发工作.
展开
-
块级格式化上下文BFC
这个时候,我们就可以用BFC的特性来解决布局中出现的这些问题。高度塌陷问题一般是由于元素浮动引起的,当一个元素本身没有设置高度,其高度完全由子元素撑开,而子元素被设置为浮动元素后,由于子元素脱离了标准文档流,因此父元素就没有了高度。总结以上几点可以得出一个结论,BFC就相当于一个包含在根元素中的一个小的独立的根元素布局,而且这个BFC中的元素完全不会影响到BFC之外的其他元素。BFC特性所影响的元素只包括这个BFC容器的一级子元素,并不能影响元素本身节点和其子元素的子元素。BFC包含内部所有元素的行为。原创 2022-11-21 23:23:53 · 458 阅读 · 0 评论 -
CSS渐变笔记
CSS 渐变,可以使两种或多种指定颜色之间平滑过渡。线性渐变,使多种颜色沿着(向上、向下、向左、向右或者沿着对角线)渐变。使用线性渐变时,至少需要定义两个颜色,这两个颜色是我们呈现平滑过渡的颜色,还可以设置渐变起点、渐变方向和渐变效果。从左到右对角线渐变通过指定水平起始位置和垂直起始位置来实现。使用角度来控制渐变方向定义一个角度,来取代预定义的方向(向下、向上、向右、向左、向右下),这个角度指的是水平线和渐变线之间的角度。例:值 0deg 等于向上(to top)。值 90deg 等于向右(t原创 2022-06-10 16:00:02 · 244 阅读 · 0 评论 -
CSS 阴影效果
CSS中,通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。CSS语法box-shadow: h-shadow v-shadow blur spread color inset;向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。h-shadow: 必需。水平阴影的位置,可以为负值v-shadow:必需。垂直阴影的位置,可以为负值blur:可选,阴影模糊的原创 2022-05-14 16:15:00 · 36094 阅读 · 0 评论 -
CSS布局居中显示的几种情况
前端开发中经常会遇到各种各样元素居中的设计,今天特意搜集归纳了一下各种情况下元素居中显示的解决方案。行内元素水平居中:text-align我最熟悉的一个属性,只能实现行内元素(display为inline或inline-block等)的水平居中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2022-04-06 21:59:51 · 1172 阅读 · 0 评论 -
添加CSS动画
@keyframes设置动画规则1、@keyframes的作用是设置一个规则,在这个规则内指定CSS样式,并且指定动画的变化方式2、规则内可以使用from{}、to{}关键字来设置样式变化,也可以使用百分比设置样式变化@keyframes myfirst{ from {background: red;} to {background: yellow;}}@keyframes myfirst{ 0%{background: red;} 50% {backgrou原创 2022-03-29 15:58:50 · 1460 阅读 · 0 评论 -
CSS position
position属性,指定了元素的定位类型,有五个不同值:static 静态定位HTML元素的默认值,按照正常的文档流对象渲染relative 相对定位1、相对于元素正常位置定位2、相对定位会占据正常文档流空间fixed 固定定位1、元素位置相对于浏览器窗口定位2、使用top、left、bottom、right属性指定定位元素和浏览器窗口的位置关系3、fixed定位元素的位置与文档流无关,所以不占据空间,定位元素与其他元素重叠absolute 绝对定位1、元素的位置相对于最近的已定位原创 2022-01-17 16:14:55 · 238 阅读 · 0 评论