HTML
itxcr
这个作者很懒,什么都没留下…
展开
-
伪元素的使用
伪元素不能跟着hover,要这样用 .box:hover::before position: absolute 自动把元素转换为块元素。 例子: <div class="box"></div> <style> .box { width: 500px; height: 30px; position: relative; border: 1px solid #ccc...原创 2019-09-03 14:56:18 · 84 阅读 · 0 评论 -
2d转换
位移 translate 定位 会影响其他盒子位置(脱离标准流); 行内元素定位,直接变为块级元素; 移动 不影响其他元素的位置; 对行内元素无效;对块级元素生效; 子元素居中 .parent { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .son { w...原创 2019-09-03 14:57:50 · 105 阅读 · 0 评论 -
3d转化
3d转化 3d视距 perspective: 1000px; 加在body:下面所有子元素,形成统一的透视感; 加在各自父亲上:管理下面的子元素形成各自的透视感; 值越小,变化越剧烈; 3d位移 transform: translateX(200px); transform: translateY(100%); 设置百分比移动的是自身的百分之多少 transform: translateZ(100...原创 2019-09-03 14:58:33 · 223 阅读 · 0 评论 -
布局
布局 移动端布局 高度(靠内部撑起来的) 流式布局:百分比%控制宽度。浮动、清除浮动; flex布局:快;移动端兼容性布局; rem: 原稿实现:flex布局; rem单位替换px:rem&flexible.js&less 使用 PC端:基础班写法没有问题,flex不考虑兼容性; 移动端: 首先,推荐使用flex布局; 看要不要做等比,rem&flexible.js&...原创 2019-09-03 14:59:37 · 107 阅读 · 0 评论 -
flex
flex 小知识点 1.固定定位, 默认100%会失效 2.手动加100% 基于浏览器的可视窗口大小 2.1为啥没有往左走? 使用定位类 不设置left top 按照原来的位置进行脱标 flex: 1; /* 宽度、高度方向都有效果,但是不是通过width/height */ 主轴方向上flex划分剩余空间 侧轴方向进行拉伸 设置margin值,向内挤 margin: 10px; flex布局,行...原创 2019-09-03 15:00:11 · 112 阅读 · 0 评论 -
复习页面布局总结
1.流式布局容易遗忘点 设置内边距时给盒子加上 box-sizing: border-box; 2.flex布局 不给父盒子设置测量好的高度,在rem适配的时候,显示效果超出想象原创 2019-09-06 13:23:08 · 80 阅读 · 0 评论