盒子模型讲解后继，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;
解决问题&＃xff1a;将一个内联元素变成块元素&＃xff1a;
通过display样式可以修改元素的类型。可选值:
值描述
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 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact&＃xff0c;不过由于缺乏广泛支持&＃xff0c;已经从 CSS2.1 中删除。
marker CSS 中有值 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将内联元素转化为块元素了。
 
display:none与visibility:hidden区别
 
我们上面说了&＃xff0c;display:none会隐藏元素&＃xff0c;使元素不会在网页中显示&＃xff0c;并且不会占据位置。先看下display:none&＃xff0c;我们在加入了dispaly:none后刷新页面是这个效果&＃xff1a;
 
再说visibility&＃xff0c;visibility属性指定一个元素是否是可见的。提示:即使不可见的元素也会占据页面上的空间。可能的值&＃xff1a;
 
值 描述
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时&＃xff0c;此值可删除一行或一列&＃xff0c;但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上&＃xff0c;会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。
我们主要说visibility:hidden&＃xff0c;同样上面的情况&＃xff0c;我们来看下使用visibility:hidden再刷新页面的效果&＃xff1a;
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>
 
子元素默认是存在于父元素内容区中的&＃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;但是还是要说一下的。
块元素
 
块元素在文档流中会独占一行&＃xff0c;块元素会自上向下排列。
块元素在文档流中&＃xff0c;默认宽度是父元素的100%。
块元素在文档流中&＃xff0c;默认高度被内容撑开&＃xff0c;子元素多高它就多高。
 
内联元素
 
内联元素在文档流中只占自身的大小&＃xff0c;会默认从左向右排列&＃xff0c;如果一行中不足以容纳所有的内联元素&＃xff0c;则会换到下一行。
内联元素在文档流中&＃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>
 
这三个块元素是垂直排列的块元素&＃xff0c;如果我们想要将它们改变成水平排列的话应该怎么办呢&＃xff1f;
首先我们想到上面的display:inline-block可以&＃xff0c;可是有小问题&＃xff01;&＃xff01;&＃xff1f;
因为我们的代码&＃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;
float特点
 
 浮动的元素不会盖住文字&＃xff0c;文字会自动环绕在浮动元素的周围&＃xff0c;我们可以通过浮动来设置文字环绕图片的效果。下图是设置给上面浅绿色小方框设置浮动前后对比&＃xff0c;我们可以看到&＃xff0c;文字并没有被覆盖。
 
 
 块元素脱离文档流后&＃xff0c;高度和宽度被内容撑开。内联元素脱离文档流后会变成块元素。简单说来&＃xff0c;脱离文档流后不用区分内联元素和块元素了&＃xff0c;或者全都是块元素了。下图是只设置了高度的块元素&＃xff0c;由于在文档流中&＃xff0c;未设置的宽度被指定为了父元素的100%&＃xff0c;而设置了浮动以后&＃xff0c;原来的块被内容撑开&＃xff0c;此时内容为空&＃xff0c;则原来的块浮动后消失了。
 
 好了这次笔记内容就这么多&＃xff0c;这两次的笔记基本上把盒模型说了下&＃xff0c;之后会再继续学习下布局。
之前的 CSS最重要的东西你掌握了么&＃xff1f;&＃xff1f;&＃xff1f;盒子模型你明白么&＃xff01;&＃xff01;快来学习&＃xff01;&＃xff01;HTML、CSS&＃xff08;五&＃xff09;
 CSS尺寸与文本讲解。HTML、CSS笔记&＃xff08;四&＃xff09;。
        

        
        
    


    
        
                        overflow
                        html
                        css
                        char
                        utf-8
                        text
                        list
                        header
                        io
                    
    



    
        写下你的评论吧 !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
                                    
                
            
        

        
    

    
        推荐阅读
        
            
                                
                    
                        js
                        导航栏样式练习：项目实例解析
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 19:42:28
                    

                

                
                                
                    
                        js
                        分页插件3指定到某一页
                    

                    
                                                
                        前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 15:19:01
                    

                

                                
                    
                    
                
                
                                
                    
                        java
                        GWT PopupPanel onKeyDownPreview 方法详解与实例
                    

                    
                                                
                        本文详细介绍了 GWT 中 PopupPanel 类的 onKeyDownPreview 方法，提供了多个代码示例及应用场景，帮助开发者更好地理解和使用该方法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-28 10:07:27
                    

                

                
                                
                    
                        js
                        技术分享：从动态网站提取站点密钥的解决方案
                    

                    
                                                
                            
                        
                                                
                        本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-28 04:11:47
                    

                

                
                                
                    
                        js
                        深入理解Tornado模板系统
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 19:22:16
                    

                

                
                                
                    
                        default
                        java编写的简易计算器
                    

                    
                                                
                        主要用了2个类来实现的，话不多说，直接看运行结果，然后在奉上源代码1.Index.javaimportjava.awt.Color;im ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 18:18:10
                    

                

                
                                
                    
                        header
                        Python爬虫实战：豆瓣电影Top250数据抓取
                    

                    
                                                
                        本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 16:55:07
                    

                

                
                                
                    
                        default
                        深入解析ExpandableComposite.addExpansionListener()方法及其应用
                    

                    
                                                
                        本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法，并提供了多个实际代码示例，帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目，具有很高的参考价值。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 16:11:49
                    

                

                
                                
                    
                        default
                        UNP 第9章：主机名与地址转换
                    

                    
                                                
                            
                        
                                                
                        本章探讨了用于在主机名和数值地址之间进行转换的函数，如gethostbyname和gethostbyaddr。此外，还介绍了getservbyname和getservbyport函数，用于在服务器名和端口号之间进行转换。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-27 11:26:39
                    

                

                
                                
                    
                        text
                        如何高效创建和使用字体图标
                    

                    
                                                
                            
                        
                                                
                        在Web和移动开发中，为什么选择字体图标？主要原因是其卓越的性能，可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程，并提供了专业建议。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-26 20:48:44
                    

                

                
                                
                    
                        js
                        使用 NSTimer 实现倒计时功能
                    

                    
                                                
                        本文介绍如何使用 NSTimer 实现倒计时功能，详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器，确保在指定时间间隔内执行特定任务。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-26 19:08:19
                    

                

                
                                
                    
                        js
                        解析Java中Text.splitText()方法及其应用场景
                    

                    
                                                
                        本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法，通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点，并保持在文档树中。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-26 18:31:42
                    

                

                
                                
                    
                        php
                        使用Vultr云服务器和Namesilo域名搭建个人网站
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站，包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南，帮助读者顺利完成建站过程。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-26 16:36:34
                    

                

                
                                
                    
                        text
                        深入解析 SimpleDraweeView 的 setScaleType 方法及其实现
                    

                    
                                                
                        本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法，提供了多个实际代码示例，并解释了其在不同场景下的应用。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-26 12:15:47
                    

                

                
                                
                    
                        text
                        在Android中排列多行小部件 - Arranging Rows of Widgets in Android
                    

                    
                                                
                        本文介绍如何使用布局文件在Android应用中排列多行TextView和Button，使其占据屏幕的特定比例，并提供示例代码以帮助理解和实现。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-12-25 10:33:17
                    

                

                
                
                                
                    
                    
                    
                
                

            
        
    



















    

    
        
            
            
                
                
            

            
                            

            
                            


        
    

    
    

    
    

    
        Tags | 热门标签
        
            
                                
                    datetime
                
                                
                    replace
                
                                
                    utf-8
                
                                
                    testing
                
                                
                    javascript
                
                                
                    emoji
                
                                
                    java
                
                                
                    regex
                
                                
                    eval
                
                                
                    数组
                
                                
                    flutter
                
                                
                    php
                
                                
                    spring
                
                                
                    web
                
                                
                    text
                
                                
                    heatmap
                
                                
                    select
                
                                
                    header
                
                                
                    grid
                
                                
                    lua
                
                                
                    object
                
                                
                    node.js
                
                                
                    dagger
                
                                
                    php5
                
                                
                    default
                
                                
                    js
                
                                
                    controller
                
                                
                    heap
                
                                
                    dll
                
                                
                    hashcode
                
                                
            
        
    

    
    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1Wml的标准函数库_sqlserver
                
                                
                    2重学前端 28 # 通过四则运算的解释器快速理解编译原理
                
                                
                    3重大消息！WordPress修复了严重的Shortcode核心引擎漏洞
                
                                
                    4c语言新手一枚，实在是不清楚为什么这个程序会报错，有大神可以帮我开导一下吗{哭了}
                
                                
                    5sql.php: added class "tblFooters" to query table
                
                                
                    6相声界谱系图及师承关系一览
                
                                
                    7validation fails when combining load_from and required=True
                
                                
                    8Keras框架使用Vnet2d模型对遥感图像语义分割
                
                                
                    9php怎么编写用户表(php怎么编写用户表的数据)
                
                                
                    10开发笔记:class和style属性
                
                                
                    11js中screen对象获取浏览器宽度高度的用法
                
                                
                    12[pytorch source read][12]setup.py
                
                                
                    13webpack初探(一)
                
                                
                    14【嵌入式系统学习记录】小项目：停车场管理系统的体会
                
                                
                    15图像高斯化
                
                            
        
    
    
    



    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有