一个三角形引发的前端问题
我们如何使用css画一个三角形是今天的问题,然后我们可以得到一系列的问题!
css画出三角形
先画一个正方形,然后将中间部分设为0px,然后隐藏三个边框,剩下一个边框就是三角形,我我们来看一下这个过程。
如果内部不设为0px,我们看一下图形
#tri{
width: 50px;
height: 50px;
border: 100px solid #000;
border-color: blue red yellow black;
}
可以看到他默认的指定顺序是上 右 下 左
设为0px后
#tri{
width: 0;
height: 0;
border: 100px solid #000;
border-color: blue red yellow black;
}
将三个边框透明即可
#tri{
width: 0;
height: 0;
border: 100px solid #000;
border-color: blue transparent transparent transparent;
}
由于ie6不支持transparent,所以没有透明效果,就需要把border-style:solid
dashed dashed dashed
这个边框的颜色位置也就对应了三角形的方向
我们还可以用border-left这些来写
隐藏两边
#tri {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
改变隐藏的和显示的边框方向可以改变三角形的方向。
隐藏一边
#tri {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
margin和padding的区别
既然引出了这个边框的问题,我们就来看一下margin和padding的区别:
- margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)
- padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)
这个可以打开F12查看随便一个元素都可以得到,任何一个元素都有内外边框
BFC的理解?
BFC是“Block Formatting Context”的缩写,即块格式化上下文。它是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。通俗的讲,BFC是web页面中一块渲染区域(或者说是一种渲染环境),对于环境内的盒子,有某些特定的渲染规则。
再通俗的讲,就是我们可以为某一个盒子赋予BFC渲染环境,盒子内的子盒子在这个渲染环境中进行渲染。
如何构建BFC
- 根元素或包含根元素的元素
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块元素(元素的 display 为 inline-block)
- 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 strict 的元素
- 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
- 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
- column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
BFC特性
- 内部的Box(当然是块级盒子)会在垂直方向上沿边框一个接一个地放置;
- Box垂直方向上的margin由Box本身的margin决定,不是简单的两个相邻Box(同属同一个BFC中)的margin之和,而是取其中较大的那个margin,也就是所谓的Margin Collapse(margin重叠);
- BFC 内部 float box 不会和同级的BFC区域重叠;
- BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此;
- 计算BFC的高度时,浮动元素也参与计算;
案例一:
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
.container {
background-color: red;
/* create BFC box */
overflow: hidden;
text-align: center;
}
p {
background-color: lightgreen;
margin: 10px 0;
}
margin出现了一个重叠的效果
案例二:避免marigin重叠
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
.container {
background-color: red;
/* create BFC box */
overflow: hidden;
text-align: center;
}
p {
background-color: lightgreen;
margin: 10px 0;
}
.newBFC {
overflow: hidden;
}
这样利用BFC就不会出现重叠现象了
通过BFC来包含浮动
一个BFC可以包含浮动。很多时候我们会碰到这种情况,一个容器里有浮动元素。由于这个原因,容器元素没有高度(常被理解为元素浮动导致父容器坍塌),它的浮动孩子将会脱离页面的常规流。我们通常使用清除浮动来解决这个问题,最受欢迎的方法是使用一个clearfix的伪类元素。但我们同样可以通过定义一个BFC来达到这个目的。
案例一:浮动脱离父元素的包裹
<div class="container">
<div class="box"></div>
</div>
.container {
padding: 10px;
background-color: green;
}
.box {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: lightgreen;
float: left;
}
案例二:利用BFC包含
上面子元素因为浮动脱离了父元素的包裹,为了使得父元素能够将子元素进行包裹,我们将父元素设置成BFC即可(利用的是特性里的第五条):
.container {
overflow: hidden;//添加的这句
padding: 10px;
background-color: green;
}
.box {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: lightgreen;
float: left;
}