CSS
文章平均质量分 86
CSS
南栀~zmt
新手小白
展开
-
【CSS】CSS3新特性
1. 选择器、文本2. 过渡、变形、动画3. 滤镜4. 弹性盒子布局5. 边框圆角边框:border-radius: 1-4 length|% / 1-4 length|%;边框阴影:box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] ;边框图片:border-image:图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;重复效果:round/strech/repeat6. 背景多重背景 :background: 背景色 背景图片原创 2022-04-21 20:21:39 · 160 阅读 · 0 评论 -
【CSS】CSS实现水平垂直居中
文章目录1. 绝对定位元素的水平居中2. margin: auto;绝对定位3. css3.0弹性盒子布局4. 相对定位5. vertical-align:middle6. display:table实现1. 绝对定位元素的水平居中已知宽高的元素绝对定位的水平居中实现:优点:工作中使用最多,兼容性很好。缺点:需要提前知道元素的尺寸。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2022-03-07 17:19:11 · 320 阅读 · 0 评论 -
【CSS】BFC详解
BFCBFC定义触发BFC利用BFC解决问题解决外边距的合并问题(垂直塌陷)解决高度塌陷问题阻止标准流元素被浮动元素覆盖想要了解BFC的规则,前提必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。你只有熟练掌握了这些布局手段之后,才能很好的理解BFC。BFC定义BFC - Block Formatting Context 块级格式化上下文官方解释:A block formatting conte原创 2021-11-20 13:14:00 · 966 阅读 · 0 评论 -
【JavaScript、CSS】css动画、js动画
动画css动画js动画css动画js动画原创 2021-11-17 15:43:31 · 955 阅读 · 0 评论 -
【CSS】Flex布局实例
Flex布局网格布局基本网格布局百分比布局圣杯布局网格布局基本网格布局最简单的网格布局,就是平均分布,在容器里面平均分配空间。<style type="text/css"> .Grid { display: flex; margin-bottom: 5px; } .crid-cell,.crid-cell2 { flex: 1; background-color: yellow;原创 2021-11-16 19:22:42 · 763 阅读 · 0 评论 -
【CSS】盒子模型、CSS3的弹性盒子Flex布局
文章目录什么是盒子模型盒子模型分类1、W3C标准盒子模型2、IE盒子模型(怪异盒子模型)CSS3指定盒子模型种类弹性盒子布局什么是盒子模型所有HTML元素可以看作盒子CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。说明:Margin 外边距 清除边框外的区域,外边距是透明的Border边框 围绕在内边距和内容外的边框Padding内边距 清除内容周围的区域,内边距是透明的Content内容 盒子的内容,显示文本和图像盒子模型分类1、原创 2021-11-16 17:21:00 · 1072 阅读 · 0 评论 -
【CSS】高度塌陷及解决方案
文章目录什么是高度塌陷解决高度塌陷什么是高度塌陷在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。父元素高度自适应(不写高度),子元素 float 后,造成父元素高度为0,称为高度塌陷问题。<style type="text/css"> .box1 { /* 父元素未设置高度,高度由子元素撑开 */ b原创 2021-11-15 21:30:23 · 593 阅读 · 0 评论 -
【CSS】行内元素 默认基线对齐的修改属性
多个行内元素并排时,默认按照基线对齐. 元素的基线位于元素的下边缘,默认基线对齐,因此图片下方会存在几个像素的空隙;而其他行内元素的基线就是文本的基线,即文本底边。行内元素的垂直对齐:vertical-align:middle;该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐...原创 2021-09-16 17:00:36 · 1651 阅读 · 0 评论 -
【CSS】精灵技术
CSS精灵技术(sprite)CSS精灵技术说明CSS Sprites 在国内很多人叫 css 精灵,是一种网页图片应用处理方式。在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。CSS精灵它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。所以,CSS Sprites 技术加速的关键,并不是降低质量,而是减少个次数,当然随之而来的增加原创 2021-05-08 14:50:06 · 341 阅读 · 1 评论 -
【CSS】滤镜
文章目录1. 滤镜1.1 模糊效果 `filter: blur()`1.2 设置图像亮度 `filter: brightness()`1.3 调整图像对比度 `filter: contrast()`1.4 向图像添加阴影`filter: drop-shadow()`1.5 将图像转换为灰度`filter: grayscale()`1.6 反转效果`filter: invert()`1.7 对图像应用不透明度`filter: opacity()`1.8 将棕褐色效果应用于图像`filter: sepia()`原创 2021-05-07 21:46:48 · 153 阅读 · 0 评论 -
【CSS】过渡、变形、动画
过渡、变形、动画原创 2021-05-07 19:21:24 · 802 阅读 · 0 评论 -
【CSS】DIV+CSS进行布局、命名规范
文章目录1. DIV+CSS进行布局1.1 布局目的1.2 如何布局1.3 页面元素的定位机制流式布局浮动布局定位布局2. 布局属性2.1 浮动属性(float)浮动清除浮动2.2 定位属性(position)2.3 溢出属性(overflow)2.3 层叠属性(Z-index)3. 布局类型3.1 单列布局3.2 两列布局3.3 三列布局4、html中的语义标签5、网页模块中的命名规范1. DIV+CSS进行布局1.1 布局目的将各部分模块有序排列,使网页的排版变得丰富、美观。1.2 如何布局原创 2021-04-25 19:08:39 · 1057 阅读 · 1 评论 -
【CSS】盒子模型及其相关属性、元素的类型与转换
文章目录盒子模型1、认识盒子模型2、盒子模型相关属性2.1 边框(border)属性边框样式:`border-style: 上边[右边 下边 左边]`边框宽度:`border-width: 上边[右边 下边 左边]`边框颜色:`border-color: 上边[右边 下边 左边]`综合设置边框:`border: 四边宽度 四边样式 四边颜色`圆角边框:`border-radius: 水平参数半径/垂直参数半径`图片边框:`border-images: 图片路径 裁切方式/边框宽度/边框扩展距离 重复方式`2原创 2021-04-21 21:11:34 · 844 阅读 · 1 评论 -
【CSS】选择器、优先级、颜色 尺寸 图片表示方法等
文章目录CSS:层叠样式表1、结构和表现分离2、应用CSS的方法(1)页面嵌入式(2)行内嵌入式(3)先创建独立的样式文件(.css),然后在页面中导入这个样式文件3、CSS的样式规则4、CSS选择器:CSS核心(1)标签名选择器(2)id选择器(3)类选择器5、CSS中颜色表示方式6、CSS中尺寸表示方式7、CSS中图像表示方式CSS:层叠样式表1、结构和表现分离html标签只负责展示内容,搭建网页的基本结构,不用标签的属性设置样式。所有的样式由CSS来进行设置。2、应用CSS的方法(1)原创 2021-04-15 21:53:09 · 1049 阅读 · 0 评论