怪味曹小豆

导航

2019年5月28日 #

css 响应式布局

摘要： 方法一： 用meta标签 贴上完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <tit 阅读全文

posted @ 2019-05-28 18:02 怪味曹小豆 阅读(129) 评论(0) 推荐(0) 编辑

定宽高的div元素垂直水平居中

摘要： 关键点在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-left与margin-top值，使元素中心位于垂直居中位置。 贴上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定 阅读全文

posted @ 2019-05-28 16:15 怪味曹小豆 阅读(126) 评论(0) 推荐(0) 编辑

css 不定宽高的div元素水平垂直居中

摘要： 效果图： 方法一： 此div元素应是 inline-block： 用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。兼容IE8. <!D 阅读全文

posted @ 2019-05-28 16:02 怪味曹小豆 阅读(1663) 评论(0) 推荐(0) 编辑

css布局--圣杯布局和双飞翼布局

摘要： 圣杯布局和双飞翼布局是经典的三栏式布局。两种布局达到效果上基本相同，都是两边两栏宽度固定，中间栏宽度自适应。（这两种布局都比较老） 在HTML结构上中间栏在最前面保证了最先渲染中间提升性能，并且兼容性良好。两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面会简单介绍两者的区别。 布局效果： 阅读全文

posted @ 2019-05-28 15:20 怪味曹小豆 阅读(178) 评论(0) 推荐(0) 编辑

css布局，两边宽度固定，中间自适应

摘要： 布局效果 方法一：flex布局 父元素设置display: flex； 子元素.left, .right都设置宽高为200px，.middle设置flex:1; 贴上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 阅读全文

posted @ 2019-05-28 10:52 怪味曹小豆 阅读(225) 评论(0) 推荐(0) 编辑