关于cssReset所需掌握的知识点(一)
来源:互联网 发布:java ee 路径 编辑:程序博客网 时间:2024/06/04 00:51
知识点一:在实际开发中,计算盒子模型是一个很头疼的问题。在默认情况下所有块级元素的盒子计算方式是:盒子的总宽度(及盒子占网页中的实际宽度)=margin+border+padding+width。这种计算方式是css中默认的计算方式。及相当于*{box-sizing:content-box;}。因为在这种方式下我们虽然为父元素设置了padding,但是padding还是会向外撑开;设置的border宽度也不能算作本身定义的width宽度。
而在实际开发中我们会重新设置css样式,我们称之为此次项目中的css Reset。而对于盒子模型我们也会重新设置成*{box-sizing:border-box;}重新设置后的样式。其盒子的总宽度为=margin+width。在这种方式下,padding就只会往里面撑开,而且border的宽度算作在width里面。这种方式计算简便,而且更加易于掌控,实际开发中更受欢迎。
知识点二:①解决在不设置border的情况下。父元素的第一个子元素的margin-top越界问题。如:
<div id="parent1"><div> <div id="parent2"> <div id="child1"></div> </div>
在css中如果设置了所有div的宽高和背景颜色,但不设置border。这时再来设置child1{margin-top:20px}就可以发现问题,并不是child1与parent2的margin-top为20px。而是parent1与parent2的margin为20。那么解决这种办法的方法有很多:1.为parent2加border-top(这种方法不可取,影响了网页的排版);2.为parent2指定padding-top=1px(这种方法同样不可取,影响了网页排版)<span style="color:#ff0000;">3.为parent2设置overflow:hidden(这种方式同样有副作用)。4.设置样式parent2:before{content:" ";display:table;}(这种方式推荐使用,完全没有副作用)。第四种方式是采用bootstrap中container的样式重置而得来的好方法!</span>
②解决所有子元素浮动后,父元素高度变为0,的问题。<span style="font-family: Arial, Helvetica, sans-serif;"></span>
<span style="white-space:pre"></span><pre name="code" class="html"><span style="white-space:pre"></span><div id="parent"> <span style="white-space:pre"></span> <div id="child1"></div><span style="white-space:pre"></span> <div id="child2"></div><span style="white-space:pre"></span></div>
<span style="white-space:pre"></span>我们都知道为两个child设置了浮动过后,两个child都离开了原有的层级,而导致父元素的高度变为0.在开发中解决的办法同样有很多:1.直接设置parent的高du(显然在很多情况下不可取)2.同样为parent设置overflow:hidden(这种方法有副作用)。4.设置parent样式<span style="color:#ff0000;">parent:after{content:" ";display:table;clear:both}(同样推荐使用完全无副作用)</span>;
知识点三:这个问题是我在实际开发项目当中所遇到的,在我们设置样式开头时,为了有更加有用标签我们往往会在css开头当中设置<span style="color:#33cc00;">u,s,b{text-decoration:none;display:block}.但是这种设置方式往往有时候会出现错误,因为u标签在html中其闭口(及</u>)不起作用</span>(这里我只测了chrome).所以会影响到后面的布局。这点在webstrom开发软件当中可以看到其闭口有划线,表示不起作用。于是我重新自定义了一个新标签<k></k>。
知识点四(也是我的问题点):解决如一个a或div标签包含一个img图片的时候,当父元素设置border时,总会与img有2px之间的间距。我的解决方法:1.为a或div设置border其宽度和高度恰恰为img的宽度和高度。2.<span style="color:#ff0000;">在bootstrap网页当中编写,不会出现两像素之间的间距</span>。但其原理至今没研究出来。哪位大神帮帮忙!
<span style="color:#33cc00;">绿色字体是我不敢确定的部分!!!!!!!!!!!</span>
0 0
- 关于cssReset所需掌握的知识点(一)
- Bootstrap入门需掌握的知识点(一)
- CSSreset
- cssReset
- CssReset
- 精通java 所需掌握的 软件
- 关于微信小程序你所需要掌握的技能
- 关于android初学者必须掌握的Activity的四大知识点
- 关于集合框架Collection基础知识点的理解掌握
- 需要掌握的知识点
- 必须掌握的知识点
- 需要掌握的知识点
- 总结java从初级到中级最后到高级所要掌握的知识点
- 关于ActionBar所需的了解(一)
- JAVA应该掌握的知识点
- Magento 必须掌握的知识点
- memcache必须掌握的知识点
- Unity基本知识点的掌握
- servlet自动刷新页面(比赛文字直播)
- Android-View Animation(视图动画)
- 10013---ASM字节码框架
- 机器码 与 汇编指令的关系
- Linux下配置文件读取操作流程及其C代码实现
- 关于cssReset所需掌握的知识点(一)
- node.js初学(一)
- poj 3311 floyd + 状态
- 小试Unity中OBJ和Scene打包Bundle与加载--wondows平台下
- 用hexo打造属于自己的静态博客
- java如何快速实现深copy
- 内存管理算法--Buddy伙伴算法
- Android休闲游戏-快踩我-开发笔记
- Android Speex编译及使用