笔记从尚硅谷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
内联元素比如,<a>
是不能设置宽和高的,可以通过设置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. 不再独占一行,而是左右排列,一行满了挪到下一行,就想我们平时写作文一样。
以上只是在正常的文档流中
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。