09 2016 档案

margin的负值
摘要：将三个盒子的宽高都设置为100px，float都设置为left，那么它们会水平排列在一排 当我们给3设置一个margin-left：-50px时会发现它占据2号元素一半的位置，这是因为3号元素margin-left设置了负值使得3号元素像左边平移了50px。 当给3号元素设置margin-left： 阅读全文
posted @ 2016-09-08 17:50 桃园 阅读(137) 评论(0) 推荐(0) 编辑
margin的百分比
摘要：当图片的margin值设置为10%时， 那么图片img的上外边距margin-top等于蓝色背景宽度（width）*10%， 同样img的左外边距margin-left也等于蓝色背景宽度（width）*10%. 当图片margin设置为10% ，此时margin的值只与盒子的宽度有关，与高度无关 图 阅读全文
posted @ 2016-09-06 11:06 桃园 阅读(250) 评论(0) 推荐(0) 编辑
绝对定位元素的百分比margin
摘要：绝对定位元素的百分比margin是相对于第一个定位元素祖先元素（relative/absolute/fixed）的宽度（width）计算的 橙色的宽度（width）为1000px， 蓝色的宽度（width）为600px， img的margin为10%， margin-left等于1000*10%， 阅读全文
posted @ 2016-09-06 11:05 桃园 阅读(1485) 评论(0) 推荐(0) 编辑
margin重叠与line-height属性
摘要：line-height line-height代表行高 蓝色背景部分为行高 line-height：2em 相邻兄弟元素margin重叠 蓝色与蓝色之间的白色部分为 margin-bottom：1em； margin-top：1em； 因为发生了margin-top与margin-bottom重叠 阅读全文
posted @ 2016-09-06 11:04 桃园 阅读(1017) 评论(0) 推荐(0) 编辑
margin：auto与水平居中
摘要：auto：自动填充 当margin-right设置为100px，margin-left设置为auto 那么margin-left的值为屏幕总的宽度减去100px 左右均为auto，水平居中显示 当margin-left与margin-right设置为auto 则平分剩余空间，也就是橙色部分会位于中间 阅读全文
posted @ 2016-09-06 10:57 桃园 阅读(767) 评论(0) 推荐(0) 编辑
【writing-mode与absolute，auto】垂直居中
摘要：实现垂直方向margin：auto居中 writing-mode:vertical-lr;改变垂直方向 ，从而使类son垂直居中， <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type=" 阅读全文
posted @ 2016-09-06 10:53 桃园 阅读(275) 评论(0) 推荐(0) 编辑
css盒子模型
摘要：/*蓝色-外边距margin */ margin-left: 100px; margin-right: 100px; margin-top: 80px;margin-bottom: 80px; margin本身是无法设置其背景颜色，所以给元素box嵌套了一个div，给这个div设置背景颜色。 /*红 阅读全文
posted @ 2016-09-06 10:52 桃园 阅读(150) 评论(0) 推荐(0) 编辑