pink04-CSS-显示模式

已于 2023-03-01 20:09:44 修改
阅读量25 收藏
点赞数
分类专栏： 前端学习三大件 文章标签： css html css3
于 2023-02-27 15:55:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44025946/article/details/129242778
版权

元素显示模式

定义

元素以什么方式进行显示

类型

一般分为块元素和行元素
一行放一个的用块元素，一行药方好多个的用行元素

特点

块元素

在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

元素显示的模式转换

display: block:行内元素改成块级元素
diplay:inline: 块级元素改成行内元素
display: inline-block:转换成行内块元素

小工具

在这里插入图片描述

夏休灼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
04-CSS
qq_37973756的博客
03-08 220
CSS 第二天 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两
pink-css标签
weixin_46669844的博客
04-04 926
在style标签里由选择器{声明的样式}组成。 内嵌式，外链式，行内式。 <head> <style> p { color:red;键值对，：分割；结束 font-size: 12px; } </style> </h...
CSS基础-CSS显示模式 12
石虎
07-05 327
//联系人:石虎  QQ: 1224614774昵称:嗡嘛呢叭咪哄 Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 style> .header{ width: 980px; height: 100px; background: red;
前端基础-CSS-04
L的博客
11-05 167
内容涉及CSS布局的三种机制，浮动，浮动拓展，清除浮动，附有详细的案例源码以及效果展示。
前端学习019---CSS---元素显示模式
ketemstion的博客
10-03 51
元素显示模式 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 2.1 元素的显示模式 HTML元素一般分为 块元素 和 行内元素 两种类型。 2.2 块元素 <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head>
CSS（Pink-Teacher）笔记
qq_61368886的博客
10-20 486
CSS初级入门笔记
web基础篇-css
weixin_44803968的博客
06-28 970
【代码】web基础篇-css。
CSS基础-CSS显示模式
qq_16546829的博客
08-23 157
Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 &lt;style&gt; .header{ width: 980px; height: 100px; background: red; margin: auto; ma...
CSS入门--元素的显示模式
qq_45067479的博客
12-01 111
CSS入门–元素的显示模式 一.元素的显示模式分类：块元素，行内元素，行内块元素 二. （1）块元素： 常见的块元素有< h 1>-< h 6 >,< d i v>,< ul >,< li >,< ol>等 特点： 独占一行； 高度宽度，外边距和内边距可以控制； 宽度默认是容器的100%； 是一个盒子，里面可以放行元素或者块元素 p标签主要用来放文字，不可以放div； （2）行内元素： 常见的行内元素有：< a ><
Apink-LUV.mp4
04-20
Apink-LUV.mp4
pink老师htmlcss学习 - 学成在线案例
03-26
CSS允许我们定义颜色、字体、间距、布局以及元素的显示方式。通过学习`style.css`，你可以了解到如何编写选择器、属性和值，以及如何组织CSS代码以实现响应式设计，即让网页在不同设备和屏幕尺寸上都能良好展示。 ...
pink_html5-css3:bilibili学成在线
03-24
例如，使用媒体查询实现响应式设计，确保在不同设备上都能保持良好的显示效果；利用过渡和动画增强用户体验，如按钮点击效果、导航栏滑动切换等；还有利用Flexbox或Grid布局实现复杂且灵活的页面布局。 三、...
HTML-CSS-响应式网站
03-02
background-color: pink; } } ``` 这段代码使得当屏幕宽度小于或等于600px时，背景色变为浅蓝色，而大于600px时，背景色则变为粉红色。这使得我们可以针对手机、平板电脑和桌面电脑等不同设备定制界面。 除此...
【项目】pink老师-PC端静态页面项目实战-品优购.7z
01-13
在本项目"pink老师-PC端静态页面项目实战-品优购"中，作者通过实践应用CSS和HTML技术，构建了一个模拟的电商网站静态页面。这个项目旨在提升前端开发技能，特别是对于初学者来说，是一个很好的实践平台。下面将详细...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 633
仅对已定位的元素（）有效，默认值为0，可以为负值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1207
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 727
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1363
title>充电效果
黑马pink老师html css笔记
05-31
黑马程序员的Pink老师是一位非常优秀的前端讲师，他的HTML/CSS课程深受学生的喜爱。他的HTML/CSS笔记主要分为以下几个部分： 1. HTML基础部分：介绍HTML的基本概念、标签、元素、属性、语义化标签等知识点，并通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值