css
关注
分享
扫一扫
码婆Doph
IT巨大拿
展开
-
【CSS】css的隐藏display/visibility/overflow区别
隐藏的样式区别display visibility overflow原创 2017-08-03 19:41:43 · 368 阅读 · 0 评论 -
【CSS】用CSS绘制图标（图标大全）
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac原创 2017-11-25 21:39:32 · 24838 阅读 · 0 评论 -
【CSS】CSS选择器的妙用，学会你就不用js了。
我们都知道css选择器有很多种，但是摸着良心说，你常用的有几个？ 都一样，ID和class嘛！ 看这篇博文的你，与我一样幸运。希望大家看完之后，能对css选择器多一些理解与运用。它真的可以帮你省去很多繁琐的js操作。先来个引子： 这种情况，咋办？ 有人说，给每个li起个名字，然后border-left:none; 可以，但是麻烦！兄弟选择器ul > li + li{ borde原创 2017-11-25 20:35:33 · 323 阅读 · 0 评论 -
【CSS】用shape完美实现文字环绕 circle、ellipse、polygon
shape简介shape有一下两个属性： 1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状 2.shape-inside：设置图片的内部形状，目前基本不支持shape关键字如下（类似box-sizing）：margin-boxcontent-boxborder-boxpadding-box基本形状用以下函数来定义：circle(size a原创 2017-11-25 19:42:10 · 6715 阅读 · 0 评论 -
【CSS】inline和inline-block的间距
我们发现，inline和inline-block都会引起间距和空格，而这两个属性又是我们经常使用的，所以这篇博文显得尤为重要。哈哈…直接将空格删除，也就是说在html里将两个标签写在一行且中间不要留有空格在换行代码中间嵌入注释，如下：<div style="display:inline-block"></div><!----><div style='display:inline-block'原创 2017-11-25 17:30:56 · 1318 阅读 · 0 评论 -
【CSS】基于视口单位vw vh vmin vmax 以及 rem和ch
素质N连既然已经有了percentage值，为什么还要用基于视口单位呢？ 因为，如果你想根据视口来调整某个元素的大小，采用percentage计算，那么得每一层父元素都使用percentage计数。但如果用基于视口单位，就省去了很多麻烦！ 为什么不可以用js获取窗口大小，然后做css？ 可以是可以，但是这颇有css-in-js的味道。我个人来说，不喜欢这种。并且在加载上不太符合浏览器的加载方式原创 2017-11-25 16:30:28 · 631 阅读 · 0 评论 -
【CSS】你不知道的auto
今天阅读，偶得auto总结，故共享。技术有限，文中难免存在纰漏，望各位看官，不吝指出。水平方向的auto如果将一个替换元素（如img）的宽度设置为auto，则宽度等于内容宽度。对于行内元素，width不起作用，其他的几个属性（比如margin-left为auto）结果也都是0。块级元素将属性设置为auto时，则占满空间。对于绝对定位元素，如果只有一个属性的值为auto，则占满剩余空间。垂直原创 2017-11-25 15:19:29 · 247 阅读 · 0 评论 -
【CSS】浅谈css中格式化上下文BFC、IFC（一）
格式化上下文格式化上下文指的是元素所处的环境以及初始化。这里的初始化就是所谓的格式化（如手机的重置，恢复出厂设置），环境也称为上下文（不同的环境会有不同的结果）。 格式化上下文分为：块格式化上下文行内格式化上下文从Overflow清除浮动开始visible：不对超出的内容做处理hidden：剪切超出内容（超出部分隐藏）scroll：不管内容是否超出，添加滚动条auto：超出的内容以卷原创 2017-11-25 13:06:26 · 403 阅读 · 0 评论 -
【CSS】垂直外边距折叠
在CSS中，如果有两个以及两个以上的盒子（可以是兄弟元素，也可以不是）垂直排列，那么他们相邻的垂直外边距会被合并成一个外边距。margin值以较大的为准。根元素（HTML元素）的外边距不会被折叠外边距折叠不仅是兄弟元素之间，子元素和父元素垂直方向上的margin也会被折叠<!DOCTYPE html><html><head lang="en"> <meta charset="UTF原创 2017-11-25 13:32:17 · 440 阅读 · 0 评论 -
【CSS】浅谈css中格式化上下文BFC、IFC（二）
Inline Formatting ContextInline Formatting Context的缩写就是IFC。中文名叫，行内格式化上下文。行内框参与IFC。什么是行框？在IFC中，每个框都是一个接一个地水平排列，起点是包含块的顶部，水平方向上的margin、border、和padding在框之间得到保留。框在垂直方向上以不同的方式对齐，通过vertical设置。框的每一行称为行框。 行原创 2017-11-25 14:31:55 · 370 阅读 · 0 评论 -
【CSS】浅谈CSS中的包含块
今天同大家浅谈一下css中的包含块。鄙人才疏学浅，文中误笔，还请不吝指出。包含块是什么一般情况下，在css中，一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称为包含块。举例说明，比如，子元素的初始化布局总是在父元素的左上角。包含块是一个相对概念，它不一定是绝对的某个元素。这里有很多人把包含块同父级元素混为一谈，这是不符合CSS机制的。包含块的创建在HTML中，根元素的包含块叫做初始包含块，原创 2017-11-24 15:44:22 · 1150 阅读 · 0 评论 -
【CSS】福利！总结css中15种隐藏！
话不多说，直接开始了。 1.width:0;/height:0; 这种方式的缺点是隐藏不了文字,如果需要隐藏文字，那么：2.针对文字 font-size:0;3.针对文字 color:transparent;4.opacity:0; 原理是把元素设置为透明。5.通过定位，把元素移出屏幕外即可。<style>div{ position:absolute; left:-99999原创 2017-11-24 15:01:33 · 616 阅读 · 0 评论 -
【CSS】浅谈CSS中的calc函数
在css中，我们常常需要计算功能。以前我们常常使用js来进行计算，然后布局，但是为了更符合MVC结构的概念，css中calc函数已经开始被广泛使用。calc函数允许进行任何长度值的计算，运算符包括“+”，“-”，“ * ”，“ / ”等。但是需要注意的是，运算符前后最好都要有一个空格。都是技术人员，下面，我将通过使用场景和代码来与大家共同探讨calc。场景一如图所示，图中的内容一旦超过了浮动元素的高原创 2017-11-24 14:28:08 · 1318 阅读 · 0 评论 -
【现代前端】HTML基础 DOCTYPE AMP HTML
必须要知道的DOCTYPEH5自2014年正式发布以来，其DOCTYPE文档声明即<!DOCTYPE html>被各大浏览器所支持。尽管如此，这并不代表H5的新标签可以在这些浏览器上正常解析。 这是因为DOCTYPE声明只用于指示web页面使用哪个版本的HTML版本编写指令进行解析。<!DOCTYPE html>的定义兼容所有HTML的历史版本和最新的H5版本。不支持H5的浏览器，仍会使用H4等的原创 2017-11-27 20:03:07 · 303 阅读 · 0 评论