![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
css
狗焕sama
这个作者很懒,什么都没留下…
展开
-
重学flex布局
flex布局。永远的神align-itemsalign-items定义为交叉轴的对齐方式,当我们的flex-wrap为nowrap也就是默认不会换行时候,center是会垂直于整个父盒子的。而当我们设置flex-wrap为wrap,也就是有了好几个轴的时候会怎样呢?示例一:不设置父盒子高度父盒子:.flex { display: flex; flex-wrap: wrap; align-items: center;}结论:可以看到各行的子项都在各自行上居中对齐(.原创 2020-09-30 21:01:44 · 225 阅读 · 0 评论 -
(转)关于offsetTop
一直不太清楚这个概念,这篇文章讲的很好https://zhuanlan.zhihu.com/p/55311726原创 2020-09-13 19:43:51 · 76 阅读 · 0 评论 -
关于nth-of-type的一点补充
nth-of-type:指的是子盒子里,如果还有一个子盒子,比如:div span:nth-of-type(2){ color: greenyellow;}<div class="fa"> <span> <span class="fakeone">1</span> <span class...原创 2020-03-22 02:06:49 · 188 阅读 · 0 评论 -
本地存储
本地存储的特性:只能存储字符串sessionStorage的存储方式极其性质:生命周期:关闭浏览器窗口!在这之前都是可以进行数据存储的。并且同一个页面数据可以分享。关闭浏览器窗口或者刷新后数据也随之消失以键值对的方式存储:sessionStorage.setltem(key,value);:存储数据sessionStorage.getltem(key):获取数据注意是按照k...原创 2020-03-20 00:51:53 · 135 阅读 · 0 评论 -
box-sizing:boder-box
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。...原创 2020-03-11 00:57:28 · 144 阅读 · 0 评论 -
浏览器的私有前缀
为了兼容浏览器的老版本,所以引出浏览器的私有前缀来兼容原创 2020-03-09 21:02:42 · 158 阅读 · 0 评论 -
CSS3:3D转换
3维坐标系:z轴:垂直屏幕:往外是正值,往里是负值3D转换主要知识点:3D位移:translate3D(x,y,z)3D旋转:rotate3D(x,y,z)透视(3D眼镜):perspective3D呈现:transform-style3D位移translateZ一般跟px单位,不用百分比透视(perspective)透视可以比喻成我们的3D眼镜,近大远小:透视越大...原创 2020-03-09 10:46:27 · 160 阅读 · 0 评论 -
CSS3:2D动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画的基本使用先定义动画举例:@keyframes move {//此时move为动画名称 0%{//百分之0,表示刚开始的状态 transform: translateX(0px); } ...原创 2020-03-08 17:14:02 · 202 阅读 · 0 评论 -
CSS3:2D转换
2D转换之translate(很方便!!):语法:1. transform:translate(x,y)前进x像素X轴和前进y像素Y轴(可以为负值)2. transform:translateX(n)前进X轴n像素3. transform:translateY(n)前进Y轴transform的最大好处:不会影响其他元素的位置!!水平居中问题:<div> <p&...原创 2020-03-08 01:22:32 · 221 阅读 · 0 评论 -
CSS3:结构伪类选择器和伪元素选择器
例:<style> ul li:nth-child(8){ background-color: pink; }</style><ul> <li>1</li> <li>2</li> <li>3</li>...原创 2020-03-07 18:28:32 · 199 阅读 · 0 评论 -
HTML5
广义的HTML5概念:HTML5+CSS3+JavaScriptH5对比HTML:新增语义化标签新增多媒体标签新增input表单,表单属性新增语义化标签<header>:头部标签<nav>:导航标签<article>内容标签<section>块级标签<aside>侧标栏标签<footer>尾部标签...原创 2020-03-07 10:14:01 · 195 阅读 · 0 评论 -
关于CSS的技巧
display显示与隐藏隐藏:display: none;显示:display:block;特性:隐藏之后,不再保留位置(后者可以占据其位置)visibilityvisibility:visible;对象可见visibility:hidden;对象隐藏...原创 2020-03-05 10:45:55 · 154 阅读 · 0 评论 -
盒子的定位
三种机制的最后一种:定位为什么要使用定位?:定位可以把盒子定在某一个位置,自由的漂浮在其他盒子(包括标准流和浮动)的上面,这样可以比标准流和浮动更加灵活的摆放位置。边偏移定位=定位模式+边偏移。偏移量表示的是元素对于其父元素边线的距离定位模式定位的模式有下面这些:值所代表的意思static静态定位relative相对定位absolute绝对定...原创 2020-03-04 17:56:02 · 956 阅读 · 0 评论 -
浮动盒子
CSS布局的三种机制”网页布局的核心—用css来摆放盒子为什么要用浮动可以让多个盒子排成一行并且没有缝隙。(margin设置成负数也可以实现,但是又要调试又要设置div为inline-block)可以实现盒子的左右浮动(同上,margin也可以,但是很麻烦)...原创 2020-03-03 20:39:31 · 584 阅读 · 0 评论