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>

相关文章
|
9月前
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
119 1
|
8月前
|
前端开发 安全
CSS的元素显示模式
CSS的元素显示模式
|
1月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
1月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
10月前
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
652 0
|
10月前
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
45 0
|
1月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 容器
CSS:元素显示模式与背景
CSS:元素显示模式与背景
33 0