考核题目深度解析

最新推荐文章于 2024-07-25 15:44:34 发布

iife goes on

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量116

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/liyi67/article/details/121717719

版权

##考核题目深度解析

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
选中指定的子元素中第几个某类型的元素

选择器的权重

千位：如果是内联样式，记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将后面的空格也显示

iife goes on

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
考核题目深度解析

##考核题目深度解析1写出一个三角形实现方法：设置一个盒子，将盒子的长宽设置为0，然后给盒子设置一个边框的厚度，颜色，最后将你想要边框的方向保留其他的颜色改为transparent(透明)实现原理:因为将宽高设置为0，就可以将四周的边框积聚到一个点，从而形成四个三角形，最后将其他的盒子的颜色设置为透明就可以打印一个三角形实现代码<body> <div class="triangle"></div></body><style type
复制链接

扫一扫