块级元素和行内元素的区别
- 块级元素独占一行，行内元素在同一行显示
- 块级元素默认宽度为100%，行内元素默认宽度有内容撑开
- 块级元素可以设置宽高，行内元素设置宽高不生效
- 块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右
- 布局时，块级元素可以包含块级元素和行内元素，行内元素一般不要包含块级元素
- 块级动画可以播放动画，行内不可以
display
display: ;
- 属性值
block 块级元素
inline 行内元素
inline-block 行内块，即在同一行显示，又可以设置宽高和margin padding的四周
行内块：img input button等 //行内块会识别代码之间的空白
none 不显示，隐藏自己 隐藏后原位置不保留
flex 弹性盒模型 伸缩盒模型
table 表格
table-cell 单元格
设置属性后原位置不保留
- 块级元素默认宽度为100% 设置这些属性后，默认宽度变为由内容撑开
1. float:left|right
2. position:absolute;
3. position:fixed;
4. display:none;
隐藏的区别
display:none; 隐藏自己，隐藏后原位置不保留
display:block; 解除隐藏
visibility:hidden; 隐藏自己，隐藏后原位置保留
visibility:visible; 解除隐藏
opacity:0; 隐藏自己隐藏后原位置保留
0绝对透明 1不透明 改变数值解除隐藏
overflow:hidden; 溢出部分隐藏
改变属性值，解除隐藏
visible 默认值，内容直接溢出
auto 自动，如果内容溢出，显示滚动条，如果内容不溢出，不显示滚动条
scroll 不管是否溢出都显示滚动条
例： overflow: visible; 解除隐藏
BFC
- 块级格式化上下文
- 独立的一块，子元素布局不会对容器产生影响
开启BFC格式的属性：
1）float:left|right;
2）position:absolute|fixed;
3）display:flex|table-cell|inline-block;
4）overflow:; 除了visible
居中问题
1.元素内容水平居中
text-align:center;
2.块级元素水平居中
margin:0 auto;
3.一行文字垂直居中
行高等于高
4.多行内容垂直居中
padding:20px 0;（写在容器上）
5.子元素在父元素中水平垂直居中
1.弹性盒法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: green;
}
</style>
2.margin计算法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin-top: 150px;
margin-left: 150px;
}
</style>
3.padding计算
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
padding-top: 150px;
padding-left: 150px;
box-sizing: border-box;
}
.child{
width: 200px;
height: 200px;
background-color: green;
}
</style>
4.margin
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin: 150px auto;
}
</style>
5.绝对定位计算法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 150px;
left: 150px;
}
</style>
6.绝对定位
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
7. translate
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
多列
- 作用：把元素内容分成多列
- 属性：
column-count:;设置列的数量 取值number
column-gap:; 设置列之间的距离
column-rule:; 设置列之间的边框，取值同border
雪碧图
雪碧图是一项图片整合技术，把许多小图整合到一张大图上
优点：
①减少页面的http请求 ②减少图片的字节数 ③减少命名困扰
缺点：
①背景图片定位时移动比较麻烦 ②制作雪碧图比较麻烦
原理
background-image:url( );
background-position:;
自动换行
word-wrap: break-word;
超出部分隐藏
- 设置单行文字超出部分隐藏
overflow: hidden; /* 超出一行文字自动隐藏 */
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
white-space: nowrap; /*强制不换行*/
- 设置多行文字超出部分隐藏
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
//显示4行
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
