css
css
兰兰的风吖
个人学习总结记录
展开
-
一文搞懂flex布局
flex布局详解原创 2024-06-12 22:15:32 · 759 阅读 · 0 评论 -
结构伪类选择器设定元素样式失效问题
下最后一个子元素msg-item;-----------------实际上并无这个元素。.msg-item:nth-last-child(2) 选择的是。.msg-item:last-child 选择的是。下倒数第二个子元素msg-item;原创 2023-03-21 15:04:24 · 303 阅读 · 0 评论 -
C3新增特性总结
来源原创 2021-08-27 15:26:24 · 321 阅读 · 0 评论 -
如何将图片变为圆形
1.准备一张图片,用ps打开,选择椭圆边框工具,按住shift画圆:2.按住ctrl+j,生成新图层13.关掉背景图层4.选择透视裁剪工具,裁剪图片5.按enter键,然后存储为png格式结果:原创 2020-12-17 16:43:19 · 6425 阅读 · 2 评论 -
CSS3学习---2d转换
声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!2d转换:2D 转换是改变标签在二维平面上的位置和形状。移动:translate旋转:rotate缩放:scale移动:translateransform: translate(x, y)transform: translateX(n)transfrom: translateY(n)特点:不影响其他元素的位置100%单位,是相对于本身的宽度和高度来计算**经典案例:**盒子居中时,“.原创 2020-12-17 19:13:37 · 108 阅读 · 0 评论 -
CSS3学习---动画
声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!动画的使用方法定义动画调用定义好的动画初步使用效果:使气球转一圈实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1..原创 2020-12-19 11:41:02 · 97 阅读 · 2 评论 -
CSS3学习---3d转换
以下内容为个人学习总结,如有错误之处,烦请多多指正!案例:实现两面翻转的盒子效果:实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.原创 2020-12-20 17:43:43 · 80 阅读 · 0 评论 -
css3学习---背景缩放background-size
规定背景图像的尺寸background-size: 背景图片宽度 背景图片高度;单位: 长度|百分比(相对于父盒子来说)|cover|contain;示例:在红色border的div里放入背景图片,不设置时,显示图片原来大小的样子。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content.原创 2020-12-21 15:45:58 · 715 阅读 · 0 评论 -
css选择器(二)--- 属性、结构伪类、伪元素选择器
1属性选择器2结构伪类选择器3伪元素(伪类)选择器tips:类选择器、属性选择器、伪类选择器权重为10原创 2020-12-23 11:28:03 · 95 阅读 · 0 评论 -
css选择器相关(三)--- 伪类与伪元素
:first-child 匹配父元素中第一个子元素:last-child 匹配父元素中最后一个子元素:only-child 匹配父元素中仅有一个子元素的p元素<style> /* 匹配父元素中第一个子元素*/ p:first-child { background-color: yellow; } /* 匹配父元素中最后一个子元素*/ p:last-child { background: pink;.原创 2021-03-01 21:04:17 · 1330 阅读 · 0 评论 -
flex布局的常见属性
父项属性flex-directionflex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。flex-direction 的取值:举例说明:<div> <span>1</span> <span>2</span> <span>3</span></div>①父元素不设置flex-direction时,默认水平方向为主轴,元素从左向右排列原创 2021-05-17 22:13:56 · 446 阅读 · 0 评论 -
css定位(二)---css中粘性定位(sticky)---C3新增属性
作用:相对定位(position:relative)和固定定位(position:fixed)的混合。sticky相当于加了一个滚动事件的处理,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。当滚动到父元素不在可视区域范围内时,定位效果就会消失。使用条件:父元素不能overflow:hidden(容器无法滚动)必须指定top、bottom、left、right4个值之一,原创 2021-08-23 17:52:34 · 393 阅读 · 0 评论 -
flex布局---典型案例
1.左右固定,中间自适应<div class="box"> <div class="left"></div> <div class="content"></div> <div class="right"></div></div>.box { display: flex; height: 200px;}.left { width: 200px; back原创 2021-08-20 00:22:15 · 426 阅读 · 0 评论 -
利用css伪元素画div的四个直角
效果如图:html如下:<!-- pannel就是要被画上四个小直角的div元素--><div class="pannel"> <div class="panel-footer"></div></div>css如下:.pannel { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); height: 2.998501re原创 2021-06-27 19:22:03 · 957 阅读 · 0 评论 -
margin与padding分别设为几个参数的含义
1个:都是。2个:上下、左右3个:上、左右、下4个:上、右、下、左(顺时针)原创 2021-06-14 22:42:04 · 117 阅读 · 0 评论 -
css选择器(一)--- 权重问题
important权重10000(最大)内联style='' //权重1000(仅次于 !important)ID选择器#content'' //权重100类、伪类、属性选择器权重101.类: .content2 伪类:同一个标签,根据其不同的种状态,有不同的样式。用冒号来表示。比如a标签 a:link{ /*点击之前 */ } a:visited{ /*被访问过之后 */ } a:hover{ /*鼠标悬停 */ } a:ac原创 2021-03-08 10:53:04 · 314 阅读 · 0 评论 -
css浮动清除
CSS 布局的三种机制普通流(标准流)、浮动和定位浮动漂浮在普通流的上面(1)浮动元素会脱离标准流(2)float属性会改变元素display属性,设置浮动属性,可以让 div 水平排列,并且没有间隙两个div的显示:设置inline-block: 可以水平显示,不过 div 之间有间隙设置浮动属性,可以让 div 水平排列,并且没有间隙浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。清除浮动:原因父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,原创 2021-03-08 10:05:56 · 73 阅读 · 0 评论 -
浮动元素重叠问题
浮动元素与块级元素结果:块级元素的边框、背景在浮动元素下,内容与浮动元素平级显示.pinkBox { background-color: pink; border: 1px solid red; width: 500px; height: 300px; float: left;}.greenBox { background-color: lightgreen; border: 1px solid green; width: 700px;原创 2021-03-04 22:26:37 · 533 阅读 · 3 评论 -
CSS控制图片http请求情况---以chrome为例
img元素标签中出现的图片1.普通单个img元素:请求1次<img src="images/bg.jpg" alt="">2.多个img元素重复:同上,请求1次3.单个img元素,加样式属性:style=“display: none”,同上,请求1次4.单个img元素,加样式属性:style=“visibility: hidden”,同上,请求1次作为页面元素背景出现的图片<div class="box"> 盒子</div>1.普通原创 2021-02-08 13:25:32 · 282 阅读 · 0 评论 -
css学习---外边距合并(塌陷)问题
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。1.相邻块元素垂直外边距的合并2.嵌套块元素垂直外边距的合并原创 2020-12-28 16:42:34 · 126 阅读 · 0 评论 -
css---vertical-align的使用(去除图片底侧空白缝隙)
有宽度的块级元素居中对齐,是margin: 0 auto;让文字居中对齐,是 text-align: center;vertical-align:垂直对齐,它只针对于行内元素或者行内块元素默认情况下,图片会和文字的基线对齐,如图:设置vertical-align后:去除图片底侧空白缝隙原因:图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。导致图片底侧会有一个空白缝隙。<!DOCTYPE html><html lang="en">&l.原创 2020-12-24 16:03:09 · 444 阅读 · 0 评论 -
子盒子在父盒子水平垂直方向居中方法总结
声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!实现效果(让绿色盒子(子盒子)显示在红色盒子(父盒子)的中间):总的来说,就是子盒子采用绝对定位,父盒子采用相对定位,再回退挪动子盒子宽高的50%即可。方法1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte.原创 2020-12-17 15:16:43 · 1829 阅读 · 1 评论 -
前端笔记记录---精灵图的实现
声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!为什么使用精灵图?一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。所以,为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。原理将网页中的一些背景图像整合到一张大图中(精灵图),当网页元素需要使用时,定位到精灵图中不同位置的某个小图即可。如:我们使用这样一张精灵图作为背景图:实现效果:点击图标后,可以进入相应的页面。.原创 2020-12-15 15:51:31 · 532 阅读 · 0 评论 -
前端笔记记录---视频播放效果的实现(display的使用)
声明:以下内容为个人学习总结,初衷是方便自己学习复习记录。如有错误之处,烦请多多指正!实现效果:实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl.原创 2020-12-15 10:51:48 · 392 阅读 · 0 评论 -
css定位(一)---基本定位总结
声明:以下内容为个人学习总结,可能有理解有误或记录错误之处,初衷是方便自己学习复习记录。定位=定位模式+边偏移。需要掌握的定位模式- 相对定位(relative)- 绝对定位(absolute)- 固定定位(fixed)边偏移:top,bottom,left,right相对定位元素相对于它原来在标准流中的位置 来定,且元素位置不脱离标准流:绝对定位元素以带有定位的最近父级元素(若父元素无定位,则以浏览器)来定,且元素位置脱离标准流相对定位与绝对定位总结当子元素使用绝对.原创 2020-12-13 12:56:20 · 213 阅读 · 0 评论 -
前端笔记记录---简单导航栏(浮动)
声明:以下内容为个人学习总结,可能有理解有误或记录错误之处,初衷是方便自己学习复习记录。实现效果点击前:点击后:实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen.原创 2020-12-13 10:10:54 · 280 阅读 · 2 评论 -
前端笔记记录----简单导航栏续(背景图片练习)
实现效果点击前:点击后:实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav {原创 2020-12-09 09:45:35 · 235 阅读 · 0 评论 -
前端笔记记录---简单导航栏的实现
简单导航栏的实现效果:具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a{ text-原创 2020-12-08 17:18:07 · 183 阅读 · 0 评论 -
在html中如何使div在页面中居中显示
在html中如何使div在页面中居中显示最近无聊中又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现,因为css还没仔细研究过,等我参加完复试定会仔细探究探究。既然实现了,我就先记录下来,要不然下次又忘了。代码如下(这是一个网页最外层div的css样式):#all{ width: 80...原创 2019-02-28 13:40:41 · 61235 阅读 · 4 评论