css布局【实用】

时间：2023-04-02 20:54:58 HTML

布局img在div中居中

div{width:150px;高度：100px；显示：表格单元格；垂直对齐：中间；文本对齐：居中；border:1pxsolid#000;}img{width:50px;高度：50px;

/div>

.banner{宽度：800px；高度：200px；保证金：0自动；背景:#0c5460;}.box{宽度:800px;边距：0auto}.box.xxx{display:flex;弹性包装：包装；边距：0-3px;}.xxxdiv{宽度：calc(25%-6px);高度：80px；背景：#b1dfbb；margin:3px;}banner只截取布局的一半左右/*下面注释的都是关键点*/.bigBox::after{/*清除浮动[关键点]*/content:'';显示：块；清除：两者；}.box1{宽度：50%；背景：淡绿色；/*【重点】*/float:left;}.box2{width:50%;背景：浅绿松石；/*【Key】*/float:left;box1

box2

leftmiddleRightlayout[flex]固定宽度，中间自适应两种版本，所有自适应宽度都可以写成flex:1;（数值可自行调整）。-颜色：#b1dfbb；/*[关键点]*/width:300px;/*如果这个是平分的话可以改成flex:1;*/}.center{背景颜色：黄绿色；/*[关键点]*/flex:1;}.right{background-color:#b1dfbb;/*[关键点]*/width:300px;/*如果平分这可以更改为flex:1;*/>左中心右Horizo??ntallycentered.box{width:200px;高度：200px；背景：海蓝宝石；/*[关键点]*/margin:0auto;box下面的效果都一样下面的效果都一样下面的效果都一样的效果都是一样的水平和垂直居中【翻译】.box{width:200px;高度：200px；背景：palevioletred;/*[key]*/position:relative;}.boxspan{background:aquamarine;宽度：100px；高度：150px；/*[key]*/position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);123水平垂直居中【负边距】*{padding:0;边距：0;}.box{宽度：200px;高度：200px；背景：淡紫色；/*[关键点]*/position:relative;}.boxspan{background:aquamarine;宽度：100px;高度：150px；/*【重点】*/position:absolute;顶部：50%；左：50%；边距顶部：-75px；margin-left:-50px;123水平、垂直居中【flexBox】.box{width:200px;高度：200px；背景：淡紫色；/*【重点】*/display:flex;证明内容：居中；align-items:center;}.boxspan{背景：海蓝宝石；宽度：100px；高度：150px;123

上一篇：scoped属性与样式渗透

下一篇：纯CSS让网站免费拥有暗黑模式切换功能

css布局【实用】相关文章