首页 > 编程语言 >黑马程序员前端-CSS的显示模式

黑马程序员前端-CSS的显示模式

时间:2023-01-28 21:39:45浏览次数:41  
标签:显示 行内 标签 元素 模式 程序员 黑马 CSS


前端学习笔记教程不定期更新中,传送门:

  • ​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​
  • ​​黑马程序员前端-CSS入门总结​​
  • ​​黑马程序员前端-CSS之emmet语法​​
  • ​​黑马程序员前端-CSS的复合选择器​​

上一期的CSS入门笔记没有更新完,继续更新中…

今天继续学习CSS相关的内容。

CSS的显示模式学习内容 目录

​​1、什么是元素的显示模式​​

​​2、元素显示模式的分类​​

​​2.1 块元素​​

​​2.2 行内元素​​

​​2.3 行内块元素​​

​​2.4 元素显示模式总结​​

​​3、元素显示模式的转换​​

​​4、单行文字垂直居中的代码​​


1、什么是元素的显示模式

定义:元素显示模式就是元素(标签)以什么方式进行显示,比如

自己占一行,比如一行可以放多个。
作用:
​ 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

2、元素显示模式的分类

2.1块元素

常见的块元素
​​​<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>​​​ ​
标签是最典型的块元素。
块级元素的特点

  • 比较霸道,自己独占一行。
  • 高度,宽度、外边距以及内边距都可以控制。
  • 宽度默认是容器(父级宽度)的100%。
  • 是一个容器及盒子,里面可以放行内或者块级元素。

注意:
​ 文字类的元素内不能放块级元素
​​​<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div> 同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素​

2.2行内元素

常见的行内元素:
​​​<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>​​​ ​ 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:

  • 相邻行内元素在一行上,一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。

注意: 链接里面不能再放链接。特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全

2.3 行内块元素

常见的行内块标签:

<img />、<input />、<td>

行内块元素的特点

  • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
  • 一行可以显示多个(行内元素特点)。
  • 默认宽度就是它本身内容的宽度(行内元素特点)。
  • 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

2.4元素显示模式总结

黑马程序员前端-CSS的显示模式_html

学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。

3、元素显示模式的转换

简单理解:
​ 一个模式的元素需要另外一种模式的特性 ​ 比如想要增加链接 的触发范围。

转换方式:

  • - 转换为块元素:display:block;
  • - 转换为行内元素:display:inline;
  • - 转换为行内块:display: inline-block;

4、单行文字垂直居中的代码

解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中。

黑马程序员前端-CSS的显示模式_css3_02

黑马程序员前端-CSS的显示模式_css_03

简单理解:

行高的上空隙和下空隙把文字挤到中间了

如果行高小于盒子高度,文字会偏上,

如果行高大于盒子高度,则文字偏下。



标签:显示,行内,标签,元素,模式,程序员,黑马,CSS
From: https://blog.51cto.com/u_8238263/6025135

相关文章

  • 黑马程序员前端-CSS的复合选择器
    前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端专栏css入门总结​​​​CSS之emmet语法​​上一期的CSS入......
  • 黑马程序员前端-CSS之emmet语法
    前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端专栏css入门总结​​上一期的CSS入门笔记没有更新完,最后一......
  • 提高程序员工作效率的工具合集windows+ios
    提示:集合各种程序员必备工具,望学习收藏~文章目录​​前言​​​​一、Markdowm​​​​1:菜单栏​​​​2:文件​​​​3:编辑​​​​4:段落​​​​5:格式​​​​6:视图​​​......
  • Java程序员必看:Solr vip竞价排名
    功能介绍本文将使用solr完成vip等级排名,这里并不是简单的按照vip等级排序。而是在使用solr条件查询(不使用排序)的时候将符合条件并且具有vip等级的数据显示在前面,这个时候......
  • 微盟员工删库跑路,同是程序员你有哪些反思?
    近期互联网的大事件无外乎微盟员工删库,造成了微盟巨大的损失。那么,同是程序员的你,是否想过删库怎么办呢?如何应对这种情况呢?删库之后主要的还是看如何还原,之前是否有备份,今天......
  • 怎么从菜鸟程序员变成架构师
    怎么从菜鸟程序员变成架构师一、正确理解架构师的工作架构师一般是不会去探讨业务的范畴,他是把整个项目的结构搭出来,并让程序员去填肉(业务功能部分),一般架构师的好坏决定......
  • 推荐这5个很牛的开源项目,程序员直呼内行
    大家伙们年过了哈,该收拾收拾心情上班了。不知道大家有没有这种感觉,年纪越大,越觉得年过得快。感觉好像才刚开始,马上初五了,初六送完穷鬼,初七送自己出来上班了(没有哭)。不过......
  • CSS
    CSS <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><style>h1{color:royalblue;}</style>......
  • 一个非科班出身的程序员成长之路
    看了很多程序员的成长之路。我也把我经历写出来,一供想走向程序员这条路的朋友做个参考。对程序员的第一个认识,我记得好像是在1998年。那年我正读高三,看到一篇文章,介绍是......
  • 程序员开什么车?
    程序员开什么车比较多?程序员这个群体的特征非常明显,他们大多很聪明,但是给人的感觉又是不谦逊,还向往个人主义。他们大多懒惰(体力劳动),也许是因为程序员已经习惯了脑力劳动!他......