首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

盒子模型讲解后继，display、overflow、float属性都了解多少？？还有文档流也一起看看吧，HTML、CSS（六）

作者： | 来源：互联网 | 2023-09-07 17:56
文章目录display属性display:none与visibility:hidden区别overflow属性文档流元素在文档流中的特点块元素内联元素浮动float属性float特

文章目录

  • display属性
    • display:none与visibility:hidden区别
  • overflow属性
  • 文档流
    • 元素在文档流中的特点
      • 块元素
      • 内联元素
  • 浮动
    • float属性
    • float特点
  • 之前的



上次的笔记说了CSS中最重要的盒子模型&＃xff0c;不知道大家掌握了没有&＃xff0c;需要了解的可以查看上一次的博客。这次我们继续我们的笔记。
display属性

假设一个我们写一个超链接&＃xff1a;


<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">a{background-color: #bfa;height: 500px;width: 500px;}style>head><body><a href&＃61;"#">我是一个大大的超链接a>body>
html>

这个超链接有个超人梦想&＃xff0c;想成为一个大大的超链接。所以我们为它设置了500px的高和宽&＃xff0c;但是我们之前说过&＃xff0c;这个标签是一个内联元素它是不能改变内容区的大小的。所以它的梦想受到了阻碍&＃xff0c;那怎么办呢&＃xff1f;&＃xff1f;&＃xff1f;


值描述
none此元素不会被显示&＃xff0c;并且元素不会在页面中占有位置。&＃xff08;一了百了&＃xff0c;走就走了&＃xff01;&＃xff01;&＃xff09;
block此元素将显示为块级元素&＃xff0c;此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素&＃xff0c;元素前后没有换行符。
inline-block行内块元素。&＃xff08;CSS2.1 新增的值&＃xff09;&＃xff0c;将一个元素转化为行内元素&＃xff0c;可以使一个元素既有行内元素的特点又有块元素的特点&＃xff0c;既可以设置宽高&＃xff0c;又不会独占一行。&＃xff08;典型&＃xff1a;img标签&＃xff09;
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact&＃xff0c;不过由于缺乏广泛支持&＃xff0c;已经从 CSS2.1 中删除。
markerCSS 中有值 marker&＃xff0c;不过由于缺乏广泛支持&＃xff0c;已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示&＃xff08;类似 &＃xff09;&＃xff0c;表格前后带有换行符。
inline-table此元素会作为内联表格来显示&＃xff08;类似&＃xff09;&＃xff0c;表格前后没有换行符。&＃xff09;。&＃xff09;。&＃xff09;。&＃xff09;。&＃xff09;
table-row-group此元素会作为一个或多个行的分组来显示&＃xff08;类似
table-header-group此元素会作为一个或多个行的分组来显示&＃xff08;类似 <thead>&＃xff09;。
table-footer-group此元素会作为一个或多个行的分组来显示&＃xff08;类似
table-row此元素会作为一个表格行显示&＃xff08;类似
table-column-group此元素会作为一个或多个列的分组来显示&＃xff08;类似
table-column此元素会作为一个单元格列显示&＃xff08;类似
table-cell此元素会作为一个表格单元格显示&＃xff08;类似和 &＃xff09;
table-caption此元素会作为一个表格标题显示&＃xff08;类似
&＃xff09;
inherit规定应该从父元素继承 display 属性的值。

  • 这样我们就可以通过dispaly:block将内联元素转化为块元素了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3s1lgl3m-1587614559402)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/1大大超链接.gif)]

display:none与visibility:hidden区别


  • 我们上面说了&＃xff0c;display:none会隐藏元素&＃xff0c;使元素不会在网页中显示&＃xff0c;并且不会占据位置。先看下display:none&＃xff0c;我们在加入了dispaly:none后刷新页面是这个效果&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amufrikj-1587614559408)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/2display&＃xff1a;none.gif)]

  • 再说visibility&＃xff0c;visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。可能的值&＃xff1a;

值描述
visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时&＃xff0c;此值可删除一行或一列&＃xff0c;但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上&＃xff0c;会呈现为 “hidden”。
inherit规定应该从父元素继承 visibility 属性的值。

我们主要说visibility:hidden&＃xff0c;同样上面的情况&＃xff0c;我们来看下使用visibility:hidden再刷新页面的效果&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ikbADsgt-1587614559411)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/3vidibility.gif)]

overflow属性

说我们的overflow属性前&＃xff0c;先说一段代码&＃xff1a;


<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">.box1{width: 200px;height: 200px;background-color: #BBFFAA;}.box2{width: 100px;height: 500px;background-color: red;}style>head><body><div class&＃61;"box1"><div class&＃61;"box2">div>div>body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGyN5rsm-1587614559415)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/4子元素长度超出父元素.jpg)]

  • 子元素默认是存在于父元素内容区中的&＃xff0c;理论上讲子元素的最大可以等于父元素内容区的大小。
  • 如果子元素的大小超过了父元素的内容区&＃xff0c;则超过的大小会在父元素以外的位置显示。
  • 子元素超出父元素的内容成为溢出的内容。
  • 父元素默认将溢出内容在外部显示。
  • 但有时我们不需要外部显示&＃xff0c;或许移除溢出部分&＃xff0c;或许在父元素中使用滚动条查看。
  • 通过overflow属性&＃xff0c;可以设置父元素如何处理溢出内容。可能的值&＃xff1a;

值描述
visible默认值。内容不会被修剪&＃xff0c;会呈现在元素框之外。
hidden内容会被修剪&＃xff0c;并且其余内容是不可见的。&＃xff08;一剪梅&＃xff1a;溢出的内容被剪没了&＃xff09;
scroll内容会被修剪&＃xff0c;但是浏览器会显示滚动条以便查看其余的内容。该属性不论内容是否溢出都会添加水平和垂直双方向的滚动条&＃xff08;不智能&＃xff09;。
auto如果内容被修剪&＃xff0c;则浏览器会显示滚动条以便查看其余的内容。根据需求自动添加滚动条&＃xff08;智能&＃xff09;。
inherit规定应该从父元素继承 overflow 属性的值。

文档流

  • 先说文档&＃xff1a;文档带代表网页&＃xff0c;每一个页面都是一个文档。

  • 文档流&＃xff08;相当于盖房子的地基&＃xff09;&＃xff1a;处在网页的最底层&＃xff0c;它表示的是一个网页中的位置&＃xff0c;我们所创建的元素默认都在文档流中。

那我们最重要的其并不是文档流&＃xff0c;而是元素在文档流中的特点&＃xff01;&＃xff01;&＃xff01;

元素在文档流中的特点

大家对着些内容可能都比较熟悉了&＃xff0c;但是还是要说一下的。

块元素


  1. 块元素在文档流中会独占一行&＃xff0c;块元素会自上向下排列。
  2. 块元素在文档流中&＃xff0c;默认宽度是父元素的100%。
  3. 块元素在文档流中&＃xff0c;默认高度被内容撑开&＃xff0c;子元素多高它就多高。

内联元素


  1. 内联元素在文档流中只占自身的大小&＃xff0c;会默认从左向右排列&＃xff0c;如果一行中不足以容纳所有的内联元素&＃xff0c;则会换到下一行。
  2. 内联元素在文档流中&＃xff0c;宽度、高度默认都被内容撑开。

浮动

接下来我们说另一个知识点——浮动。


<html><head><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"text/css">.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;}.box3{width: 200px;height: 200px;background-color: green;}style>head><body><div class&＃61;"box1">div><div class&＃61;"box2">div><div class&＃61;"box3">div>body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnEUce5l-1587614559418)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/5红黄绿.jpg)]

这三个块元素是垂直排列的块元素&＃xff0c;如果我们想要将它们改变成水平排列的话应该怎么办呢&＃xff1f;

首先我们想到上面的display:inline-block可以&＃xff0c;可是有小问题&＃xff01;&＃xff01;&＃xff1f;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vuBiYpR-1587614559420)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/6红黄绿2.jpg)]

因为我们的代码&＃xff1a;

<div class&＃61;"box1">div>
<div class&＃61;"box2">div>
<div class&＃61;"box3">div>

这三个块元素设置了display:inline-block后因为之间存在换行&＃xff0c;所以三个行内块元素之间存在间隙&＃xff0c;如果想要消除间隙&＃xff0c;必须把代码写在同一行中&＃xff0c;但这样写代码会让人头大。。那还有没有其他方法呢&＃xff1f;&＃xff1f;我们说&＃xff0c;块元素在文档流中的特点是独占一行&＃xff0c;但如果不在文档流中呢&＃xff1f;&＃xff1f;&＃xff1f;这也许能解决我们的问题。。

  • 那怎么脱离文档流呢&＃xff1f;使用float来是元素浮动&＃xff0c;从而脱离文档流。

float属性

float属性指定一个盒子&＃xff08;元素&＃xff09;是否应该浮动。可能的值&＃xff1a;

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动&＃xff0c;并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。

  • 当为一个元素设置浮动以后&＃xff08;float属性是一个非none的值&＃xff09;元素会立即脱离文档流。
  • 元素脱离文档流以后&＃xff0c;它下面的元素会立即向上移动。
  • 元素浮动以后&＃xff0c;会尽量向页面左上或者右上漂浮。
  • 浮动界限&＃xff1a;
    • 直到遇到父元素的边框&＃xff08;子元素浮不出父元素&＃xff09;。
    • 遇到其他的浮动元素。
    • 浮动元素上面是一个没有浮动的块元素&＃xff0c;浮动元素不会超过块元素。
    • 浮动的元素不会超过他的上面兄弟元素&＃xff0c;最多最多一边齐。

设置float后&＃xff1a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bm8D764R-1587614559422)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/7红黄绿3.jpg)]

float特点


  1. 浮动的元素不会盖住文字&＃xff0c;文字会自动环绕在浮动元素的周围&＃xff0c;我们可以通过浮动来设置文字环绕图片的效果。下图是设置给上面浅绿色小方框设置浮动前后对比&＃xff0c;我们可以看到&＃xff0c;文字并没有被覆盖。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RmF84n6w-1587614559423)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/8不会盖住文字.gif)]

  2. 块元素脱离文档流后&＃xff0c;高度和宽度被内容撑开。内联元素脱离文档流后会变成块元素。简单说来&＃xff0c;脱离文档流后不用区分内联元素和块元素了&＃xff0c;或者全都是块元素了。下图是只设置了高度的块元素&＃xff0c;由于在文档流中&＃xff0c;未设置的宽度被指定为了父元素的100%&＃xff0c;而设置了浮动以后&＃xff0c;原来的块被内容撑开&＃xff0c;此时内容为空&＃xff0c;则原来的块浮动后消失了。uX7Tuifc-1587614559425)(/Users/mac/Desktop/MarkDown /HTML、CSS&＃xff08;六&＃xff09;/9特点2.gif)]

好了这次笔记内容就这么多&＃xff0c;这两次的笔记基本上把盒模型说了下&＃xff0c;之后会再继续学习下布局。

之前的

CSS最重要的东西你掌握了么&＃xff1f;&＃xff1f;&＃xff1f;盒子模型你明白么&＃xff01;&＃xff01;快来学习&＃xff01;&＃xff01;HTML、CSS&＃xff08;五&＃xff09;
CSS尺寸与文本讲解。HTML、CSS笔记&＃xff08;四&＃xff09;。


推荐阅读
author-avatar
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有