前端第一次考核总结

2301_80051592

已于 2024-03-14 17:39:30 修改

阅读量702

点赞数 21

文章标签：前端算法

于 2024-03-14 17:38:16 首次发布

本文链接：https://blog.csdn.net/2301_80051592/article/details/136635529

版权

本文详细介绍了HTML中的块级和行内元素，CSS中的定位类型（静态、绝对、相对、固定），消除浮动的方法，选择器的种类和优先级，以及如何创建BFC、实现元素居中、制作倒三角和网页布局模型。

摘要由CSDN通过智能技术生成

一，三种元素的概括

块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>；

行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<S>、<ins>、<u>、<span>；

空元素:<input>,<img>,<link>,<meta>,<br>,<hr>;

二，定位的种类及其特性

一，静态定位

1.按照标准流摆放，没有边偏移。

二，绝对定位

1.如果没有父级及以上元素或祖先元素没有定位，以浏览器为定位标准

2.如果祖先元素有定位，则以最近的有定位的祖先元素为参考点

3.绝对定位不占有原先位置

三，相对定位

1.相对于原来的位置移动

2.原来的位置继续占有，后面的元素以标准流对待（不脱标）

四，固定定位

1.以浏览器的可视窗口为参照点移动元素

2.跟父元素没有关系

3.不随滚动条滚动而移动

4.投标（特殊的绝对定位）

三，取消浮动的几种方法

1. 父级元素添加overflow，将其属性设置为hidden（常用），auto，scroll

2.：after 伪元素法

.clearfix:after{
content:"";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
/..照顾低版本浏览器../

3.:双伪元素清除浮动

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

四，选择器的种类及其优先级

选择器	选择器权重
继承或*	0 0 0 0
元素选择器，属性选择器	0 0 0 1
类，伪类选择器	0 0 1 0
id选择器	0 1 0 0
行内样式style=“”	1 0 0 0
！important	无穷

优先级注意点:
1.权重是有4组数字组成，但是不会有进位。
2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推.
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4.可以简单记忆法：通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100，行内样式表为
1000,!important无穷大.
5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

五，使网页中的标签消失的方法（js笼罩层，需要时再让他出现）

1.display:none;（将整个元素隐藏，并且不会占据任何的空间）

2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）

4.overflow:hidden将要隐藏的元素移除父元素的范围。

5.设置元素为透明：即opacity:0；

六，BFC是什么及其作用

即块级格式化上下文。它是W3C CSS2.1规范中的一个概念，用于布局块级盒子的独立渲染区域。
可以把BFC理解为一个封闭的大箱子，这个箱子内部的元素无论如何翻江倒海都不会影响到外部。同时，BFC具有普通容器所没有的一些特性，如可以包含浮动元素等。在网页中创建BFC可以实现一些特殊的布局效果或解决某些布局问题。例如，可以防止垂直外边距叠加、自适应两栏布局、清除浮动等。触发BFC的方式有多种，包括根元素或其它包含它的元素、浮动元素（元素的float不是none）、绝对定位的元素（元素具有position为absolute或fixed）以及overflow值不为visible的块元素等。

七，盒子居中的方式

1 margin-left：auto； margin-right：auto；

2 margin：auto；

3 margin：0 auto；（最常用）

4.left:50%;

top:50%;

transform:(-50%,-50%);

八，如何建立倒三角

一，实体三角

div{
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:#xxx;
}

二，使用字体图标并进行引用

三,使用旋转制作

div::after{
content:"";
position:absolute;
top:xxpx;
right:xxpx;
width:xxpx;
height:10px;
border-right:1px solid #xxx;
border-bottom:1px solid #xxx;
transform:rotate(45deg);
transition:all 0.6s;
}

九，用css画一条0.5px的线

1.一条水平的直线

div{
height:1px;
width:100px;
background-colour:black;
transform:scaleY(0.5);
transform-origin:50% 100%;
}

2.一条竖直的短线（用来分隔网页图标）

div{
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

十，常见网页布局模型

一

top

banner

mian

footer

二

top
banner
left	right

footer

三

top
banner


footer

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <style>
        li {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 50px;
            background-color: beige;
        }

        .banner {
            width: 980px;
            height: 150px;
            margin: 0 auto;
            margin-top: 15px;
            background-color: blue;
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            margin-top: 15px;
            background-color: pink;
        }

        .box li:nth-child(-n+4) {
            width: 237px;
            height: 300px;
            float: left;
            background-color: chartreuse;
        }

        .box li:nth-child(-n+3) {
            margin-right: 10px;
        }

        .footer {
            height: 300px;
            background-color: blueviolet;
            margin: 0 auto;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="top">
        top
    </div>
    <div class="banner">
        banner
    </div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

2301_80051592

关注

21
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
前端第一次考核总结

触发BFC的方式有多种，包括根元素或其它包含它的元素、浮动元素（元素的float不是none）、绝对定位的元素（元素具有position为absolute或fixed）以及overflow值不为visible的块元素等。行内元素：、、、、、、、、、；5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.块级元素：~、、、、、；
复制链接

扫一扫