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

CSS的布局 Day03

一、显示模式:

网页中HTML的标签多种多样,具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块,利用CSS布局使内容脱离文本流,使用定位或弹性布局让每块内容摆放在想摆放的位置,让网站页面布局更合理、有条理。

1.1 标签分类

1.1.1 块状元素(block-level)

通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
独占一行且自由设定

块级元素的特点:

(1)总是从新行开始【独占一行】

(2)高度,行高、外边距以及内边距都可以控制。【可以自由设定】

(3)宽度默认是容器的100% 【即可来源于父级】

(4)可以容纳内联元素和其他块元素

1.1.2 行内元素 (又叫内联元素inline)

一行共存多个;默认尺寸由内容撑开;加宽高生效

行内元素(内联元素inline)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。 常见的行内元素有

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,
其中<span>标签最典型的行内元素。

行内元素的特点:

一行共存多个;默认尺寸由内容撑开;加宽高生效

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

【不可自由赋值宽高】

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊)

1.1.3 行内块状元素(inline-block)

宽高属性生效;宽高默认由内容撑开

在内联元素中有几个特殊的标签

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

可以对它们设置宽高和对齐属性,称它们为内联块状元素。 内联块状元素的特点:

(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。

有间隙

(2)默认宽度就是它本身内容的宽度。

(3)高度,行高、外边距以及内边距都可以控制。

宽高属性生效;宽高默认由内容撑开

 1.1.4 转换display

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。

三者是可以互相转换的,使用display属性能够将三者任意转换:

(1)display:inline;转换为行内元素  

(2)display:block;转换为块状元素  

(3)display:inline-block;转换为行内块状元素

例如:

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

div{display:inline;}
......
<div>我要变成内联元素</div>

 

单行文字垂直居中的代码


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

http://www.lryc.cn/news/192945.html

相关文章:

  • nodejs+vue+elementui养老院老年人服务系统er809
  • antd表格宽度超出屏幕,列宽自适应失效
  • 布局--QT Designer
  • 2024第八届杭州国际智慧城市博览会:建筑与智能,智慧与未来
  • Text-to-SQL小白入门(八)RLAIF论文:AI代替人类反馈的强化学习
  • C语言联合体和枚举
  • Ubuntu 上传项目到 GitHub
  • CSS 复杂卡片/导航栏特效运用目录
  • QT: 一种精确定时器类的实现与使用
  • SQLite4Unity3d安卓 在手机上创建sqlite失败解决
  • 跨站请求伪造:揭秘攻击与防御
  • matlab 图像均值滤波
  • P1433 吃奶酪
  • c++string类的赋值问题
  • 服务器中了mkp勒索病毒怎么办?mkp勒索病毒特点,解密数据恢复
  • 深入探析网络代理与网络安全
  • 如何开始使用 Kubernetes RBAC
  • 8.简易无线通信
  • 渗透测试漏洞挖掘技巧
  • Nginx - 反向代理与负载均衡
  • Linux网络编程系列之UDP组播
  • 设计模式~状态模式(state)-23
  • linux环境下使用lighthouse与selenium
  • NeuroImage | 右侧颞上回在语义规则学习中的作用:来自强化学习模型的证据
  • uni-app编程checkbox-group获取选中的每个checkbox的value值
  • 数组——螺旋矩阵II
  • 反范式化设计
  • CCF CSP认证 历年题目自练Day31
  • PCL点云处理之从两片点云中获取具有匹配关系的同名点对 (二百一十八)
  • MySQL Row size too large (> 8126)