CSS - 文章分类 - 优昙陀罗

清除浮动

摘要：float作用：把块级元素左右排列。 float缺陷：脱离文档流，影响父元素的兄弟元素(外面元素)。解决思想：撑起父元素高度。方法： 1.自身元素添加样式clear: both/left/right 2.父元素最后添加空h盒子div，样式设为clear: both; 3.父元素设置伪元素:aft 阅读全文

posted @ 2018-11-24 12:35 优昙陀罗阅读(108) 评论(0) 推荐(0)

css布局

摘要：1.盒子布局常用单词：inline,block 2.浮动布局 float，margin 3.定位布局 position:relative,absolute 4.弹性布局 flex 阅读全文

posted @ 2018-11-24 00:57 优昙陀罗阅读(90) 评论(0) 推荐(0)

ul li设计问题

摘要：li默认display: block; 效果图：阅读全文

posted @ 2018-11-23 22:03 优昙陀罗阅读(116) 评论(0) 推荐(0)

content

摘要：1. 2. 3. 注：attr()返回属性值。阅读全文

posted @ 2018-11-19 19:16 优昙陀罗阅读(487) 评论(0) 推荐(0)

Flex布局

摘要：常用知识点：flex-grow,flex-basis,order。阅读全文

posted @ 2018-11-15 23:27 优昙陀罗阅读(189) 评论(0) 推荐(0)

双飞翼布局

摘要：常用float,margn负值的使用。阅读全文

posted @ 2018-11-15 23:11 优昙陀罗阅读(195) 评论(0) 推荐(0)

圣杯布局

摘要：常用知识点：relative,margn负值的使用。阅读全文

posted @ 2018-11-15 22:39 优昙陀罗阅读(204) 评论(0) 推荐(0)

JS、CSS、DOM内置函数

只有注册用户登录后才能阅读该文。

posted @ 2018-07-10 02:49 优昙陀罗阅读(31) 评论(0) 推荐(0)

自适应篇

摘要：一、两列定宽，一列自适应 1.table html: css: 效果图： 2.flex html: css: 效果图： 3.float + margin html: 二、两侧定宽，中间自适应 1.table html: css: 效果图： 2.flex html: css: 效果图： 3.float 阅读全文

posted @ 2018-03-03 03:25 优昙陀罗阅读(280) 评论(1) 推荐(0)

右定宽左自适应篇

摘要：1.float + margin html: css: 效果图：提示：实际上是背景等高！！！ 2.table html: css: .container{display:table;table-layout:fixed;width:100%;}.left{display:table-cell;}. 阅读全文

posted @ 2018-03-03 02:48 优昙陀罗阅读(276) 评论(0) 推荐(0)

左定宽右自适应篇

摘要：1.flloat + margin html: css: 效果图： 2.float + overflow html: css: 效果图： 3.table html: css: 效果图： 4.flex html: css: 效果图：阅读全文

posted @ 2018-03-03 02:21 优昙陀罗阅读(223) 评论(0) 推荐(0)

多列等高篇

摘要：1.table html: css: 效果图： 2.flex html: css: 效果图：阅读全文

posted @ 2018-03-03 02:01 优昙陀罗阅读(187) 评论(0) 推荐(0)

多列等分篇

摘要：1.float html： css：效果图： 2.table html: css: 效果图： 3.flex html: css: 效果图： html：阅读全文

posted @ 2018-03-03 01:41 优昙陀罗阅读(214) 评论(0) 推荐(0)

单列水平垂直居中篇

摘要：1.table-cell + vertical-align + text-align + inline-block html： css: 效果图： 2.absolute html: css: 效果图： 3.flex html： css：效果图：阅读全文

posted @ 2018-03-02 21:42 优昙陀罗阅读(280) 评论(0) 推荐(0)

单列垂直居中篇

摘要：1.vertical-align html: css：效果图： 2.absolute html： css：效果图： 3.flex html： css：效果图：阅读全文

posted @ 2018-03-02 20:35 优昙陀罗阅读(178) 评论(0) 推荐(0)

单列水平居中篇

摘要：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 阅读全文

posted @ 2018-03-02 19:24 优昙陀罗阅读(214) 评论(0) 推荐(0)

文章分类 - CSS