随笔分类 - CSS大全
摘要：求背景图片左边到box盒子左边框外测的距离 通过这个问题呢，我们来解释一下，首先初始化代码是这样的 结果中可以看到，我们背景图片的起始位置是在padding-box下的（也就是说在padding的左上角），那么我想让这个背景图片从content-box开始怎么办呢 添加一个样式属性backgroun
阅读全文
摘要：需求： 左侧固定宽，右侧自适应屏幕宽； 左右两列，等高布局； 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高） 方法一：浮动布局 这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果 这种实现方法最关键之处就
阅读全文
摘要：需求：高度已知为200px，写出三栏布局，左栏和右栏各位200px，中间自适应，如下图所示： 方法一：float浮动布局 原理是：定义三个区块，需要注意的是中间的区块放在右边区块的下面，统一设置高度为200px，然后设置左边栏宽度为200px并且float:left，设置右边栏宽度为200px并且f
阅读全文
摘要：viewport 视口(可视区窗口)设置详解 当我们试图在iPhone中输出屏幕宽度的时候，会发现屏幕宽度是980，居然和pc屏幕宽度差不多大 苹果主导的这些手机厂商，为了使用户获得完整的WEB体验，很多设备都会欺骗浏览器返回一个数值较大的视口，告诉浏览器，别以为我身子小，但是我想以980px宽度显
阅读全文
摘要：什么是浮动 在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 浮动的原理 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 浮动的生成 使用css属性flo
阅读全文
摘要：需求：经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度，宽度100%自适应父容器； 底部固定高度，宽度100%自适应父容器； 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 整个内容填满浏览器可视区域，并且不超出此区域！ 方法一：position:abs
阅读全文
摘要：什么是CSS盒子模型 W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在） CSS盒子模型的组成 盒子中的内容：content，盒子的边框：border，盒子边框与内容之间的距离：称为填充 padding内边距（内补丁），如果有多个盒子存在，盒
阅读全文
摘要：使用Base64格式的图片制作ICON的优势是Base64图片可以减少请求次数；加快首屏数据的显示速度；使用这种方式不会对图片压缩 使用base64工具将图片转成字符串 使用站长工具可以将图片转成字符串，直接将图片上传即可，地址：http://tool.chinaz.com/tools/imgtob
阅读全文
摘要：方法1：使用透明的图片 将父元素的背景颜色透明，然后使用一张带透明的背景图片覆盖整个区块，然后再这个区块中添加的子元素就不会透明 方法2：背景色透明 rgba来代替opacity css3中新增了一种颜色表示方法，就是rgba，前面三个参数表示颜色，第四个参数表示透明度 完全可以用背景色透明 rgb
阅读全文
摘要：方法一：使用css3 transform:translate(-50%; -50%) 思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)，第一个值是X轴，第二个值是Y轴，表示位移（详情查看transform总结）优点：
阅读全文
