随笔分类 -  CSS

摘要：要求：1.使用2个div完成2.使用3个div完成3.使用5个div完成答案：1.使用2个div完成2个DIV(www.hemin.cn) 11. 12. 15. 16.2.使用3个div完成 10.3个DIV(www.hemin.cn) 11. 12. 16. 17. 18.3.使用5个div完成5个DIV(www.hemin.cn) 14. 15. 16. 17. 18. 19. 20. 21. 22. 阅读全文

摘要：自定换行：div{word-wrap:break-word;word-break:normal;} 原始效果图展示：这是网站上很常见的分享卡片，但是“。。。”并没有换行，这时候，我们就需要给div的样式设置为自定义换行，也就是word-wrap:break-word; word-break:normal; 修改后效果图展示：修改后“。。。”就可以竖向显示了。《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《强制不换行：div{white-space:nowrap; }代码展示： ... 阅读全文

摘要：如果父div的position定义为relative或者absolute,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的。区别在于： 1、style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。 2、style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。 3、style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html... 阅读全文

摘要：position有下面属性值：static: 不使用定位（默认值）fixed：特殊的绝对定位absolute: 使用绝对定位relative: 使用相对定位示例图：绝对定位：绝对定位可以直接定位到所需要的坐标位置，所以在布局的时候会很容易，但是无法处理带有页脚的页面布局，因为我们无法确定中间的中文内容，所以无法精确的将页脚定义到中间正文的下面。绝对定位以浏览器的原始起点为依据，如果浏览器没有设置，则参照父级起点定位。当div2的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：（1）当div2的父对象(或曾祖父，只要是父级对象)parent也设置了posi 阅读全文

摘要：padding和margin的区别。padding：内边距；margin：外边距；图示：padding的改变会改变整个层的大小，而margin不会。关于margin的一个小实例：如果两个Div都设置了margin的值，那他们之间的距离如何变化呢？是两个margin相加？想减？其实是依据margin值大的那个值为两者之间的距离。下面图例中，红色层的margin是16px;绿色层的margin是30px，经测试他们之间的margin是30px；这次换成红色层的margin是16px;绿色层的margin是10px，经测试他们之间的margin是16px； 阅读全文