随笔分类 - CSS
摘要：什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而
阅读全文
摘要：记录下学习过程 主要是用字体覆盖，并且对上层字体使用mask-image的属性进行展示(遮罩层) <h1>爱你</h1> h1{ margin:100px; } 这个时候在样式中继续写入h1的after伪类，会在dom中插入这个内容，大概位置在： <h1> 爱你 xxxx </h1> 这个位置 样式
阅读全文
摘要：在一个div中，需要对其里面的元素变成行内元素，但是使用display:inline-block会发生水平不对齐的情况 这个时候可以对父元素div使用弹性布局改变为行方向： display: flex; flex-direction: row;
阅读全文
摘要：需求是点击上传的时候进行子级div高度不定，相对来说父级div高度也不能固定，把元素都设置成普通标准流，然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考： .opus_upload_img_body_third_div{ background: #FFFFFF;
阅读全文
摘要：放置一个div标签做提示框，在其里面再放一个div标签做小尖角。 并设定提示框和小方块的大小、边框。 提示框样式如下： width:300px; height:100px; border:1px solid #000; 小方块样式如下： width:10px; height:10px; border
阅读全文
摘要：1. 直接设置CSS样式达到目的 .bg{ background-image: url(../images/1.jpg);//此为图片地址 background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-
阅读全文
摘要：方法一、使用line-heigh使多行文字居中或图片居中 把文字包裹在一个inline-block元素中vertical-align middle，外部元素line-heigh等于高度 1 <div class="box1"> 2 <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中
阅读全文
摘要：网页布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 - Flex布局，可以简便、完整、响应式地实现各种页面布局。已经得到了所有浏览器的支持，最近
阅读全文
摘要：Animation 使用简写属性，将动画与 div 元素绑定： Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 注释：Internet Explore
阅读全文
摘要：我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中，我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用，以达到预
阅读全文
摘要：当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow
阅读全文
摘要：1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会
阅读全文
摘要：CSS 选择符有哪些？ 1.id选择器（#id） 2.类选择器（.class） 3.标签选择器（div，h1，p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[title]） 9.伪类选择器（a:hove
阅读全文
摘要：什么是回流(重排 reflow)？ 回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中 （继昨日每日一题：dis
阅读全文
摘要：css控制元素不可见的方法 { display: none; /* 不占据空间，无法点击 */ } /********************************************************************************/ { visibility: hid
阅读全文
摘要：做的时候想要边框为比较好看的样式，需要UI切图并且放在div中，看起来会好看点 像这样的，我随便挑选了一个，UI帮我切图出来 需要把这个图片填到相应的div里面，但是很显然碰到一个问题，图片太大，而且放进去以后还不是响应式的 那么解决问题的就来了： background:url(1.jpg);-we
阅读全文
摘要：页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结
阅读全文
摘要：CSS行高——line-height 初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。 所谓行高是指文本行基线间的垂直距离。要想理
阅读全文
摘要：最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。 CSS2/media 在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些
阅读全文
