CSS
文章平均质量分 73
Favour72
一方水土养一方人,圆圆的地球养圆圆的我
展开
-
css实现上下左右对勾选中状态角标
css实现上下左右对勾选中状态角标。原创 2024-05-06 16:09:47 · 585 阅读 · 0 评论 -
关于重绘repaint和重排reflow
渲染树转换为网页布局,称为"布局流"(flow) ,布局显示到页面的这个过程,称为“绘制”(paint) 。它们都具有阻塞效应,并且会耗费很多时间和计算资源。页面生成以后,脚本操作和样式表操作,都会触发“重流”(reflow) 和“重绘”(repaint) 。用户的互动也会触发重流和重绘,比如设置了鼠标悬停(a:hover)效果、页面滚动、在输入框中输入文本、改变窗口大小等等。重流和重绘并不一定一起发生,重流必然导致重绘,重绘不一定需要重流。比如改变元素颜色,只会导致重绘,而不会导致重原创 2022-03-19 23:16:54 · 412 阅读 · 0 评论 -
CSS笔记(二)------变换 transform
transform: rotate | scale | skew | translate;属性之间用空格隔开 注意:不是逗号“,”1. 移动translate(x,y)水平移动translateX()垂直移动translateY() X值为正往左,负往右 Y值为正往下,负往上 同一个属性不同的值下面的值会把上面的盖住 简写:translate(值1,值2)逗号隔开,值1是x,值2是y(斜着走 写一个值是x...原创 2022-03-17 21:47:49 · 301 阅读 · 0 评论 -
CSS笔记----新增元素
一、文本相关样式2.文本阴影 text-shadow text-shadow : 水平方向阴影 垂直阴影 [模糊距离] [阴影颜色];盒子模型 box-shadow盒子阴影 box-shadow: 水平阴影 垂直阴影 [模糊距离] [阴影扩展半径] [阴影颜色] [投影方式] 阴影颜色:默认为黑色 投影方式:默认为外投影,若设置为inset,则为内投影...原创 2022-03-16 19:54:32 · 965 阅读 · 0 评论 -
overflow:hidden与display:none的区别
1、Display:none隐藏 但是在原来的标准流不占位置,使用此属性之后元素不存在了,元素占据的位置也不存在。2、Overflow:hidden对行内元素无效,必须是块级元素,并且设置宽度高度。Overflow:hidden,隐藏之后元素依然占据着位置。视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,display:none和visible:hidden相同点:都能把网页上某个元素隐藏起来。二、diaplay:none与visibility:hidd原创 2022-03-16 13:32:23 · 2137 阅读 · 1 评论 -
CSS3笔记(一)----新增选择器
一、基本选择器1.* 通配符通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素*{ margin:0; padding:0;}2.类选择器(.className)1、使用类选择器之前需要在html元素上定义类名<li class="box content">2</li>.content {font-weight: bold; color: yellow;}2、类选择器还可以结合元素选择器来使代表类是on的p元素 (..原创 2022-03-16 13:14:55 · 99 阅读 · 0 评论 -
CSS笔记(十)----书写顺序和布局思路
前言因为最近写代码一直都感觉写的很乱,不知所措查了一下,大家也可以了解一下,让自己的代码写的更专业!!优雅!!成熟稳重高质量!一、CSS属性书写顺序1.布局定位属性:display规定元素生成框的类型position定位float浮动clear清除浮动overflow内容溢出处理方式2.自身属性:width宽度height高度margin外边距padding内边距border边框background背景...原创 2022-03-12 22:37:00 · 278 阅读 · 0 评论 -
CSS笔记(八)盒子模型-----定位
1.当某个元素可以自由的在盒子内移动,并且压住其它盒子2.当我们滚动窗口时,盒子是固定屏幕某个位置的以前的标准流和浮动无法实现上述效果所以,浮动和定位的区别:1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式,边偏移则决定原创 2022-03-10 21:27:45 · 3028 阅读 · 0 评论 -
常用的css命名规则
头:header top 内容:content/container / main尾:footer bottom导航:nav navigation navlist subnav侧栏:sidebar栏目:column cols页面外围控制整体布局宽度:wrapper左右中:left right center navleft headerleft 登录条:loginbar login标志:logo广告:banner页面主体:ma.........原创 2022-06-15 14:08:23 · 5443 阅读 · 0 评论 -
CSS笔记(七) 盒子模型------浮动
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言今天这篇帖子具体讲了浮动,浮动对于我们的网页布局起到了很大的作用。传统网页布局的三种方式:网页布局的本质----用css来摆放盒子,把盒子摆到相应位置css提供了三种传统布局方式(哎呀,简单易懂就是盒子如何进行排列顺序):标准流(普通流/文档流) 浮动 定位...原创 2022-03-08 21:01:25 · 2451 阅读 · 0 评论 -
CSS笔记(六)-------CSS精灵图
一、精灵图产生的目的很多大型网页在首次加载的时候都需要加载很多的小图片,而考虑到在同一时间,服务器拥堵的情况下,为了解决这一问题,采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。二、精灵图的本质:所谓精灵图就是把很多的小图片合并到一张较大的图片里,所以在首次加载页面的时候,就不用加载过多的小图片,只需要加载出来将小图片合并起来的那一张大图片即可,这样在一定程度上减少了页面的加载速度,也一定程度上缓解了服务器的压力。三、精灵图的原理CSS Spr原创 2022-03-07 21:59:44 · 114 阅读 · 0 评论 -
CSS笔记(五) 盒子模型-----背景图片
一、背景图片1.背景颜色 background-color: ; 2.背景图片 background-image: ;如果设置背景图片比盒子设置的宽度和高度小原创 2022-03-06 19:40:41 · 8341 阅读 · 1 评论 -
CSS笔记(四) 一些常见问题及技巧
一、盒子之间有空隙 <style type="text/css"> .box{ width: 500px; height: 30px; background-color: #F798DB; } li{ list-style-type: none; } .content ul li{ display: inline-block; width: 50px; background-color: aqua;原创 2022-03-05 14:19:05 · 340 阅读 · 0 评论 -
CSS笔记三 盒子模型-------框架
前言盒子模型分为原创 2022-03-04 21:51:01 · 201 阅读 · 0 评论 -
CSS笔记二 字体文本样式
一、字体文本样式 字体相关样式 1. font-family 设置字体 可以指定多个字体,不同字体间用“,”隔开 字体名字中间有空格的,要用双引号引起来 2. font-size 字体大小 常用单位 px/em 默认 16px = 1em em 以当前字号为准 3. font-style ...原创 2022-03-03 20:49:04 · 915 阅读 · 1 评论 -
herf、src和link与@import的区别
前言我们在开发页面的时候,有时候需要需要引用一些外部的资源,经常分不清一些链接,下面我们就来谈谈它们之间到底分别是什么,这样使用的时候就做到心中有数。一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。href是表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:<link href="reset.css" rel=”stylesheet“/>浏览器会识别该文档为css文.原创 2022-03-02 23:51:02 · 1254 阅读 · 0 评论 -
CSS笔记一 CSS语法和基本选择器
CSS基本语法基本选择器html中引入CSS的方法CSS中长度单位的定义CSS中颜色的定义CSS中和字体格式有关的属性CSS中和文本段落格式有关的属性原创 2022-03-02 21:45:51 · 315 阅读 · 0 评论