内联元素的盒模型 display和visibility overflow 文档流

bovenson 发布于2019-08-02 16:11 / 2100人阅读

摘要：笔记从尚硅谷的第讲开始的内联元素的盒模型，此套视频是第二遍看，为了以后不再看第三遍，把重要的知识做个总结。其实我们的元素天生就有这种效果。是元素的默认值，也是设置元素为隐藏，但是它隐藏后还会占用页面的布局。以上只是在正常的文档流中

笔记从尚硅谷html+css的第54讲开始的内联元素的盒模型，此套视频是第二遍看，为了以后不再看第三遍，把重要的知识做个总结。

54讲内联元素的盒模型 内边距padding

内敛元素不能设置width和height

水平方向可以设置水平方向的内边距padding-left和padding-right

内联元素可以设置垂直方向的内边距padding-top和padding-bottom但是不会影响页面的布局，它会像被子一样把下面的元素盖住，这和块级元素是不一样的，块级元素会把它下面的元素往下方挤

内联元素可以设置边框，与上面相似水平方向的边框会影响布局，垂直方向的元素不会影响布局，而是遮盖下面的元素

外边距margin

水平方向可以设置外边距margin，而且相邻元素的外边距不会重叠而是求和，这和div块级元素相似

内联元素不支持垂直方向上的外边距margin-top和margin-bottom

总结

在水平方向上的布局几乎和块级元素相似，但是在垂直方向上和块级元素大不同

55讲 display和visibility display

内联元素比如,是不能设置宽和高的，可以通过设置display:block进行设置为块级元素。

与display:block对应的属性display:inline-block将一个元素转换为行内块元素实现了既能设置宽高又不会独占一行的效果，但是布局的时候元素间的空格会形成缝隙。其实我们的img元素天生就有这种效果。

display:none也是经常用的一个属性，它会把元素隐藏，隐藏后的元素不会占用页面的布局，但是查看源码还可以看到该元素。

visibility

visibility:visible是元素的默认值，visibility:hidden也是设置元素为隐藏，但是它隐藏后还会占用页面的布局。

总结

display和visibility是写页面css常用的布局设置，注意两个隐藏的区别。

56讲 overflow

overflow的默认属性设置是overflow:visible

overflow:hidden会把溢出的内容隐藏掉

overflow:scroll为元素设置滚动条，不管内容溢不溢出都会有滚动条。恩，样子很丑！

overflow:auto根据内容的需求自动添加滚动条，比上面的智能多了！

57讲文档流

在正常的页面中，块级元素的特点：

1. 宽度等于父元素的宽度
2. 高度被内容撑开
3. 独占一行，多个块级元素一行一行排列

在正常的页面中，内联元素的特点：

1. 高度宽度都是被内容撑开
2. 不再独占一行，而是左右排列，一行满了挪到下一行，就想我们平时写作文一样。

以上只是在正常的文档流中

云服务器 GPU云服务器 mongodb文档数据模型文档流输出 js和css内联外联 visible

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54833.html

内联元素的盒模型 display和visibility overflow 文档流

摘要：笔记从尚硅谷的第讲开始的内联元素的盒模型，此套视频是第二遍看，为了以后不再看第三遍，把重要的知识做个总结。其实我们的元素天生就有这种效果。是元素的默认值，也是设置元素为隐藏，但是它隐藏后还会占用页面的布局。以上只是在正常的文档流中笔记从尚硅谷html+css的第54讲开始的内联元素的盒模型，此套视频是第二遍看，为了以后不再看第三遍，把重要的知识做个总结。 54讲内联元素的盒模型内...

JessYanCoding 2019-08-29 18:31 评论0 收藏0
深究盒模型的margin合并问题

摘要：即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档流中的元素，就叫流内元素。两个兄弟盒之间的竖直距离由属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直会合并。如果盒的和相邻，那么可能会被彻底合并。 1.首先，了解一些词汇 - 流内元素? 如果一个元素是浮动的，绝对定位的或者是根元素，那么它就是流外元素。即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档...

cyqian 2019-08-29 13:47 评论0 收藏0
前端计划——面试题总结-CSS篇

摘要：定位使元素的位置与文档流无关，因此不占据空间。可以知道属性有以下几个特点该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。前端面试之CSS篇 1、三种基本引入方式外部样式表内部样式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

马永翠 2019-08-29 13:09 评论0 收藏0
CSS--外边距合并的问题

摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。首先看下W3C对于外边距合并的介绍：外边距合并...

longshengwang 2019-08-29 12:39 评论0 收藏0