
CSS
文章平均质量分 94
CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
孤影_ls
Html Css JavaScript
展开
-
CSS引入方式,选择器和常用样式设置
CSS引入方式,选择器和常用样式设置1.CSS简介CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一CSS 样式表极大地提高了工作效率2.CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明每条声明由一个属性和一个值组成选择原创 2021-01-20 01:59:37 · 474 阅读 · 0 评论 -
深入理解CSS盒子模型
深入理解盒子模型1.盒子模型的初步了解盒尺寸中的4个盒子 content-box、padding-box、border-box和margin-box分别对应CSS世界中的centent、padding、border、margin属性,这四个属性称为”盒尺寸四大家族”;width 宽度height 高度padding 内填充border 边框线margin 外间距2.盒子模型分类及计算公式盒模型有两种,分别是ie盒子模型(IE6以下版本浏览器)和标准w3c盒子模型;能影响原创 2020-05-17 22:56:17 · 374 阅读 · 0 评论 -
背景属性深入理解及动画综合应用
背景属性深入理解及动画综合应用1.背景类常用属性应用background-color 背景颜色设置或检索对象的背景颜色,默认值:transparent;同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上;CSS中,颜色值通常以以下方式定义:十六进制 - 如:"#ff0000"RGB - 如:“rgb(255,0,0)”颜色名称 - 如:“red”background-image 背景图片设置或检索对象的背景图像,默认值:none;如果设置了 <’ back原创 2020-05-24 15:55:39 · 769 阅读 · 0 评论 -
浮动布局模型实战应用
浮动布局模型实战应用1.文档流和脱离文档流认识标准文档流及特性文档流 : 指的是元素在文档结构中的排列方式;标准文档流:网页在解析的时候,遵循于从上向下,从左向右的一个顺序,而这个顺序就是来源于标准文档流;脱离文档流:打破原本的从上到下,从左到右的排列方式,比如重叠 、叠加 、覆盖等非正常的文档流的排列布局情况;脱离文档流的元素浮动 float:left/right绝对定位 position:absolute固定定位 position:fixed2.浮动元素的特点原创 2021-01-20 02:04:57 · 418 阅读 · 0 评论 -
CSS3之定位布局基础
定位布局应用1.定位属性说明position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。说明:检索对象的定位方式当position的值为非static时,其层叠级别通过z-index属性定义。绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素;2原创 2020-05-24 16:23:03 · 476 阅读 · 0 评论 -
彻底掌握CSS3
彻底掌握CSS31.CSS3新增选择器2.CSS属性划分和前缀标准写法顺序CSS3 被划分为模块,其中最重要的 CSS3 模块包括选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面CSS3属性前缀和标准写法顺序Trident内核:前缀为-ms ,主要代表为IE浏览器Gecko内核:前缀为-moz,主要代表为FirefoxPresto内核:前缀为-o,主要代表为OperaWebkit内核:前缀为-webkit,产要代表为Chrome和Safari原创 2020-05-17 22:51:37 · 276 阅读 · 0 评论 -
CSS属性汇总(全)
文章目录CSS字体属性CSS文本属性链接样式CSS列表属性CSS边框属性CSS轮廓属性CSS背景属性CSS浮动属性CSS伪类/元素CSS字体属性CSS文本属性链接样式CSS列表属性CSS边框属性CSS轮廓属性CSS背景属性CSS浮动属性CSS伪类/元素...原创 2020-09-13 18:17:04 · 2412 阅读 · 2 评论 -
Flex布局语法
Flex布局语法1.Flex布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: f转载 2020-05-17 23:07:22 · 313 阅读 · 0 评论 -
BFC详解(面试题)
css bfc含义 bfc特性 bfc用处 如何生成bfc 面试必问原创 2024-04-24 11:25:22 · 940 阅读 · 0 评论 -
一段css让全站变灰
代码背景:为深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,大多数网站自发全站变灰愿逝者安息,愿生者奋发,愿祖国昌盛。解决思路1、了解其他网站的实现方法2、开始从CSDN,爱奇艺,王者荣耀官网了解并总结一套最全的兼容样式。3、采样截图CSDN:爱奇艺:腾讯王者荣耀官网总结:一段CSS代码全站变灰or个别变灰全站变灰将下面的一段浏览...原创 2020-04-04 02:45:33 · 2693 阅读 · 0 评论 -
仿写京东之巨详细CSS知识点加Html布局
仿写京东过程中经常碰到的CSS问题CSS常用属性opacity: 1 !important; 加权重透明度 transparent排列(一行) align背景颜色: background-color宽度: width:100px;高度: height:100px;悬停 hover a :hover 鼠标(手)放上去 类名或者标签名加:hov...原创 2020-01-30 22:00:42 · 1130 阅读 · 0 评论 -
仿写京东之巧用less解决权重问题
lesscss的预编译语言,浏览器本身是不支持less的,所以需要将less转成cssless只是为了开发方便用的VScode安装Easy Less插件:当创建好.less文件,vscode会自动识别这样的文件,将其编译成css;css : 让css具有编程语言的特点; 预编译css;浏览器是不识别less语言的;所以需要用js解析less;或者是直接将less转成css文件,然后...原创 2020-02-02 22:11:12 · 1083 阅读 · 0 评论 -
Sass快速入门
什么是Sass和Less?前端的小伙伴应该对less和sass都不陌生SassLessSass快速入门1. 使用变量你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。1-1. 变量声明任何可以用作css属性值的赋值都 可以用作sass的变量值,甚至是以空格分割的多个属性值,或以逗号分割的多个属性值$highlight-color: #F90;$basic-border: 1px solid black;$plain-font:原创 2020-07-18 19:20:38 · 264 阅读 · 0 评论 -
Tailwind CSS快速入门
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册原创 2024-05-24 01:00:03 · 2336 阅读 · 0 评论