css显示转换模式

简介: css基础

<!DOCTYPEhtml>

<htmllang="en">


<head>

   <metacharset="UTF-8">

   <metahttp-equiv="X-UA-Compatible"content="IE=edge">

   <metaname="viewport"content="width=device-width, initial-scale=1.0">

   <title>显示模式的转换</title>

   <style>

       /* 特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性

       比如想要增加链接a的处罚范围 */

       /* 转换为块元素:display:block; */

       /* 装换为行内元素:display:inline; */

       /* 装换为行内块元素:display:inline-block; */

       

       a {

           width: 400px;

           height: 300px;

           background-color: red;

           /* 把行内元素转换为块级元素 */

           display: block;

           /* 把块级元素转换为行内元素 */

           display: inline;

           /* 把块级元素转换为行内块元素 */

           display: inline-block;

       }

   </style>

</head>


<body>

   <ahref="#">小小杨</a>

</body>


</html>

相关文章
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
281 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
293 1
|
前端开发 安全
CSS的元素显示模式
CSS的元素显示模式
156 0
|
前端开发
css显示模式
块级元素 独占一行 宽度默认是父级的100% 添加宽高属性生效 行内元素 尺寸由内容决定 添加宽高属性不生效 行内块元素 尺寸由内容决定 添加宽高属性生效
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
371 4
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
1608 0
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局