考核题目深度解析

##考核题目深度解析

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

####更多的伪元素

  1. first-child
    选择第一个子元素
    first-of-type,选中子元素中第一个指定类型的元素
  2. last-child
  3. nth-child
    选中指定的第几个子元素
    even:关键字,等同于2n
    odd: 关键字,等同于2n+1
  4. nth-of-type
    选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

  1. first-letter
    选中元素中的第一个字母
  2. first-line
    选中元素中第一行的文字
  3. selection
    选中被用户框选的文字

选择器的权重

  1. 千位:如果是内联样式,记1,否则记0
  2. 百位:等于选择器中所有id选择器的数量
  3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
  4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量
    每位的进制是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将后面的空格也显示

上一篇:前端的学习之路:初级CSS---相对定位


下一篇:jQuery