css布局
文章平均质量分 60
li3196672779
这个作者很懒,什么都没留下…
展开
-
解决父元素高度塌陷的2种方法
html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> section{ background: gray; } article{ width: 50%; float:转载 2017-05-31 13:58:08 · 1504 阅读 · 0 评论 -
vertical-align: middle;
vertical-align:middle; 很强大, 对块元素无效,想对块元素有效的话, 转换行内元素或把块元素 display:table-cell,转载 2017-06-25 17:06:35 · 380 阅读 · 0 评论 -
display:table,布局自动分宽度
Document * { list-style: none; } ul { width: 300px; display: table; } ul li { display: ta转载 2017-06-25 16:53:00 · 2530 阅读 · 0 评论 -
display: table-row; 实现等高布局
Document * { padding: 0; margin: 0; } #box { display: table-row; } #img { display: table-转载 2017-06-25 16:44:42 · 3485 阅读 · 0 评论 -
display:table-cell布局
Document * { padding: 0; margin: 0; } div { display: table-cell; /*让元素以表格单元格形式出现*/ vertical-align: mid转载 2017-06-25 16:25:06 · 443 阅读 · 0 评论 -
css让元素垂直居中不用margin 0 auto
Document * { padding: 0; margin: 0; } body { margin: 100px; } #father { /*父级元素定位re*/转载 2017-06-25 16:05:12 · 1275 阅读 · 0 评论 -
css巧用position
Document 无门慧开禅师 spring summer autumn winter 春转载 2017-06-21 10:41:43 · 224 阅读 · 0 评论 -
css引入字体样式
http://www.font2web.com//?error=no_file_uploaded 可以自由转换的工具,经常用到,一种,直接在阿里巴巴尺量图 上下载足够的 图标, 在html文件里 link 引入 另一种,引入字体:@font-face { font-family: 'icon-font'; src: url('icons.ttf'转载 2017-06-03 15:26:16 · 763 阅读 · 0 评论 -
Css三列自适应布局
Title #left{ background: #9f9; width: 400px; position: relative; right: 400px; margin-left: -100%; } #main{转载 2017-06-01 23:29:35 · 397 阅读 · 0 评论 -
Css之双列自适应布局
不论怎么拖动浏览器, 左侧始终固定宽度 Document *{ margin: 0; padding: 0; } .page{ width: 100%; background: #000; posit转载 2017-06-01 23:06:41 · 1617 阅读 · 0 评论 -
css文字环绕效果
一张图片 和一段文字, 图片设置img即可转载 2017-05-31 13:47:59 · 1241 阅读 · 0 评论 -
css布局之三角戳布局
Document *{ padding: 0; margin: 0; } #container{ width: 100%; overflow: hidden; } .one{ width:转载 2017-05-31 16:33:12 · 669 阅读 · 0 评论 -
盒子布局进阶
Document section{ width: 666px; } article{ box-sizing: border-box; width: 333px; height: 333px; padding: 20px;转载 2017-05-31 16:00:19 · 244 阅读 · 0 评论 -
css布局之格子布局
格子布局 section{ background: grey; width: 670px; overflow: hidden; } article{ width: 333px; height: 233px;转载 2017-05-31 15:16:45 · 1386 阅读 · 0 评论 -
双列图文布局
Document section{ background: gainsboro; box-sizing: border-box; width: 100%; } section::after{ content: ''; cl转载 2017-05-31 14:47:03 · 1001 阅读 · 0 评论 -
box-sizing:border-box
html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> #container{ background: #000; text-align: center; width: 100%;转载 2017-05-31 13:46:16 · 371 阅读 · 0 评论 -
多多行文本垂直居中
转载 2017-06-25 17:47:34 · 386 阅读 · 0 评论