文章分类 - CSS
清除浮动
摘要:float作用:把块级元素左右排列。 float缺陷:脱离文档流,影响父元素的兄弟元素(外面元素)。 解决思想:撑起父元素高度。 方法: 1.自身元素添加样式clear: both/left/right 2.父元素最后添加空h盒子div,样式设为clear: both; 3.父元素设置伪元素:aft
阅读全文
css布局
摘要:1.盒子布局 常用单词:inline,block 2.浮动布局 float,margin 3.定位布局 position:relative,absolute 4.弹性布局 flex
阅读全文
自适应篇
摘要:一、两列定宽,一列自适应 1.table html: css: 效果图: 2.flex html: css: 效果图: 3.float + margin html: 二、两侧定宽,中间自适应 1.table html: css: 效果图: 2.flex html: css: 效果图: 3.float
阅读全文
右定宽左自适应篇
摘要:1.float + margin html: css: 效果图: 提示:实际上是背景等高!!! 2.table html: css: .container{display:table;table-layout:fixed;width:100%;}.left{display:table-cell;}.
阅读全文
左定宽右自适应篇
摘要:1.flloat + margin html: css: 效果图: 2.float + overflow html: css: 效果图: 3.table html: css: 效果图: 4.flex html: css: 效果图:
阅读全文
单列水平垂直居中篇
摘要:1.table-cell + vertical-align + text-align + inline-block html: css: 效果图: 2.absolute html: css: 效果图: 3.flex html: css: 效果图:
阅读全文
单列水平居中篇
摘要:1.inline-block + text-align html: css: 效果图: 2.margin:0 auto html: css: 效果图: 3.table + margin html: css: 效果图: 4.absolute html: css: 效果图: 5.flex html: c
阅读全文