![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
大毛驴啊
这个作者很懒,什么都没留下…
展开
-
flex(弹性盒、伸缩盒)
flex(弹性盒、伸缩盒)介绍介绍是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变原创 2021-08-26 22:02:01 · 106 阅读 · 0 评论 -
scale(缩放)
scale(缩放)介绍transform-origin(变形的原点)介绍对元素进行缩放的函数scaleX() `水平方向缩放`scaleY() `垂直方向缩放`scale() `双方向的缩放`示例:transform: scaleX(2); `水平方向放大两倍`transform: scaleY(2); `垂直方向放大两倍`transform: scale(.2); `双方向缩小到原来的0.2倍`transform-origin(变形的原点)tra原创 2021-08-08 23:21:14 · 921 阅读 · 0 评论 -
rotate(旋转)
rotate(旋转)介绍注:介绍通过旋转可以使元素沿着 x、y 或 z 旋转指定的角度rotateX()rotateY()rotateZ()transform: rotateZ(45deg);transform: rotateZ(.5turn);transform: rotateX(45deg);transform: rotateX(.5turn);transform: rotateY(45deg);transform: rotateY(.5turn);transform原创 2021-08-04 20:39:00 · 2269 阅读 · 0 评论 -
transform(变形)
transform(变形)介绍translate(平移)注:介绍1、变形就是指通过CSS来改变元素的形状或位置2、变形不会影响到页面的布局3、变形不会导致脱离文档流4、transform用来设置元素的变形效果translate(平移)平移: translateX() 沿x轴方向平移 translateY() 沿y轴方向平移 translateZ() 沿z轴方向平移示例: translateX(100px) 沿x轴方向平移 translateY原创 2021-07-29 22:43:27 · 335 阅读 · 0 评论 -
animation(动画)
动画介绍@keyframes identifier(设置关键帧)设置动画animation-name(动画名字)animation-duration(动画执行时间)animation-delay(动画的延时)animation-timing-function(动画的时序函数)animation-iteration-count(动画的执行次数)animation-direction(动画的运行方向)animation-play-state(设置动画的执行状态)animation-fill-mode(动画的填充原创 2021-07-24 23:15:24 · 1001 阅读 · 0 评论 -
radial-gradient(径向渐变)
radial-gradient(径向渐变)介绍总结语法介绍1、radial-gradient( )径向渐变(放射性效果)2、默认情况下,径向渐变的形状是根据元素的形状来计算的正方形- ->圆形长方形- ->椭圆形3、我们也可以手动指定径向渐变的大小可选值: circle 圆形 ellipse 椭圆示例:background-image:radial-gradient(100px 100px , red , yellow);background-ima原创 2021-07-08 17:02:07 · 4409 阅读 · 0 评论 -
linear-gradient(线性渐变)
线性渐变介绍linear-gradient(线性渐变)介绍a)通过渐变可以设置一些复杂的颜色,可以实现从一个颜色向其他颜色过度的效果b)渐变是图片!需要通过background-image来设置linear-gradient(线性渐变)linear-gradient()注:1、linear-gradient(red,yellow)红色在开头,黄色在结尾,中间是过渡区域2、线性渐变的开头,我们可以指定一个渐变的方向示例:background-image:linear-gr原创 2021-07-08 01:53:16 · 1149 阅读 · 0 评论 -
解决图片闪烁问题(雪碧图)
解决图片闪烁问题(雪碧图)介绍雪碧图的使用步骤雪碧图的特点介绍将多个小图片统一保存到一个大图片中(雪碧图),然后通过调整background-position来显示相应的图片,这样图片就会同时加载到网页中,就可以有效避免出现闪烁的问题这个技术在网页中应用十分广泛,被称为CSS-Sprite(雪碧图)雪碧图的使用步骤1、先确定要使用的图标2、测量图标的大小3、根据测量结果创建一个元素4、将雪碧图设置为元素的背景图片5、设置一个偏移量以显示正确的图片雪碧图的特点一次原创 2021-07-07 18:22:42 · 334 阅读 · 0 评论 -
background(背景)
background(背景)background-color(背景颜色)background-image(背景图片)background-repeat(设置背景的重复方式)background-position(设置背景图片的位置)background-color(背景颜色)background-color设置背景颜色示例: background-color:#bfa;background-image(背景图片)background-image设置背景图片示例: backgrou原创 2021-07-07 00:21:05 · 314 阅读 · 0 评论 -
其他文本样式
其他文本样式text-decoration(设置文本修饰)white-space(设置网页如何处理空白)text-overflowtext-decoration(设置文本修饰)可选值: none 无 underline 下划线 line-through 删除线 overline 上划线white-space(设置网页如何处理空白)可选值: normal 正常 nowrap 不换行 pre原创 2021-07-06 18:40:09 · 53 阅读 · 0 评论 -
text-align(文本的水平对齐)和vertical-align(设置元素垂直对齐的方式)
文本的水平和垂直对齐text-align(文本的水平对齐)vertical-align(设置元素垂直对齐的方式)vertical-align设置图片对齐text-align(文本的水平对齐)可选值: left 左侧对齐 right 右侧对齐 center 居中对齐 justify 两端对齐vertical-align(设置元素垂直对齐的方式)可选值: baseline 默认值,基线对齐原创 2021-07-06 16:59:43 · 1322 阅读 · 0 评论 -
line-height(行高)
line-height(行高)line-height(行高)介绍字体框line-height(行高)介绍1、行高指的是文字占有的实际高度2、通过line-height来设置行高3、行高可以直接指定一个大小(px em)4、也可以直接为行高设置一个整数。如果是一个整数的话,行高将会是字体的指定的倍数5、行高会在字体框的上下平均分配6、可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中7、行高经常还用来设置文字的行间距原创 2021-07-06 00:34:26 · 4099 阅读 · 0 评论 -
iconfont(图标字体)
iconfont(图标字体)iconfont(图标字体)fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体iconfont 使用步骤a)使用Unicode引用方法b)使用font-class引用方法c)通过伪元素使用iconfont(图标字体)说明介绍:在网页中经常需要使用一些图标,可以通过图片来引入图标但是图片大小本身比较大,并且非常的不灵活所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体引入这样我们就可以通过使用字原创 2021-07-05 20:44:14 · 1886 阅读 · 0 评论 -
font(字体)
font&background(字体与背景)字体相关样式font-face字体相关样式1、color 前景色,一般用来设置字体颜色2、font-size 字体的大小font-size相关单位: em 相当于当前元素的一个font-size rem 相当于根元素的一个font-size3、font-family 字体族(字体的格式)可选值: serif 衬线字体 (常用) sans-serif 非衬线字体 (原创 2021-07-05 16:17:33 · 2372 阅读 · 0 评论 -
元素的层级(z-index)
元素的层级(z-index)元素的层级(z-index)元素的层级(z-index)1、对于开启了定位的元素,可以通过z-index属性来指定元素的层级2、z-index需要一个整数作为参数,值越大元素的层级越高3、元素的层级越高越优先显示4、若元素的层级一样,则优先显示靠下的元素 `(后来者居上)`5、祖先元素的层级再高,也不会盖住后代元素 `(虎毒不食子)`...原创 2021-07-04 22:44:47 · 363 阅读 · 0 评论 -
绝对定位元素的布局
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-07-04 21:23:16 · 98 阅读 · 0 评论 -
position(定位)
position(定位)position(定位)介绍relative(相对定位)相对定位的特点偏移量(offset)position(定位)介绍通过position(定位)可以将元素摆放到页面的任意位置可选值: static 默认值,元素是静止的,没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky(少用) 开启元素的粘滞定位relative原创 2021-07-04 01:08:48 · 480 阅读 · 0 评论 -
clearfix(清除浮动),同时解决高度塌陷和外边距重叠问题
clearfix(清除浮动),同时解决高度塌陷和外边距重叠问题clearfix介绍clearfix最终代码示例:clearfix介绍利用clearfix(清除浮动)可以解决垂直外边距重叠问题(也可解决高度塌陷问题)clearfix最终代码示例:.clearfix::before,.clearfix::after{ content''; display:block; clear:both;}注:.clearfix::before{ content原创 2021-07-03 19:48:32 · 161 阅读 · 0 评论 -
使用after伪元素解决高度塌陷(最终)
@TOC一级目录原创 2021-07-03 19:21:10 · 265 阅读 · 0 评论 -
clear清楚浮动元素对当前元素所产生的影响
clearclear介绍clear作用可选值原理clear介绍若我们不希望某个元素因为其他元素浮动的影响而改变位置可以通过clear属性来清楚浮动元素对当前元素所产生的影响 clear作用清楚浮动元素对当前元素所产生的影响可选值 left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 both 清除`两侧中最大影响的`那侧原理设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素影响原创 2021-07-03 14:05:11 · 172 阅读 · 0 评论 -
浮动带来的高度塌陷与BFC
高度塌陷与BFC(块级格式化环境)高度塌陷问题BFC(Block Formatting Context)块级格式化环境高度塌陷问题1、在浮动布局中,父元素的高度默认是被子元素撑开的。2、当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离,将会无法撑起父元素的高度,导致父元素的高度丢失,3、父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱因此高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理BFC(Block Formatting Context)原创 2021-07-03 13:49:31 · 61 阅读 · 0 评论 -
浮动的特点
浮动的特点浮动的特点元素浮动后脱离文档流的特点浮动的特点1、浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,因此我们可以利用浮动来设置文字环绕图片的效果2、元素设置浮动后,将会脱离文档流。从文档流脱离后,元素的一些特点也会发生变化因此这里引出元素脱离文档流的特点:元素浮动后脱离文档流的特点对于块元素1、块元素不再独占一行2、脱离文档流以后,块元素的宽度和高度默认都被内容撑开对于行内元素1、脱离文档流以后,特点和块元素一样总结:脱离文档流以后,不需要再区分块元素和原创 2021-07-02 23:25:49 · 372 阅读 · 0 评论 -
浮动(float)
浮动(float)浮动介绍(float)注:浮动的特点总结浮动介绍(float)a)通过浮动可以使一个元素向其父元素的左侧或右侧移动b)使用float属性来设置元素的浮动c)只在父元素的范围内浮动,不会飘浮出它的父元素可选值: none 默认值,元素不浮动 left 元素向左浮动 right 元素向右浮动注:1、元素设置浮动后,水平布局的等式便不需要强制成立2、元素设置浮动后,会完全从文档流中脱离,不再占用文档流的位置, 所以元素下边的还在文原创 2021-07-02 23:06:20 · 404 阅读 · 0 评论 -
轮廓阴影和圆角
轮廓阴影和圆角轮廓(outline)阴影(box-shadow)圆角(border-radius)设置为圆形轮廓(outline)outline 用来设置元素的轮廓线,用法和border一样outline与border的不同点:轮廓不会影响到可见框的大小,也就不会影响到布局。阴影(box-shadow)a)box-shadow用来设置元素的阴影效果。b)阴影不会影响到页面布局示例:box-shadow:10px 10px 50px rgba(0,0,0,.3);第一个值:水平偏移原创 2021-07-02 19:10:37 · 169 阅读 · 0 评论 -
div盒子的大小
div盒子的大小前言box-sizing前言默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定box-sizingbox-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)可选值: content-box `默认值,宽度和高度用来设置内容区的大小` border-box `宽度和高度用来设置整个盒子可见框的大小` `widt和height指的是内容区、内边距和边框的总大小`...原创 2021-07-02 18:20:20 · 923 阅读 · 0 评论 -
浏览器的默认样式
浏览器的默认样式默认样式方法通配选择器方法引入reset.css文件引入normalize.css文件默认样式a)通常情况,浏览器都会为元素设置一些默认样式b)默认样式的存在会影响到页面的布局c)通常情况下编写网页时必须要去除浏览器的默认样式(PC端)方法通配选择器方法*{ margin:0; padding:0;}引入reset.css文件引入normalize.css文件...原创 2021-07-02 13:07:06 · 71 阅读 · 0 评论 -
行内元素的盒模型
行内元素的盒模型行内元素的盒模型displayvisibility行内元素的盒模型a)行内元素不支持设置宽度和高度b)行内元素可以设置padding,但是垂直方向padding不会影响页面的布局c)行内元素可以设置border,但是垂直方向的border不会影响页面的布局d)行内元素可以设置margin,但是垂直方向的margin不会影响页面的布局displaydisplay用来设置元素显示的类型可选值: inline 将元素设置为行内元素 block 将原创 2021-07-02 00:48:22 · 93 阅读 · 0 评论 -
垂直外边距的重叠(折叠)
垂直外边距的重叠(折叠)垂直外边距的重叠(折叠)垂直外边距的重叠(折叠)相邻的垂直方向外边距会发生重叠现象1、兄弟元素兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)特殊情况:若相邻的外边距一正一负,则取两者的和若相邻的外边距都是负值,则取两者中绝对值较大的兄弟元素之间的外边距的重叠,对于开发是有利的,所以不需要进行处理2、父子元素父子元素间相邻外边距,子元素的会传递给父元素(上外边距)父子元素之间的外边距重叠,会胡影响到页面的布局,必须要进行处理处理思路:1、不用外原创 2021-07-01 19:28:53 · 251 阅读 · 0 评论 -
div垂直方向布局
div垂直方向布局知识点汇总1、2、溢出3、overflow知识点汇总1、a)默认情况下(未设置高度时)父元素的高度被内容撑开2、溢出b)子元素是在父元素的内容区中排列的,若子元素的大小超过了父元素,则子元素会从父元素中溢出3、overflowc)使用 overflow 属性来设置父元素如何处理溢出的元素overflow-x 单独处理水平方向的overflow-y 单独处理垂直方向的可选值:visible(默认值),子元素会从父元素中溢出,在父元素外部的位置显示hidden,原创 2021-07-01 15:38:28 · 1260 阅读 · 0 评论 -
div水平方向布局
div水平方向布局元素的水平方向的布局水平居中元素的水平方向的布局元素在其父元素中水平方向的位置由以下几个属性共同决定:margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中,水平布局必须满足以下等式: margin-left + border-left + padding-left原创 2021-07-01 15:12:58 · 2996 阅读 · 0 评论 -
盒模型的border、padding与margin
盒模型补充遗漏知识边框(border)边框的宽度边框的颜色边框的样式border的简写属性盒子模型内边距(padding)可见框padding简写属性外边距(margin)margin简写属性边框(border)边框的宽度 border-width边框的颜色 border-color边框的样式 border-style边框的宽度border-width默认值一般为3个像素值的语法: 四个值:上 右 下 左 (顺时针) 三个值:上 左右 下 两个值:上下 左右原创 2021-06-30 23:59:10 · 209 阅读 · 0 评论 -
文档流(normal flow)
asdsad as原创 2021-06-30 15:15:20 · 156 阅读 · 0 评论 -
RGB(A)与HSL(A)值
RGB颜色单位RGB值(red——green——blue)RGBA(red——green——blue——alpha)十六进制的RGB值HSL值与HSLA值颜色单位在CSS中可以直接使用颜色名来设置各种颜色RGB值(red——green——blue)1、RGB通过三种颜色的不同浓度来调配出不同的颜色2、每一种颜色值的范围在0—255(0—100%)之间3、语法:RGB(红色,绿色,蓝色)tips:a)光的三原色:红(red)——绿(green)——蓝(blue)相当于颜料中的大红、中绿、原创 2021-06-30 14:52:18 · 898 阅读 · 0 评论 -
像素和百分比
像素和百分比像素百分比emrem(移动端适配常用)像素a)屏幕(显示器)实际上由一个个像素点构成b)不同屏幕的像素点的大小是不同的,像素点越小的屏幕显示的效果越清晰c)所以同样的200px在不同的设备下显示效果可能不一样百分比a)百分比可以设置属性相对父元素属性的百分比b)也可以将属性值设置为相对于其父元素属性的百分比c)设置百分比可以使子元素跟随父元素的改变而改变ema)em是相对于元素的字体大小来计算的b)1em = 1font-sizec)em会根据字体大小的改变而改变原创 2021-06-29 20:08:23 · 225 阅读 · 0 评论 -
选择器的权重(优先级)
选择器的权重样式的冲突选择器的权重CSS选择器遵循样式的冲突当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突选择器的权重!important 最高优先级(慎用)内联样式 1,0,0,0id选择器 0,1,0,0类和伪类选择器 0,0,1,0元素选择器 0,0,0,1通配选择器 0,0,0,0继承的样式 没有优先级(最低)注:a)比较优先级时,需要将所有的选择器原创 2021-06-29 18:22:10 · 2910 阅读 · 0 评论 -
样式的继承
继承样式的继承样式的继承样式的继承: 我们为一个元素设置的样式同时也会应用到它的后代元素上a)继承是发生在祖先和后代之间的b)利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次即可让所有的元素都具有该样式注:并不是所有的样式都会被继承,比如背景相关的,布局相关等的这些样式都不会被继承...原创 2021-06-29 17:52:45 · 95 阅读 · 0 评论 -
伪元素选择器
伪元素a)伪元素表示页面中一些特殊的并不真实存在的元素(特殊的位置)b)伪元素用法以 :: 开头例子:::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容常用伪元素::before 表示元素的开始::after 表示元素的最后div::before{ content:'abc'; color:red;}div::after{ content:'haha'; color:blue;}before和afte原创 2021-06-29 16:24:17 · 42 阅读 · 0 评论 -
CSS选择器(全)
常用选择器元素选择器id选择器类选择器(class选择器)通配选择器复合选择器(交集选择器)选择器分组(并集选择器)关系选择器子元素选择器后代元素选择器兄弟元素选择器属性选择器伪类选择器元素选择器作用:根据标签名来选中指定的元素语法: 标签名{ }例子:p{ } h1{ } div{ }id选择器作用:根据元素的id属性值选中一个元素语法:# id属性值{ }例子:#box{ } #abc{ }类选择器(class选择器)作用:根据元素的class属性值选中一组元原创 2021-06-29 15:07:07 · 61 阅读 · 0 评论 -
(伪类)选择器
伪类选择器伪类选择器伪类选择器伪类(不存在的类,特殊的类)a)伪类用来描述一个元素的特殊状态,比如,第一个子元素、被点击的元素、鼠标移入的元素…b)伪类一般情况下都是使用 : 开头例如: :first-child // 第一个子元素 :last-child // 最后一个子元素 :nth-child( ) //选中第 n 个子元素以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-ty原创 2021-06-29 15:06:22 · 1313 阅读 · 0 评论 -
属性选择器(不常用)
属性选择器属性选择器属性选择器[属性名] 选择含有指定属性的元素[属性名 = 属性值] 选择含有指定属性和属性值的元素[属性名 ^= 属性值] 选择属性值以指定值开头的元素[属性名 $= 属性值] 选择属性值以指定值结尾的元素[属性名 *= 属性值] 选择属性值中含有某值的元素例子:// [属性名] 选择含有指定属性的所有元素[title]{ color:orange;}// [属性名] 选择含有指定属性的元素p[title]{ color:orange;}// [属性名原创 2021-06-29 15:05:37 · 56 阅读 · 0 评论