一、使用css实现小箭头,将宽高置为0,只有border时,正方形被分为4份,因为border是上右下左,所以以x将正方形分为4份,便会实现小箭头
<style type="text/css">
.array {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #e3e3e3;
width: 0;
height: 0;
}
</style>
</head>
<body>
<div class="array"></div>
</body>
二、高度已知,左中右三栏布局,左300px,右300px,中自适应
1、通过浮动:左float:left,右float:right,兼容性比较好
<section class="layout1">
<div class="layout1-left">left</div>
<div class="layout1-right">right</div>
<div class="layout1-content">
center
</div>
</section>
.layout1 .layout1-left {
width: 300px;
background: red;
float: left;
}
.layout1 .layout1-right {
width: 300px;
background: blue;
float: right;
}
.layout1 .layout1-content {
background: yellow;
}
2、通过定位:父为相对定位,子为绝对定位,
<section class="layout2">
<div class="layout2-left">left</div>
<div class="layout2-content">content</div>
<div class="layout2-right">right</div>
</section>
.layout2 {
position: relative;
}
.layout2-left {
position: absolute;
left: 0;
width: 300px;
}
.layout2-right {
position: absolute;
right: 0;
width: 300px;
}
.layout2-content {
position: absolute;
left: 300px;
right: 300px;
}
3、flex定位:父为display:flex,左右各300px,中间flex:1,自适应
<section class="layout3">
<style type="text/css">
.layout3 {
display: flex;
}
.layout3-left {
width: 300px;
background: red;
}
.layout3-center {
flex: 1;
background: blue;
}
.layout3-right {
width: 300px;
background: yellow;
}
</style>
<div class="layout3-left">left</div>
<div class="layout3-center">center</div>
<div class="layout3-right">right</div>
</section>
4、table定位,父display:table、宽为100%,子display:table-cell
<section class="layout4">
<style type="text/css">
.layout4 {
width: 100%;
display: table;
}
.layout4-left {
display: table-cell;
width: 300px;
background: red
}
.layout4-center {
display: table-cell;
background: blue
}
.layout4-right {
display: table-cell;
width: 300px;
background: yellow
}
</style>
<div class="layout4-left">left</div>
<div class="layout4-center">center</div>
<div class="layout4-right">right</div>
</section>
5、网格布局:父为display:grid,设置三列
<section class="layout5">
<style type="text/css">
.layout5 {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
}
</style>
<div class="layout5-left">left</div>
<div class="layout5-center">center</div>
<div class="layout5-right">right</div>
</section>
当高度不知时,flex和table的左右两栏会自动增加,而其他不会
三、css盒模型:margin、border、padding、content
1、标准模型:宽为content的宽;IE模型:宽为border+padding+content的宽
2、设置模型:box-sizing:content-box(标准模型);box-sizing:border-box(IE模型)
3、js获取盒模型的高
(1).style.height:只能得到内联样式中的高,且为字符“300px”;.offsetHeight:能得到内联样式和样式表的高,为整形300,包括边框、内边距和横向滚动轴的高度
(2)clientHeight:可视区域padding+height-横向滚动轴高度
(3)scrollHeight:滚动框拉直的高度
4、BFC全称Block Formatting Context块级格式化上下文,BFC中的元素是独立的、布局不受外部的影响
(1)如何触发:float除none以外的值,绝对定位元素position(absolute、fixed)、display为inline-block,table-cess,flex、overflow不为visiable的值
(2)应用清除浮动:左右两栏布局时,作为float:left,当右边元素溢出时,会占用左边的位置,当右边元素设置overflow:hidden时,便不会占用
<!-- bfc子元素即使是float也会参与高度计算 -->
<section class="bfc">
<style type="text/css">
.bfc {
background: red;
overflow: auto; /*当不加时,父元素高为0,加了参与高度计算*/
}
.left {
float: left;
font-size: 32px;
}
</style>
<div class="left">我是浮动元素</div>
</section>