<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[weixin_43720739的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/weixin_43720739</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; weixin_43720739]]></copyright><item><title><![CDATA[grid网格布局总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105129640</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105129640</guid><author>weixin_43720739</author><pubDate>Thu, 26 Mar 2020 22:11:42 +0800</pubDate><description><![CDATA[grid网格布局
diaplay：；
grid
inline-grid
容器（父元素）属性：
划分行：
grid-template-rows
单位：
px
%
fr
重复：repeat（行数，fr）
划分列：
grid-template-columns
单位：
px
%
fr
重复：repeat（列数，fr）
综合写法：grid-template：repeat（行数，fr）/repeat（列数，f...]]></description><category></category></item><item><title><![CDATA[移动端rem、vw布局案例1]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105107248</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105107248</guid><author>weixin_43720739</author><pubDate>Wed, 25 Mar 2020 23:06:20 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=...]]></description><category></category></item><item><title><![CDATA[多张图片实现gif动画animation效果]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079459</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079459</guid><author>weixin_43720739</author><pubDate>Tue, 24 Mar 2020 19:45:02 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[利用伪类选择器：nth-of-type实现多个列表的小图标]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079167</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079167</guid><author>weixin_43720739</author><pubDate>Tue, 24 Mar 2020 19:25:58 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[flex实现图文布局]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079107</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079107</guid><author>weixin_43720739</author><pubDate>Tue, 24 Mar 2020 19:22:18 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[利用flex弹性盒实现圣杯布局]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079061</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105079061</guid><author>weixin_43720739</author><pubDate>Tue, 24 Mar 2020 19:19:31 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[移动端视口及vw+rem布局知识总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105078925</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105078925</guid><author>weixin_43720739</author><pubDate>Tue, 24 Mar 2020 19:11:30 +0800</pubDate><description><![CDATA[视口：
浏览器显示页面内容的屏幕区域
视口分为：布局视口 视觉视口 理想视口
布局视口：
一般移动端设备的浏览器都默认设置了一个布局视口，为了解决早期pc端页面在移动端上的显示问题
苹果 安卓基本上设置这是视口的分辨率980px
视觉视口：
你看到的网页区域，指的是网址的区域
通过缩放去操作视觉视口不会影响布局视口
理想视口：
1：是网站在移动设备浏览器中最理想的一种状态（浏览和阅读宽度设定的）
...]]></description><category></category></item><item><title><![CDATA[多列布局实现瀑布流结构布局]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105059034</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105059034</guid><author>weixin_43720739</author><pubDate>Mon, 23 Mar 2020 21:58:33 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[利用flex实现两栏布局]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105058774</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105058774</guid><author>weixin_43720739</author><pubDate>Mon, 23 Mar 2020 21:48:25 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[flex子元素属性、多列布局、响应式布局的优缺点及媒体查询]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105058679</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105058679</guid><author>weixin_43720739</author><pubDate>Mon, 23 Mar 2020 21:45:06 +0800</pubDate><description><![CDATA[flex 项目（子元素）
属性：
order：；项目的优先排列顺序，数值越大，越靠到后边去 （可以为负数）
flex：1； 剩余的空间都给指定子元素（综合写法）
flex-grow： 数字不带单位，定义项目剩余的宽度进行扩张（放大）

flex-shrink： 数字不带单位，，项目总宽度超出容器时的缩小设置
    0  本身的大小，不缩小也不放大
    1  平均分配

flex-basis：...]]></description><category></category></item><item><title><![CDATA[css3变形 transform中复合写法的注意问题总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105012798</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105012798</guid><author>weixin_43720739</author><pubDate>Sun, 22 Mar 2020 23:39:19 +0800</pubDate><description><![CDATA[我们知道在css3中我们利用transform变形可以使我们的网页动起来，

]]></description><category></category></item><item><title><![CDATA[用flex弹性盒子实现骰子各个面]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105013077</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105013077</guid><author>weixin_43720739</author><pubDate>Sat, 21 Mar 2020 17:11:56 +0800</pubDate><description><![CDATA[原来我们骰子的各个面，可以用定位position来做。当我们学习了弹性盒子，我们就可用flex来实现。
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-wi...]]></description><category></category></item><item><title><![CDATA[calc() 函数、pointer-events、怪异盒模型、弹性盒知识总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/105006143</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/105006143</guid><author>weixin_43720739</author><pubDate>Sat, 21 Mar 2020 11:09:43 +0800</pubDate><description><![CDATA[calc（x - y）函数
calc() 函数用于动态计算长度值
每个运算符前后都需要留一个空格
pointer-events：一般用于遮罩层
auto
none：你让点击无效 穿透当前元素（一般用于遮罩层）
怪异盒模型
标准盒模型：
宽高是独立的，内边距是独立的，会把元素撑大，边框是独立的
注：宽高不包含内边距和边框
怪异盒模型： box-sizing：border-box；
宽高包含内边距和边...]]></description><category></category></item><item><title><![CDATA[文本阴影、盒子阴影、字体图标、背景及背景图扩展、css圆角知识总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104979523</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104979523</guid><author>weixin_43720739</author><pubDate>Thu, 19 Mar 2020 23:09:39 +0800</pubDate><description><![CDATA[文本阴影：
text-shadow:水平阴影 垂直阴影 模糊度 颜色
多组阴影时：text-shadow：第一组阴影，第二组阴影，第三组阴影；
在单词内部换行
word-wrap：；
normol 默认值，不允许在单词内部换行
break-word  允许单词在内部换行
word-break：；（比较粗暴强制）
    break-all 允许单词内部换行
    keep-all 允许在换行点换...]]></description><category></category></item><item><title><![CDATA[属性选择器、伪类选择器、层级选择器]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104958507</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104958507</guid><author>weixin_43720739</author><pubDate>Thu, 19 Mar 2020 01:06:52 +0800</pubDate><description><![CDATA[渐进增强：（作用范围：从小到大）
先保证最基本的功能 &gt; 用户体验提升
优雅降级：（作用范围：从大到小）
先针对版本较高的设备进行项目构建，保证用户体验的完美
牺牲一些效果，保证最基本的功能
选择器（选择符）：
id  class  类型（div span） 后代选择器 伪类选择器 伪元素选择…
属性选择器：
    e[attr]{}  选中e元素，且e元素有attr属性，
    e[a...]]></description><category></category></item><item><title><![CDATA[HTML5发展史、语义化标签、网页插入视频音频、新增加的表单属性]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104934447</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104934447</guid><author>weixin_43720739</author><pubDate>Tue, 17 Mar 2020 23:28:33 +0800</pubDate><description><![CDATA[html5 发展]]></description><category></category></item><item><title><![CDATA[css3实现动图效果]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104870876</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104870876</guid><author>weixin_43720739</author><pubDate>Sat, 14 Mar 2020 23:23:05 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[css-3d、动画相关总结]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104852152</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104852152</guid><author>weixin_43720739</author><pubDate>Fri, 13 Mar 2020 23:20:42 +0800</pubDate><description><![CDATA[倾斜：
transform：skew（水平倾斜）；
transform：skew（水平,垂直）；
transform：skewX（）；
transform：skewY（）；
目标选择器：
选择器：target{} 当元素被点击时的指向，发生样式的改变
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。
这个被链接的元素就是目标元素。
:target 选择器可用于选取当前活动的目标元素。
c...]]></description><category></category></item><item><title><![CDATA[css折扇效果]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104850753</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104850753</guid><author>weixin_43720739</author><pubDate>Fri, 13 Mar 2020 22:03:58 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Docum...]]></description><category></category></item><item><title><![CDATA[学习总结：浏览器兼容性、渐变、过渡、css3中的2d变形]]></title><link>https://blog.youkuaiyun.com/weixin_43720739/article/details/104831192</link><guid>https://blog.youkuaiyun.com/weixin_43720739/article/details/104831192</guid><author>weixin_43720739</author><pubDate>Thu, 12 Mar 2020 23:28:10 +0800</pubDate><description><![CDATA[css3属性:预览版，还没有一个正式的最终版，多以有很多的兼容性问题，浏览器不识别
浏览器为了使这些浏览器兼容，每一个浏览器厂商都会提供一个专属于自己的浏览器语法规则，浏览器兼容前缀
主流浏览器：
谷歌 火狐 苹果 欧朋 IE
浏览器前缀
-weklit-  谷歌
-moz-     火狐
-ms-      IE
-o-       欧朋
box-shadow:水平偏移量 垂直偏移量 模糊度 阴...]]></description><category></category></item></channel></rss>