随笔分类 -  css

圣杯布局和双飞翼布局的实现和区别
摘要：这两个布局都是 实现 左右两边固定，中间自适应的布局。其实实现方法也差不多。 结构我们这样设置 说说共同点： 1.两边都是固定宽度（假设100px），中间width:100%; 2.三个元素都设置float:left; （编辑器有个bug:图片只能缩小不能放大。orz) 3. left 设置marg 阅读全文
posted @ 2018-01-24 13:10 尾巴33 阅读(356) 评论(0) 推荐(0)
消除 inline-block 出现4px 间距的方法 和 vertical-align
摘要：在火狐F12上 如上图，两个 inline-block 行内块级元素并排在一起就会出现这个间距。就像文字连在一起的时候也有个默认字间距（latter-spacing） 会产生间距的原因是我们在写html标签的时候换了行或者加了空格 解决方法： （1）改变 html 结构 不换行： 不加空格： 但是如 阅读全文
posted @ 2018-01-24 13:05 尾巴33 阅读(311) 评论(0) 推荐(0)
常用布局方法
摘要：经常学到一些布局方法，但总是学了就忘，忘了又学。现在把它总结起来，即使后面又忘了，也可以打开来看看。 单列水平垂直居中 我们规定下面的 html 结构为 1. table cell+vertical align;inline block 2.绝对定位+transform(或者负的外边距) 3.fle 阅读全文
posted @ 2018-01-22 09:18 尾巴33 阅读(132) 评论(0) 推荐(0)
【CSS 小知识点集合】
摘要：替换元素 和 非替换元素 替换元素就是平常 看到的 input img textarea select这些都是替换元素，之所以叫替换元素，他们都是没有实际内容的，都是根据标签和属性来判断渲染些什么东西。 非替换元素就是 div p 这些，浏览器根据内容直接显示出来。 行内替换元素和行内非替换元素的区 阅读全文
posted @ 2018-01-18 21:55 尾巴33 阅读(126) 评论(0) 推荐(0)
理解BFC
摘要：一 、常见的定位方案 二、 关于BFC BFC，块级格式化上下文。 BFC 的元素排列属于普通流 BFC就像一个大盒子一样装着一堆东西，这堆东西无论怎么变化，都不会影响到盒子外面的东西。 BFC就像一个大盒子一样装着一堆东西，这堆东西无论怎么变化，都不会影响到盒子外面的东西。 如何触发BFC bod 阅读全文
posted @ 2018-01-18 21:37 尾巴33 阅读(89) 评论(0) 推荐(0)
不定宽 div 实现水平居中
摘要：居中的方式我们平常用的方法:1. margin: 0 auto ; 缺点在于需要为 div 设置宽度。2. text-align: center ; 内容和行内元素居中。 **如果 div 宽度不定,可以用以下方法实现居中：** 阅读全文
posted @ 2018-01-14 23:53 尾巴33 阅读(347) 评论(0) 推荐(0)
认识浮动
摘要：关于浮动，原本是用于方便文字围绕图片。但后来发现它在布局发挥的作用更大 浮动元素对布局的影响 把一个元素设置成浮动元素，无论它是什么元素，浮动元素会变成块级元素，它会从文档的正常流删除，还会影响布局。 首先来看浮动元素后面跟随着行内元素 一个浮动元素，一个行内元素 我们把行内元素的左外边距设置成 - 阅读全文
posted @ 2018-01-14 21:36 尾巴33 阅读(164) 评论(0) 推荐(0)