CSS字体样式值,前端开发基础学习

元素特点:

块状元素

  • 在页面中以矩形区域显示。
  • 自上而下排列,独占一行
  • 可以直接添加宽高
  • 一般情况下,作为其他元素或内容的容器

行内元素

  • 在页面中最小单位也是矩形。
  • 在一行内逐个排列。
  • 不可以直接添加宽高,大小是由内容撑开的。
  • 内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom margin-top/bottom)
  • 内联元素在一行内排列的时候,之间有间距

行内快元素

  • 可以设置宽高。
  • 默认情况下,在一行内逐个显示,之间有间距。
  • 当前元素的display值为inline-block时,能支持vertical-align属性。
常用元素:

块状元素:

标签作用
div最常用的块级元素
dl和dt-dd 搭配使用的块级元素
form交互表单
h1 -h6标题
hr水平分隔线
ol有序列表
p段落
ul无序列表
li列表标签
fieldset表单字段集
c
戳这里领取完整开源项目:【一线大厂前端面试题解析+核心总结学习笔记+Web真实项目实战+最新讲解视频】

olgroup-co|表单列分组元素
|table-tr-td|表格及行-单元格

行内元素:

标签作用
a超链接(锚点)
b粗体
br换行
i斜体
em强调
img图片
input输入框
label表单标签
span常用内联容器,定义文本内区块
strong粗体强调
sub下标
sup上标
textarea多行文本输入框
u下划线
select项目选择

行内块元素:

标签作用
input表单标签
img图片标签
元素类型转换:

display属性
作用:检索或者设置元素生成的盒模型类型。

常用属性值

  • display:block;
    作用:将元素转成块状元素,拥有块状元素特点。
    补充:大部分块状元素,默认的display的值都是block;

  • display:inline;
    作用:将元素转成内联元素,拥有内联元素的特点。
    补充:大部分内联元素,默认的display的值inline;

  • display:none;
    作用:将当前隐藏,并不占据空间。

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

  • 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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

相关文章

OWASP Top 10 网络安全10大漏洞——A01:2021-访问控制中断

10大Web应用程序安全风险 2021年top10中有三个新类别、四个类别的命名和范围变化,以及一些合并。 A01:2021-访问控制中断 从第五位上升到top1,94%的应用程序都经过了某种形式的访问控制破坏测试,平均发生率为 3.81%且在贡献的…

flutter弹窗输入,Android学习的三个终极问题及学习路线规划

题库非常全面包括: Android基础知识: 基本涵盖Android所有知识体系,四大组件,Fragment,WebView,事件分发,View绘制…Java基础知识&高阶知识点: 基础部分不谈了,高阶部分:泛型,反射&#xff…

蓝桥杯刷题(一)

一、 import os import sys def dps(s):dp [0] * len(s)dp[0] ord(s[0]) - 96if len(s) 1:return dp[-1]dp[1] max(ord(s[0]) - 96, ord(s[1]) - 96)for i in range(2, len(s)):dp[i] max(dp[i - 1], dp[i - 2] (ord(s[i])) - 96)return dp[-1] s input() print(dps(s))…

【SpringBoot3.x教程 01】SpringBoot简介及工程搭建

前言:什么是SpringBoot? SpringBoot是一个开源的Java基础框架,它被设计来简化Spring应用的初始搭建以及开发过程。这个框架利用了“约定优于配置”的理念,提供了一系列大型项目中常用的默认配置,让开发者可以快速启动和…

stm32学习笔记:I2C通信外设原理(未完)

软件实现和硬件实现 串口通信为异步时序,用软件实现很麻烦,基本上用硬件实现 而I2C协议通信为同步时序,软件实现简单且灵活,硬件实现比较麻烦,故软件比较常用 但I2C硬件实现功能比较大,执行效率高&#xff…

【数据分享】1984~2020年中国长时间序列逐年人造夜间灯光数据集

各位同学们好,今天和大伙儿分享的是1984~2020年中国长时间序列逐年人造夜间灯光数据集。如果大家有下载处理数据等方面的问题,您可以私信或评论。 张立贤, 任浙豪, 陈斌, 宫鹏, 付昊桓, 徐冰. (2021). 中国长时间序列逐年人造夜间灯光数据集(…

大数据开发-Hadoop分布式集群搭建

大数据开发-Hadoop分布式集群搭建 文章目录 大数据开发-Hadoop分布式集群搭建环境准备Hadoop配置启动Hadoop集群Hadoop客户端节点Hadoop客户端节点 环境准备 JDK1.8Hadoop3.X三台服务器 主节点需要启动namenode、secondary namenode、resource manager三个进程 从节点需要启动…

42岁前TVB女星近况曝光,曾因山头靠不住被雪藏兼生意失败

自从2021年前TVB高层余咏珊倒台离巢后,大批「余派」被雪藏,随即跟着走人,今年42岁的「元老级是非精」梁嘉琪就是其中之一。 梁嘉琪在离巢后就重新签约有线做回老本行主持节目,去年3月又与森美、小仪主持商台903节目《早霸王》&…

Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(二)

Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(前导) Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(一) Zynq—AD9238数据采集DDR3缓存千兆以太网发送实验(三) 五、实验目的 本次实验使用电脑上的…

动态规划(算法竞赛、蓝桥杯)--背包DP求具体方案

1、B站视频链接&#xff1a;E20 背包DP 求具体方案_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N1010; int v[N],w[N]; int f[N][N],p[N][N];int main(){int n,m;cin>>n>>m;for(int i1;i<n;i)cin>>v[i]>>w[i…

mybatis的xml文件如何配置能被识别

为了让MyBatis能够识别和使用XML Mapper文件&#xff0c;你需要确保这些文件被正确放置和配置。下面是确保MyBatis XML Mapper文件被识别的步骤&#xff1a; 1. 正确放置XML Mapper文件 通常&#xff0c;XML Mapper文件应该放在src/main/resources目录下。为了更好的组织这些…

基于SSM的农业信息管理系统的设计与实现(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的农业信息管理系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

字节跳动热门的前端开源项目

字节跳动开源官网 Arco Dsign Arco Design 是一套设计系统&#xff0c;主要服务于字节跳动旗下中后台产品的体验设计和技术实现。它的目标在于帮助设计师与开发者解放双手、提升工作效率&#xff0c;并高质量地打造符合业务规范的中后台应用。它拥有系统的设计规范和资源&…

运维知识点-hibernate引擎-HQL

HQL有两个主要含义&#xff0c;分别是&#xff1a; HQL&#xff08;Hibernate Query Language&#xff09;是Hibernate查询语言的缩写&#xff0c;它是一种面向对象的查询语言&#xff0c;类似于SQL&#xff0c;但不是去对表和列进行操作&#xff0c;而是面向对象和它们的属性…

ArmSoM Rockchip系列产品 通用教程 之 UART 使用

1. UART 简介​ Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准&#xff0c;完整模块支持以下功能&#xff1a; 支持5、6、7、8 bits数据位。支持1、1.5、2 bits停止位。支持奇校验和偶校验&#xff0c;不支持mark校验和space校验。支持接…

Yolov8有效涨点,添加多种注意力机制,修改损失函数提高目标检测准确率

目录 简介 CBAM注意力机制原理及代码实现 原理 代码实现 GAM注意力机制 原理 代码实现 修改损失函数 YAML文件 完整代码 &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; http://t.csdnimg.c…

Mol2文件处理-拆分、合并、提取名称、计数与格式转换

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、Mol2文件合并二、Mol2文件拆分为含有单个分子的文件三、Mol2文件分子名称修改与提取3.1 分子名称修改去除空格3.2 文件名称提取 四、Mol2文件包含分子计数4.1 Mol2文件中分子计数4.2 分子计数传…

Python——与Matlab对应的Python版本

参考资料&#xff1a; Python——与Matlab对应的Python版本

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近&#xff0c;我在 Python 潮流周刊 中分享了一个超级火爆的项目&#xff0c;这还不到一个月&#xff0c;它在 Github 上已经拿下了 8K star 的亮眼成绩&#xff0c;可见其受欢迎程度极高&#xff01;国内还未见有更多消息&#xff0c;我趁着周末把一篇官方博客翻译出来了&a…

请说明Vue中的解耦能力

Vue中的解耦能力是指在Vue框架中&#xff0c;我们能够有效地将代码分离成独立的组件或模块&#xff0c;使得这些组件之间的依赖关系减少&#xff0c;实现高内聚、低耦合的设计目标。利用Vue中的组件化开发&#xff0c;可以让不同的模块之间更容易地通信和协作&#xff0c;提高代…