随笔分类 -  CSS

CSS规范中的BFC
摘要:一、什么是BFC 1.Formatting context:页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系和相互作用。 2.Box:css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box,会参与不同的Formatting 阅读全文

posted @ 2017-05-19 20:20 高石石石 阅读(943) 评论(0) 推荐(0)

外边距折叠
摘要:1.概念 外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距 毗邻:1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中,即非浮动,非定位、非浮动元素。 在没有被分隔开的情况下,一个元素的margin-top会 阅读全文

posted @ 2017-05-09 10:39 高石石石 阅读(271) 评论(0) 推荐(0)

各种居中的css实现
摘要:一、文本居中 文本的水平居中text-align:center; 文本的垂直居中设置行高即可line-height:20px; 二、行内元素的居中 vertival-align是相对兄弟的行高来定位,所有加一个空的兄弟使得高度等于父盒子 三、盒子的居中方法 1.text-align实现水平居中 te 阅读全文

posted @ 2017-04-14 15:15 高石石石 阅读(173) 评论(0) 推荐(0)

父级盒子无高度,子盒子浮动,高度自适应
摘要:利用浮动实现三列布局,中间宽度自适应 方法一:父级盒子添加一堵墙,用clear:both清除浮动 方法二:父级盒子添加overflow:hidden 阅读全文

posted @ 2017-03-30 21:50 高石石石 阅读(2925) 评论(0) 推荐(0)

弹性布局display:flex
摘要:1.flex-direction:设置伸缩项目的排列方式,即主轴的方向 row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列 2.justify-content:调整主轴方向上的对齐方式,对于弹性盒子内元素 阅读全文

posted @ 2017-03-29 20:21 高石石石 阅读(1151) 评论(0) 推荐(0)

三栏布局方法
摘要:1.浮动法,左列左浮动,右列右浮动,插入主体。中间内容#main必须要在最后加入,#main占一行会影响后面的浮动元素 2.margin负值法,每个盒子都向一边浮动,通过负margin把盒子拉到左侧,先放中间的盒子 3.绝对定位,左右两列绝对定位,中间用margin撑开距离。最容易理解 4.flex 阅读全文

posted @ 2017-03-29 20:05 高石石石 阅读(144) 评论(0) 推荐(0)

导航