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

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

2022-08-23 107
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：  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>

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

文章标签：
前端开发
关键词：
CSS前端
web前端
web前端CSS
web CSS
前端css
北极的三哈
目录
相关文章
你都不懂
|
8天前
|
编解码 前端开发 JavaScript
.NET_web前端框架_layui_栅格布局
【8月更文挑战第27天】
你都不懂
26 4
李木子2024
|
10天前
|
前端开发 搜索推荐 开发者
当title遇上alt：Web前端中的秘密较量，谁才是真正的赢家？
【8月更文挑战第26天】在Web开发中，`title`和`alt`属性对于提升网站的可访问性和搜索引擎优化至关重要。`title`属性可在鼠标悬停时显示额外信息，增强用户体验；`alt`属性主要用于图像，提供替代文本以确保视觉障碍用户及搜索引擎能理解图像内容。正确使用这两个属性可以显著提高网站的友好性和可达性。
李木子2024
32 1
李木子2024
|
10天前
|
XML JSON 前端开发
【Web前端揭秘】XML与JSON：数据界的双雄对决，你的选择将如何改写Web世界的未来？
【8月更文挑战第26天】本文深入探讨了XML和JSON这两种广泛使用的数据交换格式在Web前端开发中的应用。XML采用自定义标签描述数据结构，适用于复杂层次数据的表示，而JSON则以键值对形式呈现数据，更为轻量且易解析。通过对两种格式的示例代码、结构特点及应用场景的分析，本文旨在帮助读者更好地理解它们的差异，并根据实际需求选择最合适的数据交换格式。
李木子2024
32 1
李木子2024
|
6天前
|
JavaScript 前端开发 开发者
哇塞！Vue.js 与 Web Components 携手，掀起前端组件复用风暴，震撼你的开发世界！
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发，单个组件包含模板、脚本和样式，方便构建复杂用户界面。Web Components作为新兴技术标准，利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素，实现跨框架复用。结合二者，不仅增强了Web Components的逻辑和交互功能，还实现了Vue.js组件在不同框架中的复用，提高了开发效率和可维护性。未来前端开发中，这种结合将大有可为。
李木子2024
25 0
李木子2024
|
10天前
|
前端开发 搜索推荐 开发者
揭秘Web前端的隐形英雄：神奇的title与alt属性，你真的了解吗？
【8月更文挑战第26天】在Web开发中，`title`和`alt`属性对于提升网站的可访问性和搜索引擎优化至关重要。`title`属性可在鼠标悬停时显示额外信息，增强用户体验；`alt`属性主要用于图像，提供替代文本以确保视觉障碍用户及搜索引擎能理解图像内容。正确使用这两个属性可以显著提高网站的友好性和可达性。
李木子2024
24 0
你都不懂
|
1天前
|
前端开发 程序员
CSS前端学习（online tuorials）
CSS前端学习（online tuorials）
你都不懂
11 5
技术混子
|
8天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
30 3
李木子2024
|
10天前
|
前端开发
震惊！Web 前端行内元素和块级元素的 “巅峰对决”，究竟谁能主宰页面布局？
【8月更文挑战第26天】在Web前端开发中，掌握行内元素与块级元素的区别十分重要。块级元素如`&lt;p&gt;`、`&lt;div&gt;`等，特性为自动换行并可设置宽高；而行内元素如`&lt;span&gt;`则在同一行显示且无法直接设置宽高。二者默认样式亦不同，但可通过CSS调整显示方式，灵活应用于页面布局设计中，实现更优视觉效果。
李木子2024
26 1
李木子2024
|
10天前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇：一场关于标准与IE模型的精彩对决！
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码，清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸，而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策，提升网页布局的质量与美观性。
李木子2024
12 1
李木子2024
|
5天前
|
开发者 图形学 API
从零起步，深度揭秘：运用Unity引擎及网络编程技术，一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析，带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎，从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先，创建新项目并选择适合多人游戏的模板，使用推荐的网络传输层。接着，定义基本玩法，如2D多人射击游戏，创建角色预制件并添加Rigidbody2D组件。然后，引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑，包括移动和发射子弹功能。最后，设置服务器端逻辑，处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识，为进一步开发打下基础。
李木子2024
22 0

热门文章

最新文章

  • 1
    关于css,js放置位置的问题
  • 2
    [转载]理解并运用 CSS 的负 margin 值
  • 3
    如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
  • 4
    CSS学习（四）
  • 5
    jQuery和CSS3打造的3D炫酷特效
  • 6
    ASP.NET 2.0中CSS失效的问题总结(转)
  • 7
    细节决定成败——无CSS时网页的可读性
  • 8
    CSS3自定义发光radiobox单选框
  • 9
    详细认识一下CSS盒子模型
  • 10
    12款精美的免费 CSS 网页模板下载
  • 1
    前端和后端限制文件大小的具体实现方式
    285
  • 2
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    59
  • 3
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    119
  • 4
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    75
  • 5
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    54
  • 6
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    396
  • 7
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    148
  • 8
    从前端Vue到后端Spring Boot：接收JSON数据的正确姿势
    182
  • 9
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    78
  • 10
    【Web 前端】网页上有 5 个div元素，如何使用JQ来选择它们？
    89

    • 相关课程

    更多
  • 零基础学前端HTML+CSS
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发CSS基础
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
  • 前端开发基础1：前端开发环境的安装和配置
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • Web Terminal环境使用指南
    • 下一篇
    DDNS