##考核题目深度解析
1写出一个三角形
实现方法：设置一个盒子，将盒子的长宽设置为0，然后给盒子设置一个边框的厚度，颜色，最后将你想要边框的方向保留其他的颜色改为transparent(透明)
实现原理:因为将宽高设置为0，就可以将四周的边框积聚到一个点，从而形成四个三角形，最后将其他的盒子的颜色设置为透明就可以打印一个三角形
实现代码
<body>
<div class="triangle"></div>
</body>
<style type="text/css">
.triangle {
height: 100px;
width: 100px;
background-color: #ABCDEF;
border-top: 50px solid green;
border-left: 50px solid blue;
border-right: 50px solid black;
border-bottom: 50px solid red;
}
</style>
###2学过的选择器及其权重
####学过的选择器
ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
5. 属性选择器
6. 伪类选择器
选中某些元素的某种状态
1）link: 超链接未访问时的状态
2）visited: 超链接访问过后的状态
3）hover: 鼠标悬停状态
4）active：激活状态，鼠标按下状态
7. 伪元素选择器
before
after
####更多的伪元素
- first-child
选择第一个子元素
first-of-type，选中子元素中第一个指定类型的元素 - last-child
- nth-child
选中指定的第几个子元素
even：关键字，等同于2n
odd: 关键字，等同于2n+1 - nth-of-type
选中指定的子元素中第几个某类型的元素
更多的伪元素选择器
- first-letter
选中元素中的第一个字母 - first-line
选中元素中第一行的文字 - selection
选中被用户框选的文字
选择器的权重
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
每位的进制是256
3居中方式
垂直居中:height=line-height
水平居中：text—align:center
div居中：让盒子绝对定位设置上下左右都为0 然会是设置margin等于auto
##解决高度坍塌问题
为父元素设置一个样式如下
.clearfix::after {
content: "";
display: block;
clear: both;
}
高度坍塌的原因；
在常规流中盒子的高是由类容撑起来的，因为浮动元素会完全脱离常规流盒子，所以常规流检查不到自己里面的浮动导致没有高度。
解决方法分析，设置一个伪元素选择器after，在盒子的最后生成一个空白盒子，清楚前面的浮动，是高度不在坍塌
4三栏布局(两边固定，中间自适应)
定位法
.contecontainer{
position: relative;
width: auto;
height: 500px;
}
.left{
position: absolute;
width: 200px;
height: 500px;
background-color: blue;
left: 0;
}
.right{
position: absolute;
width: 200px;
height: 500px;
background-color: brown;
right: 0;
}
.center{
margin-left: 200px;
margin-right: 200px;
background-color: darkgoldenrod;
/* width:100%; */
height: 500px;
text-align:center;
}
2浮动法
<style>
body,
html,
.container {
height: 100%;
padding: 0;
margin: 0;
}
/*左边栏左浮动*/
.left {
float: left;
height: 100%;
width: 200px;
background: pink;
}
/*中间栏自适应*/
.main {
height: 100%;
margin: 0 200px;
background: skyblue;
}
/*右边栏右浮动*/
.right {
float: right;
height: 100%;
width: 200px;
background: pink;
}
</style>
解决图片白边问题
解决方法
1 将img的display属性改为block
2 将img中设置font-size 0
问题原因
img是一个行盒,不会独占一行，会发生空白折叠
行盒在页面中不换行、块盒独占一行,所以img将后面的空格也显示