首页    技术博客    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;。


推荐阅读
  • web

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • web

    解决IE678伪类不兼容问题的方法

    本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • default

    Android 新闻App的本地服务器搭建教程

    本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • default

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • web

    南邮ctf-web的writeup

    本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • config

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • less

    Webpack5内置处理图片资源的配置方法

    Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • less

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • 数组

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • process

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • process

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • process

    XML介绍与使用的概述及标签规则

    XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • default

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • default

    Python瓦片图下载、合并、绘图、标记的代码示例

    Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]
  • web

    ASP.NET2.0数据教程之十四：使用FormView的模板

    ASP.NET2.0数据教程之十四：使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观，与GridView和DetailsView不同，FormView使用模板来呈现，可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
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社区 版权所有