当前位置: 首页 > news >正文

css的元素表现

块级元素和行内元素的表现:

块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行。

块级元素可以设置宽高。

行内元素:行内元素不能设置宽高,它的宽度是由内容撑开的。但是当将元素设置为块级元素之后就可以设置宽高了。

特别说明:

      当给元素添加position:absolute或者设置float的时候,就可以设置宽高了。这是因为:position和float会隐式的改变display类型,不论之前是什么类型的元素,只要设置了上面两个中的任意一个,都会让元素以display:block的方式显示,并获取block的一些特性:可以设置宽高,但是默认宽度并不占满父元素。

那么这里引申一些display、position和float之间关系的内容:

浏览器会为每个html元素生成矩形盒子,矩形盒子按照可见版式模型在页面上排布,可见的页面版式主要有position、display、float三个属性控制:

position属性控制页面上元素之间的位置关系
display属性控制元素是堆叠、并排还是根本不在页面上出现
float属性提供控制的方式,以便把元素组成多栏布局

他们之间的关系如下:

  1. 如果'display'值为'none',那么'position'和'float'不会生效。此时,元素不生成盒子
  2. 否则,如果'position'值为'absolute'或者'fixed',盒是绝对定位的,并且'float'的计算值为'none'。那么display就根据下表来设置,盒的位置将由'top','right','bottom'和'left'属性和盒的包含块决定
  3. 否则,如果'float'值不为'none',那么盒是浮动的,'display'根据下表来设置
  4. 否则,如果该元素是根元素,'display'根据下表来设置,但指定值'list-item'应该变成计算值'block'还是'list-item',在CSS 2.1中是未定义的
  5. 否则,其它'display'属性值(计算值)就用指定值

转载于:https://www.cnblogs.com/shineLh/p/6806003.html

相关文章:

  • js 正则表达式 判断车牌号
  • Spring7:基于注解的Spring MVC(下篇)
  • js常见知识点2.面向对象相关
  • 20145328《网络对抗》网络欺诈技术防范
  • 09-01 Java final,多态,抽象类,接口
  • 仅作记录,游标,级联删除,获取所有该外键的表名
  • Unity引擎GUI之Image
  • 实体框架(Entity Framework)简介
  • CEF之CefSettings设置日志等级
  • 数据库管理和应用
  • 2017第19周一
  • 关于jsp和html页面中的三种弹出框
  • 【前端页面优化】改善你的jQuery的25个步骤 千倍级效率提升
  • 大型网站架构技术一览
  • freebsd配置国内源
  • Android 控件背景颜色处理
  • es的写入过程
  • node学习系列之简单文件上传
  • orm2 中文文档 3.1 模型属性
  • PaddlePaddle-GitHub的正确打开姿势
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • vue学习系列(二)vue-cli
  • 当SetTimeout遇到了字符串
  • 马上搞懂 GeoJSON
  • 目录与文件属性:编写ls
  • 普通函数和构造函数的区别
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 删除表内多余的重复数据
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 系统认识JavaScript正则表达式
  • 小而合理的前端理论:rscss和rsjs
  • 学习HTTP相关知识笔记
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • $(selector).each()和$.each()的区别
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (转) Face-Resources
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • (转载)Linux 多线程条件变量同步
  • *Django中的Ajax 纯js的书写样式1
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .NET : 在VS2008中计算代码度量值
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .net core 连接数据库,通过数据库生成Modell
  • .net Stream篇(六)
  • .net 受管制代码
  • .NET建议使用的大小写命名原则
  • .NET企业级应用架构设计系列之开场白
  • .Net转前端开发-启航篇,如何定制博客园主题
  • @Autowired @Resource @Qualifier的区别
  • [CareerCup] 13.1 Print Last K Lines 打印最后K行
  • [FFmpeg学习]从视频中获取图片