AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Web前端】——CSS基础知识总结

2022-08-23 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：  HTML可以让我们实现静态页面效果，但是页面没有炫酷好看的效果，通过CSS技术可以对静态页面进行修饰，让页面更加好看美观。

前端技术之CSS

在这里插入图片描述

前言

   HTML可以让我们实现静态页面效果，但是页面没有炫酷好看的效果，通过 CSS技术可以对静态页面进行 修饰，让页面更加好看美观。

一、CSS的引入

1.1为什么要学习CSS？

（HTML画页面）这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面,引入CSS。

1.2CSS的作用

修饰HTML页面
用了CSS之后，样式和元素本身做到了分离的效果。（降低了代码的耦合性）

1.3HTML和CSS的关系？

先有HTML，先有页面，CSS修饰页面

1.4CSS名字

层叠样式表CSS：cascading style sheets 。

层叠：样式的叠加
样式表：各种各样样式的集合

二、CSS的三种书写方式

2.1内联样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css内联样式</title>
    </head>
    <body>
    <!--
        书写方式：内联样式
        在标签中加入一个style属性，css的样式作为属性值
        多个标签之间用；进行连接
    -->
        <h1 style="color: deeppink; font: '微软雅黑';">CSS内联样式</h1>
    </body>
</html>

在这里插入图片描述

2.2内部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css内部样式</title>
        <!--
            书写方式：内部样式
            head标签中加入一个style标签，在里面定位到你需要修饰的元素，
            然后再{}中加入你要修饰的样式
        -->
        <style type="text/css">
            h1{font: "微软雅黑";color: aqua;}
        </style>
    </head>
    <body>
        <h1>css内部样式</h1>
    </body>
</html>

在这里插入图片描述

2.3外部样式

首先要创建一个css文件，css文件的后缀.css

h1{
    color: red;
    font-family: "宋体";
}

再创建html页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--y引入外部资源：link-->
        <link rel="stylesheet" href="css/css外部样式.css" />
    </head>
    <body>
        <h1>css外部样式</h1>
    </body>
</html>

在这里插入图片描述

实际开发中三种书写方式用的最多的是：外部样式：因为这种方式真正做到了 元素页面和样式 分离

2.4三种书写方式优先级

就近原则

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--外部样式-->
        <link rel="stylesheet" href="css/css外部样式.css" />
        <!--内部样式-->
        <style type="text/css">h1{color: coral;}</style>
    </head>
    <body>
        <!--内部样式-->
        <h1 style="color: darkorchid;font-family: '微软雅黑';">css的书写方式</h1>
    </body>
</html>

在这里插入图片描述

三、学习CSS的重点

css的作用：修饰页面上的元素
利用选择器定位页面上要修饰的元素

四、基本选择器

4.1元素选择器

通过元素的名字进行定位，，他会获取页面上所有这个元素
格式:
元素名{css样式;}

4.2类选择器

应用场合：不同的类型标签使用相同的类型
格式:
.clss的名字{css样式；}

4.3id选择器

应用场合，可以定位唯一的元素
不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
格式：
#id名字{css样式}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*
             【1】基本选择器：元素选择器
             通过元素的名字进行定位，，他会获取页面上所有这个元素
             格式；
             元素名{css样式;}
             * */
            h1{color: #00FFFF;}
            h2{color: chartreuse;}
            i{color: #FF7F50;font: "微软雅黑";}
            
            /*
             【2】基本选择器：类选择器
             应用场合：不同的类型标签使用相同的类型
             格式：
             .clss的名字{css样式；}
             * */
            .mycls{color: #FF7F50;}
            
            /*
             【3】id选择器
             应用场合，可以定位唯一的元素
             不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
              格式：
             #id名字{css样式}
             * */
            #myid{color: blueviolet;}
        </style>
    </head>
    <body>
        <h1>css基本选择器</h1>
        <h1>这是<i>一个h1</i>标题</h1>
        <h1>这是一个h1标题</h1>
        <h1 class="mycls">这是一个h1标题</h1>
        <h2>这是一个h2标题</h2>
        <h2 id="myid">这是一个h2标题</h2>
        <h2 class="mycls">这是一个h2标题</h2>    
    </body>
</html>

在这里插入图片描述

4.4基本选择器优先级

id选择器>class选择器>元素选择器

五、关系选择器

5.1 div 和 span

可以把div理解为一个框
div叫做块级元素，有换行效果     
span属于行内元素，没有换行效果
span：里面内容占多大，span包裹的区域就有多大
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*
         可以把div理解为一个框
         div叫做块级元素，有换行效果
         
         span属于行内元素，没有换行效果
         span：里面内容占多大，span包裹的区域就有多大
         * */
        div{border: 1px red solid;}
        span{border: 1px darkmagenta solid;}
        </style>
    </head>
    <body>
        <div>关系选择器</div>
        <div>关系选择器</div>
        <span>选择器</span>
        <span>选择器</span>
        <span>关系选择器</span>
    </body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

5.2关系选择器

关系选择器 
         后代选择器：只要是这个元素的后代，样式都会发生变化
         div下面的所有h1标签都会发生变化
         子代选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*关系选择器
             后代选择器：只要是这个元素的后代，样式都会发生变化
             div下面的所有h1标签都会发生变化
             * */
            div h1{color: #00FFFF;}
            /*子代选择器*/
            div>h1{color: #8A2BE2;}
        </style>
    </head>
    <body>
        <div>
            <h1>关系选择器</h1>
            <h1>关系选择器</h1>
            <span>
                <h1>关系选择器</h1>
                <h1>关系选择器</h1>
            </span>
        </div>
    </body>
</html>

在这里插入图片描述

六、属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*属性选择器*/
            input[type="password"]{
                color: #00FFFF;background-color: cadetblue;
            }
            input[type="text"]{
                background-color: cyan;
            }
        </style>
    </head>
    <body>
        <form>
            用户名<input type="text" value="Flyme awei"/><br />
            密&emsp;码<input type="password" value="123123"/>
            <input type="submit" value="登录"/>
        </form>
    </body>
</html>

在这里插入图片描述

七、伪类选择器

伪类选择器 向某些选择器添加特殊效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             伪类选择器:
             鼠标悬浮在上面才变色*/
            h1:hover{color: #00FFFF;}
        </style>
    </head>
    <body>
        <h1>伪类选择器</h1>
    </body>
</html>

一般用在超链接上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*设置静止状态*/
            a:link{color: black;}
            /*设置鼠标悬浮状态*/
            a:hover{color: red;}
            /*设置触发状态*/
            a:active{color: blue;}
            /*设置完成状态*/
            a:visited{color: green;}
        </style>
    </head>
    <body>
        <h1><a href="index.html" target="_blank">超链接</a></h1>
    </body>
</html>

八、练习百度导航栏

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*取消无序列表前的图标*/
            ul{list-style-type: none;}
            
            /*设置鼠标悬浮效果*/
            a:hover{color: deepskyblue;}
            
            /*设置静止状态 去除下划线*/
            a:link{
                color: black; 
                text-decoration: none;
                font: 13px;
            }
            
            li{
                float: left; /*向左浮动*/
                margin-left: 15px;} /*设置间隔15px*/
        </style>
    </head>
    <body>
        <ul>
            <li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
            <li><a href="" target="_blank">hao123</a></li>
            <li><a href="" target="_blank">地图</a></li>
            <li><a href="" target="_blank">贴吧</a></li>
            <li><a href="" target="_blank">视屏</a></li>
            <li><a href="" target="_blank">图片</a></li>
            <li><a href="" target="_blank">网盘</a></li>
            <li><a href="" target="_blank">更多</a></li>
        </ul>
    </body>
</html>

效果图：

在这里插入图片描述

九、浮动的原理

9.1什么是浮动？

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

9.2浮动初衷

浮动初衷：文字环绕图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{float: left;}
        </style>
    </head>
    <body>
        <img src="img/css.png" />
        &emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
    </body>
</html>

在这里插入图片描述

9.3浮动原理

  请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述

  再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

  如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
在这里插入图片描述

  如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
在这里插入图片描述

9.4浮动语法

值 语法
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其文本中出现的位置

9.5感受浮动效果

先设置一个大的div，然后里面放入三个小的div:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: pink;">
            <div style="width: 100px;height: 100px; background-color:chartreuse;"></div>
            <div style="width: 200px; height: 200px;background-color: coral;"></div>
            <div style="width: 300px;height: 300px; background-color: yellow;"></div>
        </div>
    </body>
</html>

效果：没有浮动效果
在这里插入图片描述
先给绿色div加上浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
    </head>
    <body>
        <div style="background-color: pink;">
            <div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
            <div id="div02" style="width: 200px; height: 200px;background-color: coral;">2</div>
            <div id="div03" style="width: 300px;height: 300px; background-color: yellow;">3</div>
        </div>
    </body>
</html>

在这里插入图片描述
在给橙色加上浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
    </head>
    <body>
        <div style="background-color: pink;">
            <div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
            <div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
            <div id="div03" style="width: 300px;height: 300px; background-color: yellow;">3</div>
        </div>
    </body>
</html>

在这里插入图片描述
在给黄色加上浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
    </head>
    <body>
        <div style="background-color: pink;">
            <div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
            <div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
            <div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
        </div>
    </body>
</html>

在这里插入图片描述
现在在三个div下面再加上一个紫色div：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
    </head>
    <body>
        <div style="background-color: pink;">
            <div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
            <div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
            <div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
        </div>
        <div style="width: 600px;height: 400px;background-color: #8A2BE2;">4</div>
    </body>
</html>

在这里插入图片描述用浮动要考虑影响，看看是否对其他的元素有影响。

十、消除浮动影响

方式1：
给浮动的父节点加入一个属性overflow:hidden

方式2：
给父节点加一个高度

方式3：
被影响的元素加一个属性clear:both

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
    </head>
    <body>
        <div style="background-color: pink;height: 300px;overflow: hidden;">
            <div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
            <div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
            <div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
        </div>
        <div style="height: 400px;background-color: #8A2BE2;clear:both">4</div>
    </body>
</html>

在这里插入图片描述

十一、定位position

position 属性指定了元素的定位类型。

值 属性
static 默认值。没有定位，元素出现在正常流中（忽略top，bottom，left，right，z-index声明）
relative 生成相对定位元素，相当于其正常位置进行定位。<br/>因此“left：20”会向元素的LEFT位置添加20像素。
absolute 生成绝对定位，相当于static定位以外的第一个元素进行定位。<br/>元素通过left，right，top，bottom属性进行规定。
fixed 生成绝对定位元素，相当于浏览器窗口进行定位。<br/>元素通过left，right，top，bottom属性进行规定。

11.1静态定位：static

如果我们不写position属性的话，相当于默认效果就是静态定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            静态定位：
            如果我们不写position属性的话，相当于默认效果就是静态定位。
        -->
        <img src="img/css4.png" style="position: static;"/>
    </body>
</html>

11.2相对点位：relative

相对于元素自身所在的位置进行定位。

可以设置left，right，top，bottom四个属性。

效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动。

一般情况下，left和right不会同时使用，top和bottom不会同时使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--相对点位：
            相对于元素自身所在的位置进行定位。
            可以设置left，right，top，bottom四个属性。
            效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动
            一般情况下，left和right不会同时使用，top和bottom不会同时使用
        -->
        <div style="width: 500px;height: 500px;background-color: pink;">
            <div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
            <div style="width: 100px;height: 100px;background-color: chartreuse;
                position: relative;bottom: 10px;right: 20px;"></div>
            <div style="width: 100px;height: 100px;background-color: coral;"></div>
        </div>
    </body>
</html>

在这里插入图片描述
相对定位的应用场合：

（1）元素在小范围移动的时候
（2）结合绝对定位使用

再说一个属性：z-index

设置堆叠顺序，设置元素谁在上谁在下。
注意：z-index属性要设置在定位的元素上 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--相对点位：
            相对于元素自身所在的位置进行定位。
            可以设置left，right，top，bottom四个属性。
            效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动
            一般情况下，left和right不会同时使用，top和bottom不会同时使用
        -->
        <div style="width: 500px;height: 500px;background-color: pink;">
            <div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
            <div style="width: 100px;height: 100px;background-color: chartreuse;
                position: relative;bottom: 10px;right: 20px;z-index: 10;"></div>
            <div style="width: 100px;height: 100px;background-color: coral;
    "></div>
        </div>
    </body>
</html>

11.3绝对定位：absolute

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #outher{
                width: 500px;
                height: 500px;
                background-color:pink;
                margin-left: 200px;
            }
            #div01{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: absolute;
                left: 50px;
                top: 50px;
            }
            #div02{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="outher">
            <div id="div01"></div>
            <div id="div02"></div>
        </div>
    </body>
</html>

在这里插入图片描述

  暂时来说看到的效果：蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色div移动上去了！

实际开发中，我们往往让蓝色div在粉色div中发生位移效果：
配合定位来使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #outher{
                width: 500px;
                height: 500px;
                background-color:pink;
                margin-left: 200px;/*粉色div距离左边两百像素*/
                /*直接设置一个相对定位*/
                position: relative;
            }
            #div01{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: absolute;
                left: 50px;
                top: 50px;
            }
            #div02{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="outher">
            <div id="div01"></div>
            <div id="div02"></div>
        </div>
    </body>
</html>

在这里插入图片描述
总结：

  当给一个元素设置了绝对定位的时候，它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直到找到 body了也没有定位，那么就相对 body进行变化，如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生变化。无论是上面的哪一种，都会释放原来的位置，然后其他元素会占用那个位置。

开发中建议使用：父级节点relative定位，子级节点使用绝对定位。

11.4固定定位：fixed

应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。
代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #mydiv{
                width: 50px;
                height: 300px;
                background-color: gainsboro;
                /*固定定位*/
                position: fixed;
                top: 200px;
                right: 5px;
            }
        </style>
    </head>
    <body>
        <div id="mydiv"></div>
    </body>
</html>

在这里插入图片描述

十二、盒子模型引入

页面上也有很多元素，元素之间的布局/设计 依靠 盒子模型：
  所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述
在浏览器端验证盒子模型：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: aqua;
                margin-left:100px ;
                border: 4px red solid;
            }
        </style>
    </head>
    <body>
        <div>div</div>
    </body>
</html>

在这里插入图片描述

十三、盒子模型代码演示

感受盒子模型：

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
            }
            #outer{
                width: 200px;
                height: 200px;
                background-color: #00FFFF;
                margin-left: 100px;
                margin-top: 100px;
                padding-top:100px;
                padding-left: 100px;
            }
            #mydiv{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="mydiv"></div>
        </div>
    </body>
</html>

十四、盒子模型练习题

接下来，做一个小小的练习，实现12306右侧的固定定位。

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div01{
                position: fixed;
                right: 0px;
                top: 100px;
                width: 62px;
                height: 66px;
                background: url(img/731d6dba28ef5ca7c53a381202c0cc5.png) no-repeat 10px 4px;
                background-color: #EFEFEF;
                font-size: 22px;
                font-family: "微软雅黑";
                color: #666666;
                padding-top: 40px;
                text-align: center;
            }
            #div02{
                position: fixed;
                right: 0px;
                top: 220px;
                width: 62px;
                height: 66px;
                background: url(img/948d5e97e3483622e786751e597db8d.png)no-repeat 6px 1px;
                background-color: #EFEFEF;
                font-size: 22px;
                font-family: "微软雅黑";
                color: #666666;
                padding-top: 40px;
                text-align: center;
            }#div03{
                position: fixed;
                right: 0px;
                top: 340px;
                width: 62px;
                height: 66px;
                background: url(img/586bf3990b9745851e3b13d6b01efcf.png) no-repeat 10px 4px;
                background-color: #EFEFEF;
                font-size: 22px;
                font-family: "微软雅黑";
                color: #666666;
                padding-top: 40px;
                text-align: center;
            }#div04{
                position: fixed;
                right: 0px;
                top: 460px;
                width: 62px;
                height: 66px;
                background: url(img/cef0738f020acc31b33a98293cbb2a0.png) no-repeat 4px 4px;
                background-color: #EFEFEF;
                font-size: 22px;
                font-family: "微软雅黑";
                color: #666666;
                padding-top: 60px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="div01">最新<br/>发布</div>
        <div id="div02">联系<br/>客服</div>
        <div id="div03">APP<br/>下载</div>
        <div id="div04">关闭</div>
    </body>
</html>

效果：
在这里插入图片描述
可以看出效果还是挺不错的哦。

文章标签：
前端开发
关键词：
前端web
前端css
web前端
CSS前端
CSS web
北极的三哈
目录
相关文章
土木林森
|
23天前
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
38 3
代码bug生产队
|
1月前
|
前端开发 JavaScript 测试技术
前端工程化：构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化：构建高效、可维护的现代Web应用
代码bug生产队
53 1
代码bug生产队
|
1月前
|
前端开发 测试技术 持续交付
前端工程化：构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化：构建高效、可维护的现代Web应用
代码bug生产队
84 0
土木林森
|
1天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
14 6
爱的不是纯牛奶-47754
|
20天前
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
35 6
土木林森
|
19天前
|
Web App开发 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用CSS3，打造炫酷视觉效果！
【10月更文挑战第31天】前端开发面临复杂布局的挑战，本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求，而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局，帮助开发者构建高性能、用户友好的网页应用。
土木林森
25 4
土木林森
|
24天前
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
24 3
土木林森
|
24天前
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
36 2
邹荣乐
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
186 1
代码bug生产队
|
1月前
|
JavaScript 前端开发 开发者
前端开发趋势：从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势：从Web Components到Vue.js
代码bug生产队
16 1

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    05.javascript访问CSS
  • 3
    如何用纯 CSS 创作一个赛车 loader
  • 4
    CSS伪元素实现的3D按钮
  • 5
    CSS3中的选择器
  • 6
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 7
    IE6, IE7, IE8 CSS 兼容速查表
  • 8
    CSS3的新属性的一下总结
  • 9
    碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
  • 10
    CSS中的特殊符号
  • 1
    从前端到后端：构建现代化Web应用的技术实践
    65
  • 2
    从零开始学习前端开发：HTML基础
    46
  • 3
    前端利器SASS之入门篇，前端开发你需要了解的那些事
    64
  • 4
    sass 公用10个mixins代码块，算法太TM重要了，前端开发要求
    48
  • 5
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    51
  • 6
    CSS3 转换，深入理解Flutter动画原理，前端基础图形
    65
  • 7
    4(1)，阿里面试官，前端开发面试题目
    52
  • 8
    【前端】websocket 讲解与项目中的使用
    85
  • 9
    详解前端登录流程：实现原理与最佳实践
    295
  • 10
    前端安全方面
    50

    • 相关课程

    更多
  • Python Web 框架 Django 快速入门
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • WebGL 在前端可视化中的实践
  • 基于Web前端的可用性优化
  • 基于webpack和npm的前端组件化实践

    • 相关实验场景

    更多
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    无影云桌面