CSS布局汇总

最新推荐文章于 2022-04-21 10:39:03 发布
最新推荐文章于 2022-04-21 10:39:03 发布
阅读量240 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihaoen666/article/details/77867283
版权
这篇博客详细总结了CSS布局的各种方法，包括水平布局如float、absolute定位等，水平居中布局如margin auto、text-align center，垂直居中布局如absolute、line-height结合vertical-align，以及水平垂直居中布局的多种实现方式。涵盖了从基础到进阶的布局技巧。
摘要由CSDN通过智能技术生成

水平布局


float等宽固定布局（float+width）


这里写图片描述


float流式布局（float+width+margin-left）


这里写图片描述



float自适应布局（float+width+margin-right+display）


这里写图片描述



左浮动+右侧定宽（float+width+margin-left）


最低0.47元/天 解锁文章
TimChen666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS】calc()方法及水平垂直居中的方法
webxuj的博客
07-18 1557
5）、表达式中有“*”和“/”时，其前后可以没有空格，但建议保留。4）、表达式中有“+”和“-”时，其前后必须有空格。1）、使用“+”、“-”、“*”和“/”运算。2）、可以使用百分比、px、em、rem等单位运算。3）、可以混合使用各种单位进行运算。...
CSS各种居中布局方法汇总
09-24
在CSS布局中，居中对齐是一项常见的需求，无论是在网页设计还是移动应用开发中，居中布局都有着广泛的应用。本文将详细介绍几种常用的CSS居中布局方法，包括水平居中、垂直居中以及水平和垂直同时居中的实现方式。 ...
CSS中absolute定位时left，right，top，bottom不起作用
xw1193195009的博客
04-21 2715
CSS中absolute定位时left，right，top，bottom不起作用 今天在写样式的时候发现盒子内部使用absolute定位时，left：30%不起作用，经多次实验发现，原因是上层盒子定位问题，将上层盒子的定位改为relative即可。 ...
解决CSS的position:absolute中left效果
weixin_33845881的博客
08-09 353
有时候css中设置了position:absolute，left:100px，但是如果我们不想要这个left怎么办呢，当然你直接删除就可以，但是如果是框架的css，你直接删除就有问题了，这时候该怎么办呢？解决办法很简单，你只要再定义一个class然后设置 left:auto就可以，是不是很简单，你现在就可以试试！！！...
position理解、margin-left与left的区分
风一样的少年
08-24 1万+
在W3C中，如是说： position 可能的取值： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的
No.10 position定位 之 absolute绝对定位
lzh131464的博客
12-29 628
在css中，使用position（定位），它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素、甚至是浏览器窗口本身的位置。 本篇介绍：absolute（绝对定位） 概念 ： 绝对定位的元素，选取最近的已定位祖先元素，相对它的位置进行定位。 格式语法： css选择器 {position：absolute; left（这里指偏移属性，即top、left等属性）: 值 ;} 特性、图解： 1.使元素完全脱离文档流。 2.使内联元素支持宽高。 3.使块元素默认宽根据内容决定。
HTML CSS单词汇总
08-05
HTML/CSS布局和样式 * Align：使成一线、使结盟、排整齐，用于定义元素的对齐方式。 * Area：地区、区域、范围、面积、平地，用于定义元素的面积和范围。 * Aside：在旁边、在一边、到旁边、到一边，用于定义元素的...
CSS Grid布局教程之网格单元格布局
12-13
前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家...
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
vertical-align 实现水平垂直居中
qq_40248943的博客
12-05 692
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
Html定位 absolute，relative，fixed 与 left，top，width %，height % 的关系
dabusidede的博客
09-03 778
absolute绝对定位 absolute会使元素脱离文档流，不占据文档空间（即可以压住其它元素上面），absolute的位置相对于最近的有定位的父元素（即使用的left，top等都是相对于最近的有定位的父元素），如果没有则相对于 body，width和height也是相对最近的有定位的父元素，如下示例 <div style="width: 480px; height: 300px; position: fixed;"> <!-- w-100 h-100 表示宽度高度 100% -
position:absolute后设置left:50%发生的有趣小事
infanter的博客
06-16 3457
今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高 ②一个内联元素设置position:absolute会自动转为一个块状元素 那么我提出三个问题: problem01:一个没有设置宽高的块状元素position:absolute,top:0;lef
position
qq_28923283的博客
05-13 587
position：absolute这个是绝对定位； 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如： 当1固定了位置。1的样式
position:absolute详解
热门推荐
xiaobing_hope的专栏
12-13 11万+
position：absolute日常开发中经常涉及元素的定位，我们都知道，绝对定位相对于最近position不为static的父级元素来定位，但其中定位的位置还是有细微的差别的。绝对定位根据left和top属性来规定绝对定位元素的位置。 但这个位置实际上与padding和父级相对定位的box-sizing有关的。* 默认盒子的box-sizing为content-box（即盒子所占据的宽度=wi
直接写position：absolute，后面不加top和left等值，是什么意思？分两种情况
cherry_vicent的专栏
12-06 9020
用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。 这就要用到Position属性等。 Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位， 即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定
CSS深入理解之absolute
muzi187的博客
01-11 5282
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之absolute absolute 一、absolute与float 鲜为人知的兄弟关系，相同的特性表现： 包裹性 absolute的包裹性 .box { padding: 10px; background-color: #f0f0f0; } input { positio
absolute同时设置left，right,top,bottom
sinat_32290679的博客
08-28 3364
absolute同时设置left，right,top,bottom遵循以下原则如果top和bottom一同存在的话，那么只有top生效。如果left和right一同存在的话，那么只有left生效。
CSS绝对定位(absolute)同时设定left right,或者top bottom
一刀的博客
02-18 1129
<!DOCTYPE html> <html> <head> <title>document</title> <style> .container{ width:100px; height:100px; position:relative; } .inner-box{ background:#000;
div+css浏览器兼容问题及CSS技巧汇总
本文档深入探讨了在开发div+css网页时遇到的浏览器兼容性问题及其解决策略，特别关注于IE7、6以及Firefox的兼容性处理。随着Web2.0的发展，推荐采用XHTML格式编写代码，因为它是W3C标准，使用DOCTYPE声明有助于确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值