前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】

前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
前端的那些基本标签
html页面的骨架，相当于人的骨头，只有骨头是不是看着有点瘆人，只有HTML也是如此。

css,相当于把骨架修饰起来，相当于人的皮肉。

js(javascripts),动起来，相当于人的血液，大脑等一切能使人动起来的器官或者其他的。

在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有，除此之外牛客里面还有招聘（社招和校招）、一些上岸大厂的大佬的面试经验。 牛客是可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随一生的刷题app

刷题页面，功能完善，短时间坚持可看效果。

查看出现此处，筛选定制，查询指定大厂出现频率

首页功能强悍，完全免费

🍓🍓按要求写一个圆

问题 1：
请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
1、圆角属性仅设置一个值
2、圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写

解答：
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                width:100px;
                height:100px;
                border:1px #000 solid;
                border-radius:50px;  
            }
        style>
    head>
    <body>
        <div>div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
有没有发现dd相比于dt缩进了一段距离。dd和dt在开发商还是很常见的，这两个标签只需要记住就好。

总结：
🥭🥭1、首页他说的是半径是50px 那么他的高和宽就都为100px,然后给他的圆角为50px就可以了。
🥭🥭2、文中的 div{…} 就是一个简单的CSS样式。这个圆也是通过CSS样式画出来的。
🥭🥭3、如果下面还会有div出现将会画一个圆，上面的div就相当于全局变量，但凡设计div都要修饰一下。
🥭🥭4、注意div是双标签。多个圆，如下图所示。

🍓🍓设置盒子宽高

问题 2：
请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

解答：
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            .box {
                width: 100px;
                height: 100px;
                padding: 20px;
                margin: 10px;
            }
        style>
    head>
    <body>
        <div class="box">
        div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
0d364b7a81f043f.png)

总结：
🥭🥭1、这个很简单就不做总结了。唯一要说的就是要说前面的div对应下面全部div块级标签，没区别 .box{} 就是通过 class=“属性” 来进行区分的
🥭🥭 2、#box{…} 表示通过id来区分其中不管是哪个里面的【.box{} #box{}】,box只是一个属性值，可以是任意值。上面设置属性样式，下面通过属性值来进行匹配，渲染
🥭🥭 3、同一个标签里面可以同时被好多央视渲染，例如下面的例子，box控制宽高，id控制颜色
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .box{
            height:100px;
            width:100ps;
        }
        #id{
            color:red;
        }
    style>
head>
<body>
<div id="tone" class="box" >div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
```
🍓🍓浮动和清除浮动

问题 3：
请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                display:table;
                content:' ';
                clear:both
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
        style>
    head>
    <body>
        <div class='wrap'>
            <div class='left'>div>
            <div class='right'>div>
        div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
```
怎么样，是不是特别酷，点击播放按钮就可以播放音乐了。因为牛客这个不支持，所以无法播放，感兴趣思维小伙伴可以那专门写前端的工具（Vscode、Webstorm等等）试一试，感受一把前端的魅力。

总结：
🥭🥭一、使用了float之后，父级盒子的高度变为0了,导致案例不能通过。
🥭🥭二、 清除的浮动方式:

🐱‍👓🐱‍👓1、可以给父盒子添加一个高度
🐱‍👓🐱‍👓2、可以添加属性 overflow:hidden ,但是不能和定位同时使用,因为超出的尺寸的会被隐藏,可能会影响页面的布局
🐱‍👓🐱‍👓3、可以通过伪元素after的方式，万能法。
万能清楚法;父盒子：：after{ content:""; clear:both; display:block; visiblity:hidden; }
🐱‍👓🐱‍👓4、可以在子元素的最后添加一个空的div,设置clear:both属性

🥭🥭三、浮动移动的特点 和浮动沾点点边，那就加上吧
♻♻1、浮动元素会完全脱离文档流，不再占据文档流中的位置
♻♻2、设置浮动以后元素会向父元素的左侧或右侧移动
♻♻3、浮动元素默认不会从父元素中移出
♻♻4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
♻♻5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
♻♻6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
简单总结： 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

🍓🍓固定定位

问题 4:
请将html模块类为"box"的div元素固定在视口的左上角。
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                position:fixed;
                left:0px;
                top:0px;
            }
        style>
    head>
    <body>
        <div class='box'>这是一个div块级标签div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
总结：
🥭🥭1、前面看明白了，因该知道 .box 是class属性绑定的渲染
🥭🥭别看他是一个字，其实他是一个块，只不过字在块上，下面看看这张图你就明白了。

看见没，是一个宽高为100px的块

🍓🍓CSS单位（一）

问题 5:
请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。。
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                width:4em;
                height:4em;
            }
        style>
    head>
    <body>
        <div class='box'>div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
总结：
🥭🥭这个没啥好说的，em是相对于自身字体大小的单位，记住就行。

🍓🍓CSS单位（二）

问题 6:
请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。
```
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                height:4rem;
                width:4rem;
            }
        style>
    head>
    <body>
        <div>div>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
总结：
在css中单位长度用的最多的是px、em、rem，这三个的区别是：
🥭🥭px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

🥭🥭em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
🥭🥭对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

看着是不是感觉手有点痒痒的了。那就来注册下自己试试吧，试试才知道好不好，试试才知道适不适合自己。就算最后没用这款软件那也尝试过，不后悔。
可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随程序员一生的app

觉得有用的可以给个三连，关注一波！！！带你玩转前端
相关阅读:
记一次曲折的拿靶标记录
 猜数字，玩游戏（随机生成1到100之间的数字，进行猜数字游戏）
js 多个小程序之间互相跳转，a小程序带参跳转到b小程序中
 OSI协议
 MySQL备份与恢复
 巴西队提前出线，预定大力神杯？数据分析告诉你，到底谁才是冠军
 FreeRTOS入门教程（事件组概念和函数使用）
Kafka基础与核心概念
 算法金 | 统计学的回归和机器学习中的回归有什么差别？
【DP】Block Sequence—CF1881E
原文地址：https://blog.csdn.net/qq_46906413/article/details/126236674

前端的那些基本标签

🍓🍓按要求写一个圆

🍓🍓设置盒子宽高

🍓🍓浮动和清除浮动

🍓🍓固定定位

🍓🍓CSS单位（一）

🍓🍓CSS单位（二）