![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
卷尾猫
https://gitee.com/yylcode
展开
-
css position定位属性各属性
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,元素的位置通过 left,top,right,bottom来进行规定。 fixed 生成绝对定位的元素, 相对于浏览器窗口进行定位,元素的位置通过left,top,right,bottom来进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位,因此,left:20px 会向元素的lef...原创 2020-04-24 17:18:13 · 159 阅读 · 0 评论 -
CSS box-sizing 两种属性 border-box,content-box
box-sizing 是什么?css的盒子模型box model 不会将padding与border计算到容器(如div)的宽高中的,这就导致你所设定的容器宽度未必是最终宽度(需要加上padding与border).因此有了box-sizing:border-box的设定,其效果就是将padding和border纳入容器宽高如何应用box-sizing多用与所有css选择...原创 2020-04-24 17:00:28 · 2222 阅读 · 0 评论 -
CSS3现状,新增选择器,2D、3D转换,动画等知识详解
目录1. css3现状2. 属性选择器3. 结构伪类选择器4. 伪元素选择器5. 2D转换5.1 二维坐标系5.2 2D转换之移动translate5.3 2D转换之旋转rotate5.4 2D转换的中心点5.5 2D转换之缩放scale5.6 2D转换综合写法6. 动画6.1 动画的基本使用6.2 动画常用属性6.3 动画简写属性...原创 2020-04-18 22:15:46 · 475 阅读 · 0 评论 -
移动端布局最全基础知识+流式布局 学习记录
1.移动端基础1.1浏览器现状*国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android开发的一样*兼容移动端主流浏览器,处理Webkit内核浏览器即可1.2手机屏幕现状*移动端设备屏幕尺寸非常多,...原创 2020-04-14 19:44:30 · 386 阅读 · 0 评论 -
移动端px/rem换算
这是设计图为750, 设计图尺寸不同,更改相应设置即可。(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFo...原创 2020-04-10 09:32:49 · 260 阅读 · 0 评论 -
flex布局原理以及各属性详解
1 布局原理1.1flex是flexibleBox的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局*当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效*伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局...原创 2020-04-13 17:03:59 · 1224 阅读 · 0 评论 -
css实现各种形状,三角形、切角、梯形、五边形、六边形、八边形、五角星
直接上代码,注释很清晰。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2020-03-11 18:41:36 · 1656 阅读 · 0 评论