1.float 浮动
浮动元素的顶部,在标准文档流的底部
- 对div2进行浮动:浮动元素的顶部,在标准文档流的底部
- 对div3和div3进行浮动:浮动元素会显示在同一行,依次排列
- 对div2、div3和div4进行浮动:如果宽度不够,被浮动的元素会自动换行
- 对div2、div4进行浮动:浮动元素的顶部,在标准文档流的底部
2.position 定位
relative 相对定位:相对原来位置,偏移一定距离
absolute 绝对定位:相对于position不为static的父元素,偏移一定距离
父相子绝:父元素relative,子元素absolute
fixed 固定定位:相对浏览器定位
static 没有定位:
3.flex布局
父元素属性
-
flex-direction 调整主轴方向
row 行排布 row-reverse 同一行反向排布 column 列排布 column-reverse 同一列反向排布
-
justify-content 主轴子元素排列
flex-start 从头部排列 flex-end 从尾部排列 center 居中排列 space-around 平分剩余 space-between 两边贴边,平分剩余
-
align-items 侧轴方向,子元素的排列
flex-start 从上到下 flex-end 从下到上 stretch 拉伸(子元素去掉高度) center 居中
-
flex-wrap属性 子元素是否换行
wrap 换行 nowrap 不换行
-
flex-flow 属性: 复合属性,flex-direction和flex-wrap
flex-flow:row-wrap
-
align-content属性 子元素整体,在父元素中的对齐方式
flex-start 侧轴头部排列 flex-end 侧轴尾部排列 center 居中排列 space-around 侧轴平分空间 space-between 两侧贴边,平分剩余空间
子元素属性
-
flex属性 份数
flex:1
-
align-self属性 自己的对齐方式
stretch 拉伸 center 居中 start 左对齐 end 右对齐
-
order属性 排序
4.grid布局
-
grid-template-columns属性 :设置列宽
.grid{ display:grid; grid-template-columns:1fr 1fr 1fr; #各占三分之一 column-gap:24px; #列间距 row-gap:24px; #行间距 }
-
justify-items 水平方向上对齐子元素
center 居中对齐 end 靠右对齐 space-between 两端对齐
-
justify-content 对轨道水平方向对齐
center 居中对齐 end 靠右对齐 space-between 两端对齐
-
align-content 对轨道竖直进行对齐
center 居中对齐 end 靠下对齐
html文件
<div class="container">
<header></header>
<sidebar></sidebar>
<content></content>
<footer></footer>
</div>
css
.container {
width: 300px;
height: 400px;
/* border: 1px solid #000; */
display: grid;
/* 设置列宽和行高 */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
/*间隔*/
grid-row-gap: 10px;
grid-column-gap: 10px;
/* 进行位置排布 */
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content content"
"footer footer footer"
;
}
/*给子元素起名字*/
header {
grid-area: header;
background: #ef757f;
}
sidebar {
grid-area: sidebar;
background: #ffc65f;
}
content {
grid-area: content;
background: #70cfff;
}
footer {
grid-area: footer;
background: #73db91;
}