![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
长脖子的鹿
这个作者很懒,什么都没留下…
展开
-
css引入样式和权重
引入样式的四种方法:1、行间样式2、页面级css 在head标签中写style标签3、外部css样式 使用link标签4、导入样式<style>@import url("外部样式表的名称");</style>HTML中的代码:ID选择器在文档中使用一次与类不同,有且仅有一次css权重:!import infinity行间样...原创 2019-10-13 10:52:42 · 357 阅读 · 0 评论 -
sass和less
less是一种动态语言,对css赋予了动态语言的特性,如变量、继承、运算、函数。既可以在客户端运行,也可以在服务端运行sass是一种动态语言,比css多出好些功能,更容易阅读两者的区别:less是基于js的,是在客户端处理的;sass是基于ruby的,是在服务端处理的关于变量在less和sass中的唯一区别是less用@,sass用$总结一句:CSS预处理器,是通过编程的方式来开发cs...原创 2019-10-12 16:37:22 · 96 阅读 · 0 评论 -
css3的新特性
一、css3的选择器E:last-child 匹配父元素的最后一个子元素EE:nth-child(n) 匹配父元素的第n个子元素EE:nth-last-child(n)匹配父元素的倒数第n个子元素E二、圆角border-radius:15px;三、阴影text-shadow:h-shadow v-shadow blur colorh-shadow:水平位置的阴影(必选)v-s...原创 2019-10-08 11:42:21 · 73 阅读 · 0 评论 -
css3动画的优缺点
优点:1、浏览器可以对动画进行优化2、代码比较简单缺点:1、兼容性不好。2、在动画控制上不够灵活,运行过程较弱,无法附加绑定回调函数,不能在特定的位置上添加回调函数或是绑定回放事件,无进度报告。...原创 2019-10-08 15:30:58 · 889 阅读 · 0 评论 -
div+css布局较table布局的优点
div+css:优点:布局灵活、改动灵活缺点:需要考虑平台的兼容性,对制作人员技能要求过高table表格布局:优点:布局简单、快捷、兼容性好缺点:改动不便,需要调整,工作量大...原创 2019-10-08 16:45:02 · 206 阅读 · 0 评论 -
一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更高的体验
1、精灵图技术产生的目的:很多大型网页在首次加载的时候都需要加载很多的小图片,而考虑到在同一时间,服务器拥堵的情况下,为了解决这一问题,采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质:所谓精灵图就是把很多的小图片合并到一张较大的图片里,所以在首次加载页面的时候,就不用加载过多的小图片,只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可,这样在一定...原创 2019-10-08 17:02:45 · 1487 阅读 · 0 评论 -
水平居中和垂直居中
水平居中:行内元素:为该行内元素的父元素添加设置text-align:center**块级元素:**为其自身设置margin:auto样式垂直居中:利用flex布局使内部块级元素水平,垂直居中display:flex;justify-content:center;align-items:center;利用定位布局:父元素:position:relative子元素:positi...原创 2019-09-12 09:52:58 · 189 阅读 · 0 评论 -
BFC浅析
BFC全称叫做块级格式化上下文,是一个网页的概念。BFC的触发条件:1、浮动元素:float除none之外的值。2、绝对定位元素:position为absolute或是fixed3、display为inline-block、flex、table-cells4、overflow除了visible以外的其他值(hidden、scroll、auto)用到BFC的场景:阻止margin重叠;...原创 2019-10-09 10:45:53 · 60 阅读 · 0 评论 -
css可以被继承的属性
css样式表继承指的是,特定的css属性向下传递到后代元素1、字体系列属性font:组合字体2、文本系列属性text-indent:文本缩进text-align:文本水平对齐line-height:行高word-spacing:增加或减少单词间的空白(即字间隔)letter-spacing:增加或减少字符间的空白(字符间距)text-transform:控制文本大小写...原创 2019-10-09 10:56:43 · 215 阅读 · 0 评论