随笔分类 -  CSS布局

实现水平居中的办法
摘要：原文 简书原文：https://www.jianshu.com/p/3c92fb92fa5d 大纲 1、margin和width实现水平居中 2、inline-block实现水平居中方法 3、浮动实现水平居中的方法 4、绝对定位实现水平居中 5、CSS3的flex实现水平居中方法 6、CSS3的fi 阅读全文
posted @ 2018-07-19 00:37 前端路上的小兵 阅读(1049) 评论(0) 推荐(0)
实现垂直居中
摘要：原文 简书原文：https://www.jianshu.com/p/ad29cc9e8aff 大纲 前言 1、使用绝对定位和负外边距对块级元素进行垂直居中 2、使用绝对定位和transform 3、绝对定位结合margin: auto 4、使用padding实现子元素的垂直居中 5、设置第三方基准 阅读全文
posted @ 2018-07-19 00:25 前端路上的小兵 阅读(695) 评论(0) 推荐(0)
三栏布局（双飞翼布局和圣杯布局）
摘要：原文 简书原文：https://www.jianshu.com/p/925b9d0ebc33 大纲 1、三栏布局的引入 2、基本思路及不同实现方式的区别 3、布局实例 3.1、圣杯布局 3.2、双飞翼布局 1、三栏布局的引入 关于三栏式布局，常规情况下，可以使用float实现，也可以使用relati 阅读全文
posted @ 2018-07-18 23:40 前端路上的小兵 阅读(643) 评论(0) 推荐(0)
格式化上下文formatting contexts
摘要：原文 简书原文：https://www.jianshu.com/p/20c32c367b63 什么是格式化上下文（formatting contexts） Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何 阅读全文
posted @ 2018-07-16 23:07 前端路上的小兵 阅读(480) 评论(0) 推荐(1)
定位体系（定位机制）
摘要：原文 简书原文：https://www.jianshu.com/p/65bfdbe42fb1 大纲 1、定位体系的意义 2、定位体系的分类 3、常规流：( Normal flow ) 4、浮动（Floats） 5、绝对定位（Absolute positioning） 6、选择定位方案 1、定位体系的 阅读全文
posted @ 2018-07-16 21:21 前端路上的小兵 阅读(559) 评论(0) 推荐(1)
CSS盒子模型
摘要：原文 简书原文：https://www.jianshu.com/p/366665ab9c1c 大纲 1、CSS盒子模型的概念 2、行内元素是否也属于盒子模型呢？ 3、标准盒子模型和IE盒子模型 4、box-sizing：设置盒子模型 5、盒子模型是有空间的 1、CSS盒子模型的概念 css盒子模型 阅读全文
posted @ 2018-07-15 23:49 前端路上的小兵 阅读(1767) 评论(0) 推荐(1)
可视化格式模型(visual formatting model)
摘要：原文 简书原文：https://www.jianshu.com/p/7632f16ff555 大纲 1、认识可视化模型 2、可视化模型的内容 3、可视化模型的影响因素 1、认识可视化模型 盒子模型是CSS中所有元素产生的box的自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是 阅读全文
posted @ 2018-07-15 23:31 前端路上的小兵 阅读(593) 评论(0) 推荐(0)
CSS布局开篇
摘要：原文： 简书原文：https://www.jianshu.com/p/2c78b927f8c4 开篇 这是我写CSS布局的第一篇文章，之所以将布局从中摘出来单独放一部分是因为我觉得光是布局这块内容就有很多很多内容了，而这甚至可以说是CSS的核心所在，也许有很多你以前不甚了解其原理的问题，或者很多百思 阅读全文
posted @ 2018-07-15 22:27 前端路上的小兵 阅读(165) 评论(0) 推荐(0)
CSS外边距合并（塌陷/margin越界）
摘要：原文 简书原文：https://www.jianshu.com/p/5f18f12cd162 大纲 1、什么是外边距合并？(折叠外边距) 2、外边距带来的影响 3、折叠的结果 4、产生折叠的原因 5、出现的情况 1、什么是外边距合并？(折叠外边距) 外边距合并指的是，当两个垂直外边距相遇时，它们将形 阅读全文
posted @ 2018-07-14 23:11 前端路上的小兵 阅读(7311) 评论(1) 推荐(1)
CSS负边距margin的应用
摘要：原文 简书原文：https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响：https://www.cnblogs.com/shcrk/p/9310834.html 大纲 1、实战：利用负边距在文档流中的作用——实现选项卡上边框消失 2、实战： 阅读全文
posted @ 2018-07-14 20:22 前端路上的小兵 阅读(470) 评论(0) 推荐(0)
CSS负margin的影响
摘要：原文 简书原文：https://www.jianshu.com/p/87677fd2ea34 相关文章： CSS负边距margin的应用：https://www.cnblogs.com/shcrk/p/9310877.html 大纲 1、负边距对元素自身的影响 2、负边距在普通文档流中的作用 3、负 阅读全文
posted @ 2018-07-14 20:01 前端路上的小兵 阅读(983) 评论(0) 推荐(0)
清除浮动的方式
摘要：原文： 简书原文：https://www.jianshu.com/p/c7f02b50a8f5 清除浮动的原因 当给元素添加上浮动的时候，会造成页面布局上的一些意想不到的结果，如：子元素设置浮动无法撑起没有设置高度的父元素。 可以看出本应包住3个 inner DIV的 outer DIV 却没有包住 阅读全文
posted @ 2018-07-14 19:39 前端路上的小兵 阅读(240) 评论(0) 推荐(1)