12. HTML&CSS---内联元素

HTML

1.内联元素

width:
height:

内联元素不能设置width和height

padding-left: 100px;
padding-right: 100px;

border-left:;
border-right:; 

内联元素可以设置水平方向的内边距和边框

padding-top: 100px;
padding-bottom: 100px;

border-top: ;
border-bottom: ;

内联元素可以设置垂直方向的内边距和边框,但是不影响布局

margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;

内联元素支持水平方向的外边距,但是不支持垂直方向的外边距。
水平方向的相邻外边距不会重叠,而是求和

2. display

将一个内联元素变成块元素,通过display样式可以修改元素的类型。

display: inline;

可以将一个元素作为内联元素显示

display: block;

可以将一个元素设置块元素显示

display: inline-block;

将一个元素转为行内块元素,可以使一个元素既有行内元素的特点又有块元素的特点,即可以设置宽高,又不会独占一行。

display: none;

不显示元素,并且元素不会在页面中继续占有位置。

visibility: visible;

默认值,元素默认会在页面中显示

visibility: hidden;

元素会隐藏不显示,但是不会占有位置。

3. overflow

子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小。
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示。
超出父元素的内容,我们称为溢出的内容。
父元素默认是将溢出内容,在父元素外边显示,通过overflow可以设置父元素如何处理溢出元素:

  • visible
    默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示
  • hidden
    溢出的内容,会被修剪,不会显示
  • scroll
    会为父元素添加滚动条,通过拖动滚动条来查看完整内容,该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条。
  • auto
    会根据需求自动添加滚动条,需要水平就添加水平,需要垂直就添加垂直,都不需要就都不添加。

4. 文档流

文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中。

元素在文档流中的特点

  • 块元素

    • 块元素在文档流中会独占一行,块元素会自上向下排列。
    • 块元素在文档流中默认宽度是父元素的100%
    • 块元素在文档流中的高度默认被内容撑开
  • 内联元素

    • 内联元素在文档流中只占自身的大小,会默认从左到右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。

当元素的高度或宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度和高度,以适应内边距

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,338评论 2 66
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,042评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0 1
  • 过了零点,但是刚看完不二情书的激动让我无法入睡。问问自己,激动什么呢?在第一次看不二情书时,看到一半就困的睡过去。...
    上善亦水阅读 250评论 3 1