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:none1.DOM结构：浏览器不会渲染display：none的元素，不占据空间。2.事件监听：无法进行DOM事件监听。3.性能：动态改变此属性会引起重排，性能较差。4.继承：不会被子元素继承，毕竟子元素也不会被渲染。5.transition:transiton不支持display。visiblity：hidden1.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_FFC1.什么是FCFormatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。2.BFC2.1什么是BFCBFC(Block Formatting contexts)，“块级格式上下文”。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父

rem用法1.什么是remrem是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

移动端与响应式 Viewport1.什么是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时，子元