CSS基础知识(display和visibility、overflow、文档流)

9、显示与隐藏

u  display属性:

(1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局。

(2)inline:默认值。将元素[显示]为内联元素     (与HTML元素本身无关系)

(3)block:将元素[显示]为块极元素              (与HTML元素本身无关系)

(4)inline-block:将元素显示为行内块级元素

即 设置宽度和高度有效(符合块级元素);可以水平排列即不会独占一行(符合内联元素)

 

u  visibility属性:

(1)visible:默认值

(2)hidden:隐藏元素,占有页面的空间位置

 

10、内容溢出(overflow)

内容溢出:当文本内容过多时,可能显示会超出当前元素的区域

解决 ---overflow属性:

(1) visible 默认值,表示不处理

(2) hidden 将溢出部分的内容进行隐藏,溢出的文本内容无法查看

(3) scroll 将溢出部分的内容隐藏,提供了滚动条,且滚动条效果始终都显示

(4) auto (最好方式) 自动: 当内容溢出时,提供滚动条;当内容没有溢出时,不提供滚动条

11、文档流

概念:垂直方向从上到下的顺序排列(分成一行一行),水平方向从左到右的顺序排列

【默认情况下,排列的顺序不能改变】

u 块级元素(每个元素独占一行):

在文档流中自上向下排列(垂直方向排列);

在文档流中默认的宽度是父元素100%;且默认的高度是所有子元素的高度总和

u 内联元素(每个元素不会独占一行):

在文档流中自左向右水平排列(水平方向排列);

宽度和高度都由内容确定

注: 如果在一行中不能容纳所有的元素,则会换到下一行,继续自左向右排列。

【元素离开文档流而存在,分别是 浮动、绝对定位、固定定位】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最受欢迎的Java环境

该职位将是即将发布的系列文章中的第一篇。 我们从所使用的环境开始:如果您感兴趣的是最受欢迎的JVM供应商或JVM版本,那么32bit是比64bit更流行的体系结构,还是Windows 8比Windows XP更流行的体系结构-这些都将在我们的文章中介绍。 在下一个…

使用宏实现透视表部分功能,将AB列数据合并统计.

功能:1.筛选B列;2.将A列中的值按照筛选后的结果进行合计. 这个特殊点是按照月日进行筛选的. Sub count_a() Dim sh As Worksheet Set sh ActiveSheet Range("C2:D" & [D65536].End(3).Row).Clear For line_b 2 To [B65536].End(3).Row If Len(Cells(line_b, &q…

HTML基础知识(常见元素、列表、链接元素、图片元素)

1、HTML有关概念 全称: Hyper Text Markup Language&#xff08;超文本标记语言&#xff09; 其文件扩展名为“.html”或“.htm” * 超文本 - 在普通的文本基础上&#xff0c;添加超链接、图片、音频或视频等 * 标记 - 标记就是HTML中的标签(元素)&#xff0c;特点:<a> …

权限和ACL练习题

1、在/testdir/dir里创建的新文件自动属于g1组&#xff0c;组 g2的成员如&#xff1a;alice能对这些新文件有读写权限&#xff0c;组g3 的成员如&#xff1a;tom只能对新文件有读权限&#xff0c;其它用户&#xff08;不 属于g1,g2,g3&#xff09;不能访问这个文件夹。 前期准备…

CSS3的过渡和转换

CSS3的过渡和转换 1.过渡 什么是过渡呢&#xff1f;过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性&#xff1a; 属性 描述csstransition简写属性&#xff0c;用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称…

JavaEE概念简介

这篇文章旨在澄清J2EE范例中使用的首字母缩写词和概念。 J2EE代表Java to Platform&#xff0c;Entreprise Edition。 它使创建模块化Java应用程序成为可能&#xff0c;并将其部署在应用程序服务器上。 它依赖于Java SE&#xff0c;Java SE是一组Java库的核心&#xff0c;所有J…

js php 数据类型判断,【js基础】变量类型判断

类型判断方法比较&#xff1a;如果需要想详细了解&#xff0c;请看下文:注&#xff1a;原封不动复制备份&#xff0c;防止删帖在JavaScript中&#xff0c;有5种基本数据类型和1种复杂数据类型&#xff0c;基本数据类型有&#xff1a;Undefined, Null, Boolean, Number和String&…

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西&#xff0c;突有兴致&#xff0c;想在里面嵌套一个微信网页版。 好了&#xff0c;想法一出来&#xff0c;就行动吧&#xff0c;最终效果…

标准模板库(STL)学习指南之set集合

set是关联容器。其键值就是实值&#xff0c;实值就是键值&#xff0c;不可以有重复&#xff0c;所以我们不能通过set的迭代器来改变set的元素的值&#xff0c;set拥有和list相同的特性&#xff1a;当对他进行插入和删除操作的时候&#xff0c;操作之前的迭代器依然有效。当然删…

CSS布局技巧之——各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时&#xff0c;有时一个属性就能搞定&#xff0c;有时则需要一定的技巧才能兼容到所有浏览器&#xff0c;本文就居中的一些常用方法做个简单的介绍。 注&#xff1a;本文所讲方法除了特别说明外&#xff0c;都是兼容…

OpenJPA:内存泄漏案例研究

本文将提供完整的根本原因分析详细信息以及解决影响Oracle Weblogic Server 10.0生产环境的Java堆内存泄漏&#xff08;Apache OpenJPA泄漏&#xff09;的方法。 这篇文章还将演示在管理javax.persistence.EntityManagerFactory生命周期时遵循Java Persistence API最佳实践的重…

以A表中的值快速更新B表中记录的方法

1、问题描述 有两张表&#xff0c;A表记录了某些实体的新属性&#xff0c;B表记录了每个实体的旧属性&#xff0c;现在打算用A中的属性值去更新B中相同实体的旧属性&#xff0c;如下图所示&#xff1a; 类似这样的需求&#xff0c;怎样做比较高效呢&#xff1f; 2、制作模拟数…

JAXB教程–入门

注意&#xff1a;请查看我们的Java XML绑定JAXB教程– ULTIMATE指南 什么是JAXB&#xff1f; JAXB代表用于XML绑定的Java体系结构。它用于将XML转换为java对象&#xff0c;并将java对象转换为XML。JAXB定义了一个用于在XML文档中读写Java对象的API。与SAX和DOM不同&#xff0c…

《Kubernetes权威指南第2版》学习(二)一个简单的例子

1&#xff1a; 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso&#xff0c; 安装centOS7,具体过程可以百度。 2&#xff1a;开启centOS的SSH&#xff0c; 步骤如下&#xff1a; &#xff08;1&#xff09; yum list installed | grep openssh-server查看是否已经安装了SS…

linux 安装ftp下载,LINUX FTP安装与配置

转载了一篇配置vsftpd服务器的文章&#xff0c;经过自己的配置&#xff0c;终于搞定了&#xff01;1.安装vsftpdXml代码 yum install vsftpd2.启动/重启/关闭vsftpd服务器Xml代码 [rootlocalhost ftp]# /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vs…

使用Hibernate批量获取

如果需要从Java处理大型数据库结果集&#xff0c;则可以选择JDBC&#xff0c;以提供所需的低级控制。 另一方面&#xff0c;如果您已在应用程序中使用ORM&#xff0c;则回退到JDBC可能意味着额外的麻烦。 在域模型中导航时&#xff0c;您将失去乐观锁定&#xff0c;缓存&#x…

前端经典面试题 不经典不要star!

前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HAHA&#xff0c;前提我并不是一个变态,欺负人的面试官.只是我希望看看对…

Web前端开发学习误区,你掉进去了没?

从接触网站开发以来到现在&#xff0c;已经有五个年头了吧&#xff0c;今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时&#xff0c;勾起了在这网站开发道路上的一串串回忆&#xff0c;成功与喜悦、烦恼与纠结都历历在目&#xff0c;感慨颇多。 先从大家学…

spring mvc的工作原理

该文转载自&#xff1a;http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题&#xff0c;为什么我使用Intellij来支持另一个IDE&#xff08;在本例中为Eclipse&#xff09;。 大多数时候&#xff0c;我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…