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

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

2022-08-23 195
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：  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
北极的三哈
目录
相关文章
游客vwx7bav3mqbk6
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker：让前端飞起来的隐形引擎
在现代 Web 开发中，前端性能优化是一个至关重要的课题，尤其是对于计算密集型的应用，如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈，导致应用变得迟缓。Web Worker，作为一种强大的技术，使得前端能够在后台进行并行计算，从而实现高效的任务处理，不影响主线程的运行和用户的交互体验。
游客vwx7bav3mqbk6
334 108
凉凉心.
|
3天前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化， 让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 在默认样式中声明元素的初始状态样式； 声明过渡元素最终状态样式，比如悬浮状态； 在默认样式中通过添加
凉凉心.
31 0
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
78 2
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
12 0
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素 ID和类选择器：基于id#和class的属性值进行选择元素。 属性选择器：基于属性的有无和特征进行选择。 ①上下文选择器： 上下文选择器的语法格式：标签1 标签2{属性:值;} //注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开， 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明：标签1和标签2
凉凉心.
23 1
凉凉心.
|
3天前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transitio
凉凉心.
21 0
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法，以便于把元素组成成多栏布局。 盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒
凉凉心.
27 0
卓伊凡
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
卓伊凡
326 72
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
position定位（核心） 我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。 三大属性：position属性，display属性，float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法，可以实现多栏布局，导航菜单等等。 position属性是干嘛用的？怎么用？有哪些属性值？ position属性控制页面上元素间的位置关系，也就是排版。 怎么用？要知道怎么用
凉凉心.
45 3
凉凉心.
|
3天前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下： 属性名 属性值 animation-name 指定动画名称，该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation：这是一个复合属性。
凉凉心.
21 0

热门文章

最新文章

  • 1
    Vue 3：下一代前端框架革新
  • 2
    Vue 3：下一代前端框架的革命性进化
  • 3
    Vue 3：下一代前端框架的革命
  • 4
    Vue 3：下一代前端框架的革新
  • 5
    Vue 3：下一代前端框架革新
  • 6
    Vue 3：现代前端开发的新范式
  • 7
    Vue 3：下一代前端框架的革命
  • 8
    前端工程化演进之路：从手工作坊到AI驱动的智能化开发
  • 9
    实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
  • 10
    Vue 3 + TypeScript 现代前端开发最佳实践（2025版指南）
  • 1
    【GoGin】（0）基于Go的WEB开发框架，GO Gin是什么？怎么启动？本文给你答案
    65
  • 2
    【GoGin】（1）上手Go Gin 基于Go语言开发的Web框架，本文介绍了各种路由的配置信息；包含各场景下请求参数的基本传入接收
    42
  • 3
    EventLog Analyzer：高效的Web服务器日志监控与审计解决方案
    66
  • 4
    AppSpider 7.5.020 发布 - Web 应用程序安全测试
    33
  • 5
    如何轻松使用AWS Web应用程序防火墙？
    450
  • 6
    利用 AI 助手进行 Web 开发通
    97
  • 7
    【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
    166
  • 8
    Web渗透-常见的端口及对其的攻击思路
    395
  • 9
    Web渗透信息收集进阶
    416
  • 10
    Web渗透-文件上传漏洞-上篇
    112

    • 相关课程

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

    • 相关电子书

    更多
  • 基于Web前端的可用性优化
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
    • 下一篇
    语音克隆 Index-TTS 详细介绍