关于前端的碎碎念2-CSS装修之盒子模型
【摘要】 学习前端,前端就好比如盖房子~ html就充当了房子结构这部分,也是房子的基础。 css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript 好了,大概这样子开始了~follow me~
CSS,层叠样式表——(Cascading Style Sheets),是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
CSS看似比较繁杂,其实只要掌握了CSS中的盒子模型、定位、以及页面布局,就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版,做出符合我们意愿的网页啦!
关于CSS的各种属性,我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框,那就是“border”,那我们需要右侧边框做一些改变,那就是“border-right”。很明显,接下来按照我们的需求还有“右边框的宽度——border-right-with”,”右边框颜色——border-right-color”等等等,诸如此类~
完全就是我们需要什么,只要凭着需求去寻找。~follow me~
盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
CSS盒模型是一种样式HTML元素的方式。每个HTML元素都是带有边框,边距,填充和内容的矩形框。
以下代码显示了元素中每个部分的布局。最外边是边距,然后是元素边界,之后是填充,内容是核心和内部最多。
盒子模型有两种:W3C标准模型和IE盒子模型(也叫做怪异模型)
标准模式:通常在非IE低浏览器中。计算方法:占的空间的宽度=内容的宽度+左右内边距的宽度+左右边框的宽度+左右外边 距的宽度(margin + padding+ border+ content)
模型包括margin、border、padding、content ,元素的width=content的宽度
怪异模式:怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法:所占空间总宽度=内容+外边距( content+margin)
元素的width=content+padding+border
他们之间的相同点和不同点其实也很容易看得出来:
相同点:都是由margin ,border,padding,content组成
不同点:计算宽/高度方法的不同,标准模式下盒子的总宽度是由margin,padding,border,content的相加得来;怪异模式下:总宽度是由content减去padding、border得来的。
我个人认为W3C定义盒子模型与IE定义的盒子模型,IE定义的比较合理,元素的宽度应该包含border(边框)和padding(填充),这个和我们现实生活的盒子是一样的,W3C也认识到自己的问题了,所以在CSS3中新增了一个样式box-sizing,包含两个属性content-box 和 border-box。
(1) content-box 元素的width=content+padding+border
(2) border-box 元素的width=width(用样式指定的宽度)
最终效果如下:
如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。
上面的图可以看到margin相邻元素值有重叠 发生外边距重叠有两个要件:⑴必须是相邻的; ⑵垂直方向上的
1.对于行级元素,margin-top和margin-bottom对于上下元素无效,margin-left和margin-right有效
2.对于相邻的块级元素margin-bottom和margin-top 取值方式
1) 都是正数: 取最大值
距离=Math.max(margin-botton,margin-top)
2) 都是负数: 取最小值
距离=Math.min(margin-botton,margin-top)
3)上面是正数,下面是负数或者 上面是负数,下面是正数: 正负相加
距离=margin-botton+margin-top
注意:如果一个无内容的空元素,其自身上下边距也会产生重叠。
margin:20px; float:left;
margin:20px; clear:both;
单个方块重叠的解决方法:1.浮动。在IE浏览器下(IE8未测过),浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下,浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。
margin:20px; 父标签overflow:hidden; zoom:1;
margin:20px; 父标签overflow:hidden; zoom:1;
同方向margin重叠的解决方法:1.与清除浮动的方法一致,给外部的box添加清除浮动相同的样式即可。常用的样式代码为:overflow:hidden; zoom:1;但是有问题的是,在IE浏览器下(未测试IE8),应用zoom属性后,似乎发生了水平方向上margin失效的情况。其他表现均一致。
margin:20px; 父标签padding:1px;
margin:20px; 父标签padding:1px;
同方向margin重叠的解决方法:2.增加些边缘属性。例如padding值,padding:1px;或是border属性,border:1px solid #cacbcc。此方法在非IE浏览器下效果良好,但是在IE浏览器下,表现很糟糕。
外边距重叠的意义
外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。
防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
以上建议可根据实际情况来采取。
曾经一度认为是浏览器BUG,汗颜!
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)