关于块状元素的一些知识点总结
来源:互联网 发布:实现网络阅卷的学校 编辑:程序博客网 时间:2024/05/29 10:10
学到这一块,突然发现以前对相关知识点的认识还不够透彻,所以这里再简单总结一下。
先给一道题目,可以自己思考下:
利用margin实现以下布局,要求结构为section>div*9,div顺序排列。
【纯计算角度】
(*本文只讨论在box-sizing:content-box时的情形,且只讨论在normal-flow的情况)
1.块级元素所有属性中,只有margin可为负值,只有margin/content(height/width)可以设置auto。
2.margin正负不影响计算,即其为负值仍可直接参与计算。(相当于加上一个负数)
3.当margin某个值为auto时,可能”被”计算为负值。
水平方向:块级元素(block level elements)的所有属性值(margin/padding/border/width)之和等于其包含块的width(内容区的宽度)。
垂直方向:块级元素(block level elements)的所有属性值(margin/padding/border/height)之和等于其包含块的height(内容区的高度)。
垂直方向,margin值(即top,bottom),有几个地方很特别的(也很有趣的):
1.设置为auto时,浏览器将忽视并重置为0。
2.设置为百分数时,百分数将相对于包含块的宽度。(水平方向,百分数也是相对于父元素宽度)
当margin单个设置出现负值时:
1.margin-left:视觉上向右移
2.margin-right:视觉上向左移
3.margin-top:视觉上向上移,实际上相当于外部认为该元素开始的位置靠下
4.margin-bottom:视觉上向右移,实际上相当于外部认为该元素结束的位置靠上。
*margin-bottom为负值时,元素本身其实并没有太大变化,但会影响其后的元素(主要指块状元素)的位置。后面块状元素会”被”靠上,甚至与该元素重叠。
好了,解题。
好懒,直接贴代码了。(原代码来源我大喵老师,然后我做了改动。)
div { width: 100px; height: 100px; border: 2px solid #03A9F4; margin-top: -2px; margin-left: -2px; background-color: #FF4081; font: 35px "微软雅黑"; color: white; text-align: center; line-height: 100px;}div:nth-child(n+4) { margin-left: 100px;}div:nth-child(6)~div { /*优先级*/ margin-left: 200px;}/**第一种方法:margin-bottom**/div:nth-child(3n){ margin-bottom: -308px;}/**第二种方法:margin-top**//**div:nth-child(4), div:nth-child(7){ margin-top: -308px;}**/
当然这道题本身可以用其他思路解,比如我当时第一反应是用float + translate,顺利解出来了。但直接使用margin的负值,也很简洁啊。
这种解法最有意思的部分就是向上偏移,我当时使用margin-top,而老师用了margin-bottom。
在我看来,bottom的思路实在巧妙,因此有了这篇总结。
最后,实际上任何方向使用margin负值的效果都是一致的(抛开水平竖直方向之类的概念),
区别只在于所处的环境,利用这一点,能实现的排序效果就很多了。
over。
- 关于块状元素的一些知识点总结
- 多目标块状元素的一些说明
- 关于java一些知识点的总结
- 关于UITableView的一些细碎知识点总结
- 关于死锁的一些知识点总结
- 关于行状元素和块状元素【鸡蛋】
- html 块状元素和内联元素总结:
- 关于UITableView的一些细小的知识点总结(持续更新)
- 关于Linux知识技能比赛一些知识点的总结
- 水平居中总结-不定宽块状元素
- css布局中关于 块状元素和行内元素的区分
- 常见的块状元素与内联元素
- 常见的块状元素与内联元素
- 常见的块状元素与内联元素
- 块状元素与内联元素的区别
- 常见的内联元素与块状元素
- 常见的块状元素与内联元素
- 常见的块状元素与内联元素
- 分布式系统开发调度技术
- immutable-js
- 线性代数 第一章
- 单片机原理及应用之AT89S52
- CentOS网络设置
- 关于块状元素的一些知识点总结
- scrollview 中 嵌套高德地图,上下滑动冲突 完美解决
- 1_许多表同时查询时,sql语句书写技巧
- 用Spring事物模板手动回滚
- 项目中定时器的使用
- Java笔记---部署 JavaWeb 项目到云服务器
- 线性表顺序表相关习题及详解 ——数据结构
- 以后再改
- C语言提高-第6讲: 参数传递方式(传值与传地址)