补充:a:hover+div——div是a的下一个元素用+
轮廓线
input{
outline-style
outline-width
outline-color
}
连写:outline:none——去轮廓线
浮动
float
一个元素浮动起来,会不再占有原来的位置——脱离文档流
同时发生浮动的盒子会在同一行进行排列
浮动造成的高度塌陷
父盒子+overflow:hidden
p {
clear: right; (right更靠近p标签)
}
<div class="banner">
<div class="left"></div>
<div class="right"></div>
<p>我是不想漂浮的文字</p>
或clear:both
盒子模型
padding——内边距(影响盒子大小)
margin——外边距(不影响盒子大小)
盒子大小由border+ padding+content决定
box-sizing:border-box——避免padding和margin将盒子撑大
外边距
margin-top——元素的上外边距
margin-bottom——元素的下外边距
margin-left——元素的左外边距
margin-right——元素的右外边距
margin:20px——上下左右外边距全为20px
margin:20px 30px——上下外边距为20px,左右外边距为30px
margin:10px 30px 20px——上外边距为10px,左右外边距为30px,下外边距为20px
margin:10px 20px 30px 40px——上左右下(顺时针)
auto
margin:0px auto——水平居中(添加了浮动的盒子不能进行水平居中)
——auto只能用于左右且为块元素,必须有宽高
内边距
overflow:auto——内容溢出,则提供滚动条
外边距塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 1200px;
height: 800px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
}
.son1 {
background-color: aquamarine;
margin-top: 200px;
}
.son2 {
background-color: black;
margin-bottom: 20px;
margin-top: 20px;
}
.son3 {
background-color: brown;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son"></div>
<div class="son2 son"></div>
<div class="son3 son"></div>
</div>
</body>
</html>
son1的margin-top被父盒子抢占
解决方式:给父盒子加边框border
加padding(padding=0px,无效)
加overflow:hidden
元素默认的内外边距消除
*{
padding:0;
margin:0;
}
弹性盒子
display
display:block(转换为块元素)
display:inline(转换为行内元素)
display:inline-block(转换为行内块元素)
display:none(元素不会被显示)
flex-direction
row(默认值)——轴为水平方向,起点在左端
row-reverse——轴为水平方向,起点在右端
column——轴为垂直方向,起点在上沿
column-reserve——轴为垂直方向,起点在下沿
flex-wrap
nowrap(默认值)——不换行
wrap——换行
justify-content(确定好主轴)
flex-start(默认值)——左对齐
flex-end——右对齐
center——居中
space-around——平分剩余空间
space-between——先两边贴边,再平分剩余空间
align-items
flex-start——从上到下
flex-end——从下到上
center——挤在一起居中
stretch(默认值)——拉伸
baseline——项目的第一行文字的基线对齐
align-content
flex-start(默认值)——在侧轴头部开始排列
flex-end——在侧轴尾部开始排列
center——在侧轴中间显示
space-around——子项在侧轴平分剩余空间
space-between——子项在侧轴先分布在两头,再平分剩余空间
stretch——设置子项元素高
grid布局
容器(container)——有容器属性
项目(items)——有项目属性
行(row)
列(column)
间距(gap) ——单元格之间的距离
区域(area)—— 自己划分每个单元格占据的区域
内容(content)
grid-template-columns——设置每一列的宽度,可以是具体值,也可以是百分比
grid-template-rows——设置每一行的宽度,可以是具体值,也可以是百分比
fr(fraction):为了方便表示比例关系,网格布局提供了fr关键字
grid-column-gap——表示行之间的距离
grid-row-gap——表示列间的距离
grid-gap——前两个的缩写
row-gap:20px; column-gap:30px;缩写:gap:20px 30px;