设置三角形
div{
width:0px;
height:0px;
border:20px solid transparent;
border-top:20px solid red;
}
设置定位里面的层级
z-index:1;//数值越大,优先级越高
设置父盒子里子盒子的居中显示
.box {
width:500px;
height:500px;
background:yellow;
margin:0 auto;
position:relative;
}
.child{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
定位与浮动的区别
float:半脱离,文字环绕
absolute:全脱离,不环绕
锚点:
<a></a>不仅可以实现网页之间的跳转,也可以实现本页面不同区域跳转
<a href = "#锚点名字"> </a>
<div id = "锚点名字"> <div>
精灵图
用background-position实现背景图片的定位需求,减少服务器的工作量,一次上传一张照片就行了。
宽高高度自适应:
宽度高度不写,或者写auto,就是宽度高度自适应。
或者设置min-height或者max-height.
浮动元素高度的自适应:
法一:overflow:hidden(缺点:会隐藏溢出元素)
法二:在浮动元素下添加空快元素并添加声明
(clear:both;height:0;overflow:hidden;)缺点(不利于代码可读性,降低浏览器性能)
法三:万能清除浮动法
伪元素:
div::first-letter{
font-size:30px;
color:red;
}
div::first-before{
content:""
font-size:30px;
color:red;
}
盒子更具窗口大小进行改变:
html,body{height:100%;
}