css
高石石石
缘,妙不可言
展开
-
三栏布局方法
1. 浮动法,左列左浮动,右列右浮动,插入主体。中间内容#main必须要在最后加入,#main占一行会影响后面的浮动元素 html,body{ margin: 0; height: 100%; } #left{ width: 120px; float: left; height: 100%;原创 2017-07-13 11:36:50 · 201 阅读 · 0 评论 -
父级盒子无高度,子盒子浮动,高度自适应
利用浮动实现三列布局,中间宽度自适应 #box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ hei原创 2017-07-13 11:45:50 · 2706 阅读 · 0 评论 -
弹性布局display:flex
1.flex-direction:设置伸缩项目的排列方式,即主轴的方向row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列2.justify-content:调整主轴方向上的对齐方式,对于弹性盒子内元素flex-start 伸缩项目以起始点靠齐 flex-end原创 2017-07-13 13:49:00 · 463 阅读 · 0 评论 -
各种居中的css实现
一、文本居中 文本的水平居中text-align:center; 文本的垂直居中设置行高即可line-height:20px;二、行内元素的居中vertival-align是相对兄弟的行高来定位,所有加一个空的兄弟使得高度等于父盒子 #box{ width: 800px; height: 800px; border: 1px solid re原创 2017-07-14 12:20:06 · 236 阅读 · 0 评论 -
外边距折叠
1.概念外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距毗邻:1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中,即非浮动,非定位、非浮动元素。在没有被分隔开的情况下,一个元素的margin-top会和它普通流中的第一个元素的margin-top相邻;只有在一个元素的height:auto的情况下,marg原创 2017-07-14 12:39:29 · 230 阅读 · 0 评论 -
CSS规范中的BFC
一、什么是BFC1.Formatting context:页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系和相互作用。2.Box:css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box,会参与不同的Formatting Context(决定如何渲染文档)。 block-level box:display属性是block、原创 2017-07-14 19:45:11 · 285 阅读 · 0 评论