2020年7月26日
BFC
摘要： 一、理解BFC 1.BFC(Box Formatting Context) Box是css布局的对象和基本单位，直观讲就是一个页面多个Box组成。 元素的类型和display属性决定了这个Box的类型；不同类型的Box，参与不同的Formatting Context（一个决定如何渲染文档的容器），因 阅读全文
posted @ 2020-07-26 17:59 呐~ 阅读(161) 评论(0) 推荐(0)
粘连布局
摘要： 一、什么是stickyFooter？ 1.经典的粘连“footer”布局； 2.有一块内容<main>； 3.当<main>的高度足够长的时候，<footer>应该紧跟在<main>元素后面； 4.当<main>元素比较短的时候，（小于屏幕的高度），我们期望这个<footer>元素能够“粘连”在屏幕 阅读全文
posted @ 2020-07-26 13:02 呐~ 阅读(228) 评论(0) 推荐(0)
2020年7月24日
解决ie6下fixed失效问题
摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .test{ position:fixed; left:50px; top:50px; wid 阅读全文
posted @ 2020-07-24 19:20 呐~ 阅读(170) 评论(0) 推荐(0)
滚动条
摘要： 如果html和body只有一个overflow属性，这个属性会作用于文档； 如果html和body都写了overflow属性， html的这个属性会永远作用于文档； body身上的这个属性会作用于自己本身。 <!DOCTYPE html> <html> <head> <meta charset="U 阅读全文
posted @ 2020-07-24 18:59 呐~ 阅读(140) 评论(0) 推荐(0)
body、html、视口三合一
摘要： 如果想让body、html和视口三合一，要让高度一层一层继承下来。 pc端下 高度自适应下，PC中html、body设置高是100%，则html、body的height为可视窗口的高，它两个的高度随可视窗口高度变化而变化。 如果不设置100%，高度是内容高度和视窗高度较大的一个。 移动端下 移动端下 阅读全文
posted @ 2020-07-24 18:32 呐~ 阅读(305) 评论(0) 推荐(0)
三列布局_双飞翼布局
摘要： 总结：圣杯布局与双飞翼布局对比 1、两种布局方式都是把主列放在文档流最前面，使主列优先加载； 2、两种布局在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。 3、两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位来实现； 双飞翼 阅读全文
posted @ 2020-07-24 11:17 呐~ 阅读(200) 评论(0) 推荐(0)
圣杯布局与伪等高布局合用
摘要： 在圣杯布局的基础上，添加padding-bottom、margin-bottom 效果图 阅读全文
posted @ 2020-07-24 11:04 呐~ 阅读(141) 评论(0) 推荐(0)
伪等高布局
摘要： 1.需求: 宽度固定,中间自适应，添加内容多列元素高度相同 2.技术点： 浮动:左右元素全部向左浮动 padding-bottom:将内容高度撑大,一般设置10000px; margin-bottom:为负值,调整元素边界,-10000px(-padding-bottom值) overflow:父元 阅读全文
posted @ 2020-07-24 01:28 呐~ 阅读(123) 评论(0) 推荐(0)
三列布局_圣杯布局
摘要： 圣杯布局特点： 1.浮动：搭建完整的布局框架 2.margin为负值调整边界：调整左右两列的位置，浏览器显示时使三列布局到一行上 3.使用相对定位调整旁边两列的位置,使两列位置调整到两头 效果图 阅读全文
posted @ 2020-07-24 00:59 呐~ 阅读(150) 评论(0) 推荐(0)
三列布局_使用定位和浮动
摘要： 效果图 三列布局需求： 1.两边固定，当中自适应 2.当中列要完整显示 3.当中列要优先加载 一、使用定位实现三列布局 缺点：必须要有容器相对定位，而且定位会提升层级，对编写页面有很大困扰 二、使用浮动实现三列布局 缺点：中间列无法优先加载 阅读全文
posted @ 2020-07-24 00:40 呐~ 阅读(217) 评论(0) 推荐(0)