![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 50
空城里的往日时光
这个作者很懒,什么都没留下…
展开
-
CSS基础知识点-01
但有时会发现,伪元素使用了单个冒号,这是由于旧版本的W3C规范并未对此进行特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式,必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。伪类一般匹配元素的一些特殊状态,,如hover、link等,而伪元素一般匹配的特殊的位置,比如after、before等。content属性是伪元素独有的,可以修改伪元素的内容。原创 2023-04-11 21:16:20 · 596 阅读 · 0 评论 -
CSS常用代码片段-01
word-wrap和word-break配合使用可以有效解决换行问题。如下代码所示,实现多行文本超出,末行显示省略号。如下代码所示,实现单行文本溢出显示省略号。利用box-reflect实现文字倒影。固定宽度的块状元素中,内容换行如下所示。如下代码所示,实现文字垂直排列。如下两段代码任选其一。原创 2023-04-09 01:46:49 · 230 阅读 · 0 评论 -
CSS—移动端适配方案flexible.js
目录一、概述二、详解一、概述移动端适配一直以来都是前端开发中不可或缺的重要组成部分。flexible.js插件是一个终端设备适配的解决方案。flexible.js插件通过实现rem单位的自适应,来达到实现不同终端之间页面适配的目的。二、详解引用flexible.js插件flexible.js插件的用法非常简单,只需要在head标签中引入flexible_css.js...原创 2020-02-04 22:59:31 · 6105 阅读 · 0 评论 -
CSS—移动端高清屏1px方案
目录一、概述二、解决方法一、概述如下代码所示,移动端高清屏上设置1px的边框效果,虽然代码正确,但结果却并不让人满意,抛出的问题一般为边框太粗。div { width:5rem; height:2rem; border:1px solid red;}上述代码没有任何问题,在高清屏上的确显示1px尺寸,但这个1px是指CSS像素,在高清屏中,一个C...原创 2020-02-04 17:02:31 · 404 阅读 · 0 评论 -
CSS—meta viewport详解
目录一、概述二、参数详解一、概述移动端视口默认为布局视口,并且不允许用户手动缩放。移动端可以通过meta标签控制视口,如下代码所示。<!--将视口的宽度设置为640px--><meta name="viewport" content="width=640"><!--将视口的宽度设置为设备独立像素宽度,默认无缩放,并且也不允许用户缩放--&...原创 2020-02-03 17:13:53 · 612 阅读 · 0 评论 -
CSS—viewport视口详解
目录一、概述二、移动端视口一、概述视口是浏览器上显示网页的一块区域,大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致,移动端视口与浏览器窗口宽度完全独立。PC端视口大小等于浏览器窗口可视区域大小,无论浏览器是否缩放。如下代码均可获得PC端视口宽度。window.innerWidth二、移动端视口移动端视口分为三...原创 2020-02-03 16:51:46 · 1409 阅读 · 0 评论 -
CSS—Grid布局之项目属性
目录一、概述二、详解一、概述Grid布局的属性分为两类,一类定义在容器上面,称为容器属性,一类定义在项目上面,称为项目属性。二、详解grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性定义项目的位置是可以单独指定的,具体方法就是指定项目的四个边框,表示分别定位在哪根网格线。注意...原创 2020-01-18 09:20:45 · 685 阅读 · 0 评论 -
CSS—Grid布局之容器属性
目录一、概述二、详解一、概述Grid布局的属性分为两类,一类定义在容器上面,称为容器属性,一类定义在项目上面,称为项目属性。二、详解display属性属性值为grid,表示当前元素采用网格布局。设为网格布局后,项目的float、inline-block、display:table-cell、vertical-align和column-*等设置将失效。div {...原创 2020-01-17 17:54:49 · 591 阅读 · 0 评论 -
CSS—Grid布局之基本概念
目录一、Grid布局与Flex布局二、Grid布局的概念一、Grid布局与Flex布局如上图所示,Grid布局可以很轻松的实现这种布局。Grid网格布局是最强的CSS布局方案,它可以将网页划分成一个个网格,任意组合不同的网格,做出各种各样的布局。Grid布局是CSS中一种新的布局方式,对盒子和盒子内的位置及尺寸有很强的控制能力。Flex布局是轴线布局,只能指定项目针对轴线的...原创 2020-01-17 15:17:31 · 241 阅读 · 0 评论 -
CSS—flex布局之代码实例
目录1、骰子的布局2、网格布局3、圣杯布局4、输入框布局5、悬挂式布局6、固定的底栏7、流式布局1、骰子的布局公共样式<style> * { box-sizing: border-box; } html, body { height: 95%; }...原创 2020-01-17 13:59:46 · 596 阅读 · 0 评论 -
CSS—flex布局之容器属性
目录一、概述二、详解一、概述flex布局中,容器上可以设置如下6个属性。(1) flex-direction(2) flex-wrap(3) flex-flow(4) justify-content(5) align-items(6) align-content二、详解flex-direction属性 设置主轴的方...原创 2020-01-17 09:44:05 · 393 阅读 · 0 评论 -
CSS—flex布局之项目属性
目录一、概述二、详解一、概述flex容器中的项目如下所示,共有6个属性。(1) flex(2) flex-grow(3) flex-shrink(4) flex-basis(5) align-self(6) order二、详解flex属性概念flex是一个复合属性,适用于CSS3弹性盒模型中的所有子元素,即容器中的项目。flex用来设置容器中的...原创 2020-01-16 16:55:24 · 339 阅读 · 0 评论 -
CSS—flex布局之基本概念
flex布局flex布局是w3c于2009年提出的概念,可以方便、完整、响应式的实现各种页面布局。flex全称Flexible Box,意为弹性布局,可以为盒状布局提供最大的灵活性。任何一个元素都可以指定为flex布局。Webkit内核的浏览器,必须加上-webkit前缀。注意,设为flex布局后,子项目的float、clear、vertical-align属性将失效。/*块级元素...原创 2020-01-16 14:46:19 · 232 阅读 · 0 评论 -
CSS—BFC&视觉格式化模型
目录一、BFC二、视觉格式化模型一、BFCBFC全称Block Formatting Context,翻译为块格式化上下文,是由CSS2.1规范定义的一个关于CSS渲染定位的概念。BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。如下所示为,触发一个盒子的bfc,将其转化为bfc元素的方法。方法一: position:absolute/fix...原创 2020-01-15 16:09:24 · 190 阅读 · 0 评论 -
CSS—动画之animation
目录一、概述二、详解三、代码实例一、概述animation是CSS3新增的一个属性,可以设置元素的动画特效。二、详解animation定义和用法animation是一个复合属性,适用于所有元素,包含伪对象:after和:before。如果提供多组属性值,中间用逗号隔开。animation: animation-name||animation-duratio...原创 2020-01-15 15:22:28 · 386 阅读 · 0 评论 -
CSS—动画之transition
目录一、概述二、详解三、代码实例一、概述transition是CSS3新增加的属性,可以为同一元素的多个属性定义过渡动画。二、详解transition的定义和用法transition是一个复合属性,用于设置元素的过渡动画,适用于所有元素,包括伪对象:after和:before,定义如下。transition:transition-property||tra...原创 2020-01-15 14:27:34 · 1120 阅读 · 0 评论 -
CSS—动画之transform
目录一、概述二、详解一、概述transform是CSS3新增加的属性,主要控制元素变形,没有一个时间控制的概念。二、详解旋转transform:rotate(xxxdeg); //使元素旋转多少度,正数为顺时针旋转多少度, 负数为逆时针旋转多少度<style> div { width: 200px; hei...原创 2020-01-15 13:41:49 · 437 阅读 · 0 评论 -
CSS—CSS3新增的伪类
span:first-of-type 选择属于其父元素的首个元素span:last-of-type 选择属于其父元素的最后元素span:only-of-type 选择属于其父元素唯一的元素span:only-child 选择属于其父元素的唯一子元素span:nth-child(2) 选择属于其父元素的第二个子元素:enabled :disabled ...原创 2020-01-14 15:53:02 · 186 阅读 · 0 评论 -
CSS—流式布局&响应式布局
一、流式布局流式布局即百分比布局,使用非固定像素来定义网页内容,盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制。二、响应式布局利用CSS3的媒体查询,通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕(移动设备) 768px 以下小屏设备 768px-992px中等屏幕 992px-1200px宽屏设备 1200px 以上...原创 2020-01-14 15:39:03 · 722 阅读 · 0 评论 -
CSS—圣杯布局&双飞翼布局
目录一、概述二、圣杯布局三、双飞翼布局一、概述圣杯布局和双飞翼布局都是比较经典的三栏布局,它们都是一种相对布局。两种布局达到的效果基本相同,都是左右侧边栏固定,中间栏宽度自适应。在html结构上,将中间栏放在最前面,保证最先渲染中间栏以提升性能。圣杯布局是使用padding使中间栏为两侧边栏腾开位置,双飞翼布局是中间栏不变,使用margin使内容部分为两侧边栏腾开位置。...原创 2020-01-14 14:51:41 · 171 阅读 · 0 评论 -
CSS—三栏布局
目录一、概述二、详解一、概述三栏布局是一种很常见的布局方式,要求左右侧边栏固定宽度,中间栏自适应。以下介绍三种实现方式,html结构如下所示。<div class="container"> <div class="main">main</div> <div class="left">left</div>...原创 2020-01-14 12:19:13 · 124 阅读 · 0 评论 -
CSS—盒模型
目录一、概述二、图解三、box-sizing一、概述CSS中有两种盒模型,其一W3C标准盒模型,其二IE盒模型。二、图解标准盒模型标准盒模型中,盒子宽度等于内容区宽度,如下所示。IE盒模型IE盒模型中,盒子宽度等于内容区宽度、内边距和边框三部分的总和,如下所示。三、box-sizing可以借助CSS3的box-sizing属性切换盒...原创 2020-01-14 11:37:15 · 199 阅读 · 0 评论 -
CSS—vw移动端适配
目录一、概述二、详解一、概述在PC端,视口是指浏览器的可视区域。在移动端,视口(viewport)分为三种,其一布局视口,其二视觉视口,其三理想视口。视口单位是CSS3新引入的概念,其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。(1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1%(2) vh 相对于视口...原创 2019-12-29 18:02:21 · 577 阅读 · 0 评论 -
CSS—rem+sass适配移动端
目录一、设备像素比二、单位转换三、字体尺寸适配一、设备像素比眼中所看到的屏幕是由一个个物理像素组成,而CSS使用的是逻辑像素,也称为虚拟像素。设备的像素比DPR(也称为精度)体现了物理像素和逻辑像素的关系。计算公式如下所示.。DPR = 物理像素/逻辑像素像素比的存在,就是明明CSS中设置一样的像素,不同设备显示存在区别的原因。二、单位转换Sass中可以实现p...原创 2019-11-26 12:35:53 · 373 阅读 · 0 评论 -
CSS—相对单位rem
目录一、概述二、详解一、概述rem是一个相对长度单位,它的单位长度取决于根标签html的字体尺寸。rem即root em的意思,中文翻译为根em。浏览器的文本尺寸一般默认为16px,即默认情况下:1rem = 16pxrem布局原理:根据CSS媒体查询功能,更改根标签的字体尺寸,实现rem单位随屏幕尺寸的变化,如下代码所示。@media only screen an...原创 2019-11-26 10:08:09 · 1435 阅读 · 0 评论 -
CSS—相对单位em
目录一、概述二、详解三、注意事项一、概述em是一个相对长度单位,它的单位长度取决于当前元素行内文本的字体尺寸,如当前元素行内文本的字体尺寸未设置,则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度,故名em,现指字符宽度的倍数,用法类似百分比,如:0.8em、1.2em、2em等。em可以设置width、height、line-height、margin、padding...原创 2019-12-29 10:48:42 · 706 阅读 · 0 评论 -
CSS—相对单位px
目录一、概述二、精度三、拓展一、概述px是一个相对单位,也是一个虚拟长度单位,称为虚拟像素或逻辑像素。虚拟像素可以理解为视觉上的像素,是CSS和JS使用的抽象单位,浏览器中的一切长度最终都是以虚拟像素为单位,如rem和em,都是对标的虚拟像素。二、精度眼中所看到的屏幕是由一个个物理像素组成,而CSS使用的是逻辑像素px。如果想将逻辑像素转换为物理像素,需要指定精度DPI...原创 2019-12-29 16:25:56 · 811 阅读 · 0 评论