css3
文章平均质量分 60
每天进步一大步
一个向往前后端精通的小白,博客记录自己的复习和学习新东西
展开
-
HTML-CSS(六十六)CSS于JS结合
CSS配合javascript可以发挥更大的威力,实现一些更加复杂的交互效果。案例:时钟<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: no原创 2021-05-14 08:57:58 · 171 阅读 · 0 评论 -
HTML-CSS(六十七)CSS新特性
自定义属性 CSS自定义属性(也称为‘css变量’),在目前所有的现代浏览器中都得到了支持。(之前碰到过less@、sass$)css的自定义属性写法:定义 :root{–name:属性值} (不一定限制在:root当中,也可以在其他选择器中)使用 选择器{ 属性名:var(–name) }计算和单位:如果在定义时,就给属性值设置单位,那么在引用的时候是可以不写单位的。但是如果在设置属性值时不写单位,在引用时用拼接的形式写单位。那么不会被识别出来的我们可原创 2021-05-14 08:53:17 · 112 阅读 · 0 评论 -
HTML-CSS(六十六)CSS架构
在一个大型项目中,由于页面过多,导致css代码难以维护和开发。所以css架构可以帮助我们解决文件管理与文件划分等问题。首先要对css进行模块化处理,一个模块负责一类操作行为。可以使用sass和less...原创 2021-05-14 08:35:49 · 77 阅读 · 0 评论 -
Postcss(六十五)
PostCss:css工程化处理器、css后处理器PostCss本身是一个功能比较单一的工具。它提供了一种方式用Javascipt代码来处理CSS。利用PostCss可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。官网地址:https://postcss.org/安装:1.安装node环境2.npm install postcss-cli -g(全局)3.-o(普通css转换成工程css命令)、-w(实时监听)4.postcss.config.js(配置我们需要使用的插原创 2021-05-13 09:40:43 · 1281 阅读 · 0 评论 -
sass和less(六十四)
sass和less介绍和环境搭建Sass和Less都属于预处理器,CSS预处理器定义了,一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程特性,如:变量、语句、函数、继承等概念。将CSS作为目标生成文件,然后开发者就只要用这种语言进行CSS的编码工作Less:官网地址:http://lesscss.org/Vscode插件:Easy Less 直接在扩展安装就行Hbuilder-x插件:工具->插件安装->安装新插件->前往插件市场安装->选择les原创 2021-05-12 09:17:18 · 143 阅读 · 0 评论 -
Boostrap(未完待续)(六十三)
Boostrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局,移动端设备优先的WEB项目。基于jquery。适用于小型项目,因为boostrap很多样式都预设好了,所以大型项目还是尽量自己手写的好。Bootstrap相当于就是它有许多现成的样式可以引用,你就需要添加个类名就行。不过理解原理,自己能够手动写一个更好了。特色:1.响应式布局:我们不需要自己去写madia queries,系统已经帮我们写好了。只需要调用给我们的样式就行2.基于flex的栅格系统3.丰富的组件和工具方法4.原创 2021-05-11 09:13:50 · 1574 阅读 · 1 评论 -
响应式布局之两种操作模式(六十二)
直接在原基础上更改自适应宽度:随着设备的增大,宽度也自适应的增加/* 小设备 */ .container{ width: 100%; height: 1200px; padding-left: 15px; padding-right: 15px; margin: 0 auto; background-color:green; } /* 大设备 */ @media all and (min-width:768px){原创 2021-05-10 08:58:09 · 272 阅读 · 0 评论 -
响应式布局(六十一)
一般来说,对于一些大型项目,pc端和移动端时分别用的两套代码。而对于一些中小型项目而言,用的就是响应式布局,pc和移动端共用一套代码。响应式布局:利用媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局。媒体类型:(一般用all)并列、取反and、not最大最小宽度min-width\max-width(可以参考最大、最小宽度)横屏与竖屏orentation:portrait(竖屏)\orientation:landscape<link&原创 2021-05-10 08:50:11 · 401 阅读 · 0 评论 -
HTML-CSS(六十)js动态设置font-size
1rem=根元素的font-size值动态设置font-size值:js方式设置:首先layout viewport的宽度可以通过document.documentElement.clientWidth获取。iphone 6的visual viewport宽度是375iphone 6的visual viewport宽度是414使用meta,让布局视口(layout viewport的宽度)=device-width。如果我们想要在iphone 6中设置font-size:100px。那么原创 2021-05-10 08:37:34 · 5150 阅读 · 0 评论 -
HTML-CSS (五十九) rem单位以及rem布局原理
em:是一个相对单位,1em等于当前或父元素的font-size值rem:是一个相对单位,1rem等于根元素的font-size值vw/vh:把屏幕分为100份,1vw等于屏幕宽的1%,1vh等于屏幕高的1%原创 2021-05-09 09:58:23 · 119 阅读 · 0 评论 -
HTML-CSS(五十八)移动端适配方案
1.百分比布局,也叫流式布局。代表网站:优酷、百度、天猫、腾讯。元素大小不会发生变化,适配改变的是元素之间的间距。窄设备间距小,宽设备间距大2.等比缩放布局,也叫rem布局。代表网站:网易、爱奇艺、淘宝、美团。元素间距基本不会发生改变,适配改变的是元素的大小。窄设备元素小,宽设备元素大流式布局原则好处:大屏幕下显示更多的内容。坏处:宽屏比例下会有一些不协调流式布局练习:拉勾网移动端...原创 2021-05-09 09:55:58 · 135 阅读 · 0 评论 -
HTML-CSS(五十七)移动端-viewport视口
切换移动端:f12->toggle device toolbar ->刷新浏览器一般网站是将pc端和移动端代码分开。样式布局不一致访问淘宝网->后端检测当前设备->如果是pc端->www.taobao.com访问淘宝网->后端检测设备->如果是移动端->www.taobao.com重定向->h5.m.taobao.com重定向:在HTTP协议中,重定向操作由服务器通过发送特殊的响应(即redirects)而触发。HTTP协议的重定向相应的状原创 2021-05-09 09:51:59 · 489 阅读 · 0 评论 -
HTML-CSS(五十六)grid布局
grid布局是一个二维布局方法,纵横两个方向总是同时出grid-template-columns和grid-template-rows对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应(auto)以及fr单位(网格剩余空间比例单位)。auto与1fr区别在于,auto时根据内容撑起的变宽,fr是对剩余空间的划分有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作如果列布局(行布局的分布)选用fr作为单位,并且总fr的值<1原创 2021-05-08 09:14:33 · 867 阅读 · 0 评论 -
HTML-CSS(五十五)Flex弹性盒模型
Flex:简便完整、响应式的实现各种页面布局。现在各种浏览器支持属性示例:垂直居中<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .parent{ width: 400px; height: 400px; display: flex;原创 2021-05-07 08:20:34 · 409 阅读 · 0 评论 -
HTML-CSS(五十四)布局扩展
等高布局功能:让在同一行里的元素高度一直保持一致。也就是说当其他元素一旦改变高度时,在同一列的高度也会跟着变化,并且所有元素高度都是一样的。因为所有元素都放在一列,可能采取float浮动了,首先大家会想着清除浮动然后在将其中一个的高度设成100%,另外的高度自定义,这样就可以实现等高了。但其实不是这样的,即使你让高度存在,但是父元素的高度还是0。可以看下图实现方式:margin+padding当margin-bottom设置负值时,相当于下面的元素相同的值设置margin-top。如果我们设原创 2021-05-06 09:40:03 · 104 阅读 · 0 评论 -
HTML-CSS(五十三)优雅降级和渐进增强
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。比如:我们可以现在IE6.7做一个最基本的输入框,能够实现功能就行。再到chrome高版本实现边框美化比如做个边框圆角的优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容在hrome高版本实现边框美化比如做个边框圆角的。如果在低版本不兼容的话,我们就可以使用个图片遮盖什么的...原创 2021-05-05 09:46:03 · 178 阅读 · 0 评论 -
HTML-CSS(五十二)IE低版本BUG
由于就浏览器在设计上有很多缺陷,导致一些BUG的产生,所以针对这些问题需要做出兼容处理。为了做版本测试,我自己下载的是IE Tester做测试。IE常见兼容问题1.IE8及以下透明度低版本IE的透明度不变解决方式:添加属性 filter: alpha(opacity=number); number取值范围是1-100,如果想要半透明的话可以设置alpha(opcity=number)2.IE6以下双边距当设置了浮动+margin-left之后。低版本的左边距会比正常的边距多出一倍解决原创 2021-05-05 09:44:26 · 77 阅读 · 0 评论 -
HTML-CSS(五十一)column分栏布局
column-count:number; 分栏个数column-width:number px; 分栏宽度column-gap: number px ; 分栏的间距column-rule: numberpx(宽度) color(颜色) 边线形状(与border设置边框一样)column-span:all/默认不写;合并分栏(独占一行,在需要独占一行的元素上引用该属性)注意:当我们设置分栏的宽度和个数时,它们之间是有冲突的。要么你就写分栏的个数,要么就写分栏的宽度<!DOCTYPE原创 2021-05-05 09:30:22 · 1316 阅读 · 0 评论 -
HTML-CSS(五十)blur模糊值和calc计算
blurfilter:blur(number px)number值越大,模糊程度越明显calc写法:属性:calc( -/+/*/除 )单位在最后 符号两侧记得空格原图:经过运算后的图:原创 2021-05-04 08:30:59 · 320 阅读 · 0 评论 -
HTML-CSS(四十九)box-reflect倒影
属性值:above 倒影在上边below 倒影在下边因为box-reflect还未标准化,需要加钱最left 倒影在左边边right 倒映在右边距高 倒影与原图之间的距离遮罩|渐变遮罩渐变只是针对透明度的渐变,不能支持颜色渐变颜色毫无变化透明度扩展:利用scale为负值,也能实现翻转效国(如果浏览器不兼容box-reflect,这个可以作为备选方案)左翻转下翻转左翻转+下反转...原创 2021-05-04 08:17:35 · 145 阅读 · 0 评论 -
HTML-CSS(四十八)mask遮罩效果
原理:透明部分遮住多余的,只有是实心部分才展示背景图/插入图片部分mask:url repeat x y/w h ,多遮罩url:图片地址repeat:平铺/no-repeat不平铺w:遮罩宽,h:遮罩高mask目前还没有标准化,所以添加浏览器前缀。默认x,y都平铺...原创 2021-05-04 08:03:53 · 1003 阅读 · 0 评论 -
HTML-CSS(四十七)box-shadown盒子阴影
写法:box-shadow:x y blur spreed color inset,多阴影x:向左为正,向右为负y:向下偏移为正、向上为负blur:模糊值number(px)。针对阴影偏移量周围spreed:在盒子中心向四周扩散。针对原盒子周围inset:内阴影/outset 外阴影(默认值)注意:不写内阴影还是外阴影的时候,默认是外阴影。但是写了外阴影的话,他就不起作用了注:阴影默认颜色是黑色box-shadown示例:官网图片浮动+阴影<!DOCTYPE html&原创 2021-05-03 10:37:06 · 355 阅读 · 0 评论 -
HTML-CSS(四十六)css3:text-shadow文字阴影
写法text-shadow:x(px) y(px) 阴影模糊程度number(px) 阴影颜色,在设置一层阴影注意:1.(x为正值时向右偏移)(y为正值是,向下偏移)(相对于自己进行偏移)2.阴影默认颜色与文字颜色一样3.通过逗号方式隔开,可以形成多阴影4.阴影模糊程度是值越大,越模糊text-shadow示例:火焰字...原创 2021-05-03 10:31:53 · 117 阅读 · 0 评论 -
HTML-CSS(四十五)@font-face字体图标
font-face 是CSS3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中好处:1.可以非常方便的改变大小和颜色直接通过font-size、color等文字样式去修饰字体图标2.放大后不会失真3.减少请求次数和提高加载速度4.简化网页布局一般图片和文字排列比较麻烦,但是文字和文字之间排列就可以不用麻烦排列5.减少设计师和前端工程师的工作量设计师不需要设计图标,前端工程师也不需要调用雪碧图和自己切图6.可使用计算机没有提供的字体@font-face { font-原创 2021-05-03 10:28:27 · 964 阅读 · 0 评论 -
HTML-CSS(四十四)CSS3渐变
background-image:linear-gradient()线性渐变(值需要添加到background-image属性上,因为相当于作为背景图层)渐变颜色默认情况下,根据颜色顺序从左到右,元素按照从上到下进行渐变的。background-image: linear-gradient(color,color,…);渐变的位置变化(point、angle)pointbackground-image: linear-gradient(to xxxx,color,color)。其中xxx原创 2021-05-02 11:00:18 · 863 阅读 · 0 评论 -
HTML-CSS(四十三)CSS背景扩展
background-size:背景图尺寸大小background-size:cover 覆盖 整个容器都充满背景图background-size:contain 包含 只要背景图能够布满框或者高就行backgtound-size:x y 自定义宽高background-size:100px 100pxbackground-origin:背景图填充位置background-origin:padding-box 默认值 背景图填充位置paddin原创 2021-05-02 10:06:22 · 257 阅读 · 0 评论 -
HTML-CSS(四十二)transfrom3D相关属性
3d属性rotateX():正值向上rotateY();正值向右translateZ():政治向前,负值向后注意:translateZ值不要超过景深(下文提到),否则效果不会很好。还有就是元素不是放大了,只不过物体离你更近scaleZ():立体元素的厚度更改之前:更改之后:3d写法:scale3d():三个值x y ztranslate3d():三个值 x y zrotate3d():四个值0|1(x轴是否添加旋转角度)0|1(y轴是否添加旋转角度)0|1(z轴是否添加旋转角度)d原创 2021-05-01 08:10:38 · 309 阅读 · 1 评论 -
HTML-CSS(四十一)animation动画
animation属性animation-name:设置动画的名字(自定义的)animation-duration:动画的持续时间animation-delay:动画的延迟时间animatio-iteration-count:动画的重复次数,默认值是1,infinite无限次数animation-timing-function:动画的运动形式@keyframes name{ //定义关键帧form{}to{}}@keyframes name{0%{}x%{}100%{}}a原创 2021-05-01 07:47:39 · 2678 阅读 · 3 评论 -
HTML-CSS(四十)transfrom变形
translate:位移相对自己移动transfrom:translateX(+numberpx)在现在基础上向右移transfrom:translateY(+numberpx)在现在基础上向下移transfrom:translateZ(+numberpx) 在现在基础上向外移动,需要在3d空间才能观测到变化。x往右为正,往左为负。y往下为正,往上为负。z外为正,内为负复合:transfrom:translate(x,y),当你使用translate不能只写一个值,否则无效。z值不能够在复合样原创 2021-04-30 08:49:25 · 574 阅读 · 0 评论 -
HTML-CSS(三十九)transition过渡
**transition-property:**规定设置过渡效果的CSS属性的名称(all、或者单独属性名)**transition-duration:**规定完成过渡效果需要多少秒或毫秒**transition-delay:**定义过渡效果合适开始(提前数值为正数、延迟数值为负数)为负数:假如你的过渡需要三秒(transition-duration:3s),但是你的transioton-delay:-1s,相当于你的过渡时间就只是2s而已。也就是说他直接从2s就开始动画,第1s被跳过了提前结束了*原创 2021-04-30 08:14:15 · 308 阅读 · 0 评论