关于css布局，居中问题和一些小技巧

时间：2023-03-30 22:12:29 CSS

CSS两种经典布局左右布局一栏定宽，一栏自适应固定宽度

自适应

.left{width:200px;高度：600px；向左飘浮;显示：表格；文本对齐：居中；行高：600px；}.right{margin-left:210px;高度：600px；背景：黄色；文本对齐：居中；行高：600px；}使用绝对定位实现

.left{定位：绝对;左：0；宽度：200px；}.right{边距左：200px;}左中右布局使用绝对定位实现.left{width:200px;背景颜色：黄色的;位置：绝对；顶部：0；左：0；}.main{左边距：200px；右边距：300px；}.right{宽度：300px；背景颜色：橙色；位置：绝对；顶部：0；右：0；}利用浮动定位现实.left{width:300px;背景颜色：黄色；向左飘浮;}.right{宽度：200px；背景颜色：橙色；浮动：对；}.main{左边距：300px；margin-right:200px;}圣杯布局，两侧定宽，中间自适应Main左右.col{float:left;位置：相对的;}.container{填充：0200px0100px;}.left{左：-100px；宽度：100px；高度：100%；左边距：-100%；背景：红色；}.main{宽度：100%；高度：100%；}.right{右：-200px；宽度：200px；高度：100%；左边距：-200px；背景：黄色；}双飞翼布局LeftMainRight.col{float:left;}.main{宽度：100%；高度：100%；}.main_inner{边距：0200px0100px；}.left{宽度：100px；高度：100%；左边距：-100%；背景：红色；}.right{高度：100%；宽度：200px；左边距：-200px；背景：黄色；内联元素（inline）的CSS居中问题水平居中：text-align:center;

kaka

div{text-align:center}对于块级元素（block）：1.为这个块级元素设置宽度2.margin:0auto;kaka.parent{width:1002px;}.child{width:50%;//也可以是固定像素margin:0auto;}垂直居中行高和高度使其居中，适用于只有一行文字kaka.parent{heig高度：1002px；行高：1002px；}不写父元素的高度（推荐写法）kaka.parent{padding:10px0;}水平和垂直都以已知的宽高居中，并给出负边距kaka.parent{位置：相对；}.child{位置：绝对；宽度：1002px；高度：828px；顶部：50%；左：50%；边距顶部：-414px；左边距：-501px；}未知宽度和高度，转换方案kaka。父母{位置：相对;}.child{位置：绝对；顶部：50%；左：50%；变换：翻译（-50%，-50%）；}弹性布局kaka.parent{display:flex;justify-content:center;//让子元素水平居中对齐-items:center;//子元素垂直居中}一些CSS小技巧，请写一个“姓名”和“联系方式”两端对齐的例子姓名联系方式span{line-height:20px;font-size:20px;height:20px;overflow:hidden;}span::after{content:'';display:inline-block;width:100%;}文本内容太长怎么变成省略号?1一行文本太长，只需要对div做如下操作：div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}2多行文字超出，如：第二行后省略：div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}如何让固定的div内文字的高度垂直居中?1.首先determinethelineheight2.然后用padding补齐高度。这种写法的好处是在加减文字的过程中不会出现bug。例子：一个高度为40px的div，里面的文字垂直居中div{line-height:20px;padding:10px0;}使元素大1.2倍transform:scale(1.2);动画Transition效果转场：全部0.3s；

上一篇：代码质量管理——如何写出优雅的代码

下一篇：从零手写一步步实现承诺

关于css布局，居中问题和一些小技巧相关文章