关于cssReset所需掌握的知识点(一)
2015-12-01 23:08
375 查看
知识点一:在实际开发中,计算盒子模型是一个很头疼的问题。在默认情况下所有块级元素的盒子计算方式是:盒子的总宽度(及盒子占网页中的实际宽度)=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样式,我们称之为此次项目中的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>
相关文章推荐
- ecshop导航栏自动显示三级或多级子栏目,多级频道分类,并实现css高亮显示
- css3按钮练习
- CSS3样式运用,悬浮立体方块
- WEB笔记-CSS 实现多级导航效果
- CSS+DIV详解
- DIV+CSS规范命名大全集合
- 南大软院大神养成计划-css布局
- OOCSS(样式和结构的分离与容器和内容的分离)
- OOCSS(样式和结构的分离与容器和内容的分离)
- html div css——清除浮动
- css边跨实例
- HTML+CSS学习笔记(2)
- HTML+CSS学习笔记(1)
- 自定义ProgressDialog,有四种样式。比较简洁。
- 纯CSS3实现超立体的3D图片侧翻倾斜效果
- 提高css渲染效率
- 用CSS缩小文章里的图片可以在手机里显示
- CSS3 图片悬浮缩放效果
- 浏览器默认样式
- 浏览器默认样式