随笔分类 - CSS
摘要：结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，
阅读全文
摘要：BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、绝对定位元素，position（absolute，fixed）
阅读全文
摘要：今天在测试一个demo页面的时候发现给body设置高度50vh和红色背景，但是红色却占满了屏幕，网上查了查，原来html根标签没有设置背景色时，会默认使用body的背景色，所以单独再给html设置一个背景就ok了
阅读全文
摘要：对于容器属性align-content， 要让它生效的条件是：必须显式的设置布局方向 如果布局方向为横向主轴：flex-direction: row; 1、此时 align-content 的变化体现在竖直方向 2、如果要让 align-content: stretch；生效，这个时候应该去掉子项的
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：第一步 添加入库 第二步 进入库 第三步 添加到项目 第四步 更新代码 第五步 代码中使用 效果
阅读全文
摘要：1.display:none 隐藏不占据空间，子元素不继承，绑定的事件无法触发，transition无效 2.visibility:hidden 隐藏占据空间，子元素继承，设置子元素visibility：visible显示，绑定的事件无效，transition无效 3.opacity:0 隐藏占据空
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：通常我们认为CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置position：relative。前面一句是没有问题的，在没有父元素设置定位的话，默认就是以body来定位的，但是后面一句，要想相对父元素定位，父元素必
阅读全文
摘要：上述代码中，div1和div2都设置了外边距，但是这两个垂直方向的外边距却会发生重叠，实际边距为大的那个盒子的外边距 避免方法： 1.给下面的盒子设置flot:left 2.给下面的盒子设置position:absolute 3.两个盒子都同时设置margin top/bottom
阅读全文
摘要：CSS3新特性（样式） 背景 边框 文本 CSS3新特性（选择器） CSS3新特性之颜色渐变 2D转换 3D转换 CSS3新特性之动画篇 过渡 动画 CSS3新特性之网页布局篇 伸缩布局或者弹性布局【响应式布局】
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3魔方</title> <style> div.box { width: 300px; height: 300px; margin: 100px auto; position
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：pointer-events: none;
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <m
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <m
阅读全文
摘要：chrome浏览器小于12px字体默认显示12px？ font-size：10px； -webkit-transform：scal（0.83）；
阅读全文
摘要：优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效. 渐进增强：
阅读全文
