css怎么把横向菜单变纵向_CSS 布局模式 + 居中布局

2024-05-09 09:54:30

CSS 布局模式，有时简称为布局，是一种基于HTML元素盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。

正常流（Normal flow）

也被称为文档流

指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

通过使用其他布局技术，可以覆盖正常流，如：

弹性盒子布局（flexbox）
网格布局（grid）
浮动布局（float）

弹性盒子布局（flexbox）

Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。

要使用flexbox，你只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。

父元素称为容器，子元素称为项目

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

网格布局（Grid）

Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

示例www.ruanyifeng.com

浮动布局（float）

把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。

这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动(float)的元素周围环绕。

float属性可能有的四个值

.box { float: left;} //将元素浮动到左侧。
.box { float: lright;} //将元素浮动到右侧。
.box { float: none;} //默认值, 不浮动。
.box { float: inherit;} //继承父元素的浮动属性。

水平居中

inline 元素：text-align: center
block 元素：margin: auto
absolute 元素：left: 50%; + margin-left: 负值 (需要知道子元素的宽)
absolute 元素：left: 50%; + transform: translateX(-50%);
absolute 元素：right: 0; left: 0; + margin: auto;

水平 + 垂直居中

inline 元素：line-height 的值等于 height 的值
absolute 元素：left: 50%; top: 50%; margin-left: 负值; margin-top: 负值;(需要知道子元素的尺寸)
absolute 元素：transform: translate(-50%,-50%);
absolute 元素：top: 0; right: 0; bottom: 0; left: 0; + margin: auto;

css怎么把横向菜单变纵向_CSS 布局模式 + 居中布局相关推荐

css怎么把横向菜单变纵向_压力容器钢板力学性能试验，横向取样的规定放松了？...
本文依据以下文献整理:熊从贵, 何静, 陈送送. 压力容器常用钢板的横向与纵向力学性能差异[J].化工机械, 2020, 47(3). 生产压力容器用钢板的原料通常为钢锭或连铸坯. 钢锭缺陷较多,原料 ...
纵向表格_Excel如何把横向数据变纵向？教你一键快速实现
平时我们在使用Excel表格来整理数据信息时,我们可能会遇到这样的情况,就是在整理他人录入的表格数据内容的时候,往往会因为个人习惯的问题,将本应该是纵向排列的数据,录入成了横向的数据,而此时我们在收到 ...
聊聊CSS中的布局模式
聊聊CSS中的布局模式在大家的印象中,CSS非常的简单,在此我想再强调一下,虽然CSS简单,但并不代表容易.随着Web技术的发展飞快,CSS经过二十多年的发展,其变化也是非常的大.CSS涵盖的技术点 ...
按钮自动居中布局_CSS布局技巧
css实现左右布局和居中布局显示是前端进行页面设计的基础,也是全面了解并学习css一个很好的切入点,因为其中会涉及到对许多css基础点的认知.实现css入门,理解左右布局的实现方式是必经之路,同时也能 ...
html如何把纵向垂直菜单变成横向,css横向菜单
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: 首页产品介绍服务介绍技术支持立刻购买联系我们第二步:隐藏li的默认样式因为看起来不是很好看,菜单通常都不需要 ...
如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页产品介绍服 ...
html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航
本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作:菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单. 由上图我们可以 ...
CSS制作简单的横向菜单
1.先写一个列表,建立菜单的结构 <span style="font-size:14px;"><span style="font-size:14px;& ...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...

最新文章

热门文章