随笔分类 - html/css
摘要：https://www.cnblogs.com/coco1s/p/8657192.html
阅读全文
摘要：转载地址：https://segmentfault.com/a/1190000010984731
阅读全文
摘要：在移动端需要给div设置全屏 方法一： 备注：top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域。所以还要加一个overflow:hidden，不然的话在手机横屏的浏览器中打开， 底部会出现空白，而且会出现滚动条 方法二： 这个没用过
阅读全文
摘要：设置了display:flex，子元素里面，一个固定了高度，另一个的默认就有了高度 有个要求：子元素只能俩个，如果是2个以上，就没效果
阅读全文
摘要：转：https://www.cnblogs.com/lixiangyong/p/4784139.html 垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：
阅读全文
摘要：转：https://www.cnblogs.com/yzg1/p/5089534.html 单行 示例 文本溢出显示省略号,文本溢出显示省略号,文 多行 1.直接用css属性设置(只有-webkit内核才有作用) 语法 移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端； -webki
阅读全文
摘要：转：http://www.cnblogs.com/gymmer/p/6810367.html 代码：
阅读全文
摘要：给li里面的div设置overflow: hidden就会西湖此案这个问题 如果去掉overflow: hidden或者给li设置display:block或者display:inline-block就正常，不懂为什么 下面这个是网上找到的，但是和我遇到的问题还是有差距 转：https://my.o
阅读全文
摘要：参考地址：http://www.imooc.com/learn/311 什么是css预处理器？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处
阅读全文
摘要：这个时候，padding-top的值与width相等，所以可以让div宽高一样，值为width的值
阅读全文
摘要：转载自：http://zh.learnlayout.com/box-sizing.html 人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度
阅读全文
摘要：转载：http://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral 在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。
阅读全文
摘要：1 ::-webkit-input-placeholder { /* WebKit browsers */ 2 color: #A9A9A9; 3 } 4 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 5 color: #A9A9A9; 6 opacity: 1; 7 } 8 ::-moz-p...
阅读全文
摘要：转载：地址 Normalize.css 是？ Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 Normalize.css 能干什么？ 保留有用的默认值，不同于许多 CSS 的重置 标准化的样式，适用范围广的元素。 纠正错误和常见的浏览器的不一
阅读全文
摘要：参考地址：链接 +表示下一级元素，>表示子元素
阅读全文
摘要：参考地址：http://www.imooc.com/learn/680 标准盒模型 元素尺寸 可视尺寸-clientWidth（标准）——就是上图中的border box包含的尺寸。 占据尺寸-outerWidth（YY，jQuery里面是有这个方法的）——就是上图中的margin box包含的尺寸
阅读全文
摘要：一、absolute和float有相同的特性，包裹性和破坏性 1、absolute和float的相似(看下面的demo，如果图片在左上角，那么用float和absolute都一样) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"
阅读全文
摘要：一、relative对absolute的限制作用 1、限制left/top/right/bottom定位。absolute默认是在也没的左上角，当父类设定为relative,absolute就被限制在父类的区域内，设定top/left/right/bottom时，起始点为父类的左上角 2、限制z-i
阅读全文
摘要：第一种方式： //IE浏览器 .clearfloat{ zoom:1} //其他浏览器.clearfloat ; after{ display:bloak; clear:both; content:""; visibility: hidden; height:0} 第二种方式：更优雅的 //IE浏览
阅读全文
