CSS片段
程序员文章站
2022-05-19 09:05:51
...
1.优先级
内联 > ID选择器 # > 类选择器 . > 标签选择器
2.三角形
CSS绘制三角形—border法
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
div {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
div {
width: 0px;
height: 0px;
border: 100px solid;
border-color: transparent transparent red;
}
3.水平居中
css3 利用dispaly:flex
CSS水平居中+垂直居中+水平/垂直居中的方法总结
<style type="text/css">
div {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
div {
display: flex;
flex-direction: row;
justify-content: center;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
div {
margin: 0 auto;
text-align: center;
}
4.垂直居中
5.BFC
深入理解BFC
Block Formatting Context 块级上下文格式化
作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离
触发条件
满足下列条件之一就可触发BFC
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
作用
【1】可以阻止元素被浮动元素覆盖
【2】可以包含浮动元素
【3】相邻两个块级子元素分属于不同的BFC时可以阻止margin重叠
上一篇： MYSQL基础入门_MySQL