Aiolimp的博客

如何突破CSS内联的最高优先级！important 再不改变当前代码的情况下，使这张图片的宽度为300px <img src="1.jpg" style="width:480px !important"> CSS方法： <img src="img/1.jpg" style="width: 300px !important;max-width: 200px;"> <img src="img/1.jpg" style="width: 300px !important;tran

CSS元素隐藏 display:none 1.DOM结构：浏览器不会渲染display：none的元素，不占据空间。 2.事件监听：无法进行DOM事件监听。 3.性能：动态改变此属性会引起重排，性能较差。 4.继承：不会被子元素继承，毕竟子元素也不会被渲染。 5.transition:transiton不支持display。 visiblity：hidden 1.DOM结构：元素被隐藏，但是会渲染不会消失，占据空间。 2.事件监听：无法进行DOM事件监听。 3.性能：动态改变此属性会引起重绘，性能较高。 4

div水平垂直居中方法总汇 方法一： 绝对定位方法：不确定当前div的宽度和高度，采用transform：translate(-50%,-50%)；当前div的父级添加相对定位(position:relative) .Children{ background: aqua; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 方法二： 绝对定位方法：确定当前div宽度

BFC_IFC_GFC_FFC 1.什么是FC Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 2.BFC 2.1什么是BFC BFC(Block Formatting contexts)，“块级格式上下文”。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父

rem用法 1.什么是rem rem是CSS3中新增的单位值 r:root em:(font size of element)相对单位，先后对于html的字体大小单位，可以用于任何设定长度的单位。 2.rem用法 css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。 因为100%=16px，1px=6.25%，所以10px=62.5%， 这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来。 注意，rem是只相对于根元素htm的fo

移动端与响应式 Viewport 1.什么是Viewport？ Viewport是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的窗口(Viewport)中，通常这个窗口比屏幕宽，这样就不用把每个网页挤到很小的窗口中,用户可以通过平移或者缩放来看网页的不同部分。 2.设置Viewport 常用的Viewport meta标签大致如下：(此标签仅适用于移动端,pc端无效) <meta name="viewport" content="width=device-width,initial-scale

flex布局（弹性布局）学习笔记 弹性容器： 设置了display：flex;这个元素为弹性容器，弹性容器中的子元素会按照弹性布局进行排列。 弹性子元素：设置了display:flex;元素的子容器即为弹性子元素，但不包括孙子元素。 flex容器属性： 1.display属性： display:flex 将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100% display:inline-flex 将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度 2.flex-direction:指

CSS浮动与清除浮动 1.CSS浮动 浮动的作用： 1.1 浮动可以解决文字包围图片的问题 1.2 浮动可以解决div之间的间隔问题 1.3 浮动可以向左或者向右进行排版布局 img{ float：left } 添加浮动前，文字行基线和图片对齐。 添加浮动后，文字包围图片。 添加浮动前，图片之间会有莫名其妙的间隔 添加浮动后，图片进行向左浮动 浮动可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素边缘或者是设置了浮动的其他元素的边缘 2.CSS浮动的高度塌陷问题 当父元素高度设置为0时，子元