关于前端的碎碎念2-CSS装修之盒子模型

举报
花溪 发表于 2020/06/24 14:10:20 2020/06/24
【摘要】 学习前端,前端就好比如盖房子~ 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元素都是带有边框,边距,填充和内容的矩形框。

以下代码显示了元素中每个部分的布局。最外边是边距,然后是元素边界,之后是填充,内容是核心和内部最多。

image.png

盒子模型有两种:W3C标准模型和IE盒子模型(也叫做怪异模型)

标准模式:通常在非IE低浏览器中。计算方法:占的空间的宽度=内容的宽度+左右内边距的宽度+左右边框的宽度+左右外边 距的宽度(margin + padding+ border+ content)  

模型包括margin、border、padding、content ,元素的width=content的宽度

image.png

怪异模式:怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法:所占空间总宽度=内容+外边距( content+margin)

元素的width=content+padding+border

image.png

他们之间的相同点和不同点其实也很容易看得出来:

  相同点:都是由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

image.pngimage.png

(2) border-box   元素的width=width(用样式指定的宽度)

image.png  image.png

最终效果如下:

image.pngimage.png

如果想保持一个盒子的真实占有宽度不变,那么加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

image.png

注意:如果一个无内容的空元素,其自身上下边距也会产生重叠。

image.png


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)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:

  1. 外层元素padding代替

  2. 内层元素透明边框 border:1px solid transparent;

  3. 内层元素绝对定位 postion:absolute:

  4. 外层元素 overflow:hidden;

  5. 内层元素 加float:left;或display:inline-block;

  6. 内层元素padding:1px;

以上建议可根据实际情况来采取。

曾经一度认为是浏览器BUG,汗颜! 



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。