整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片等。网页制作学习群：四九四零六，四九三四。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1、tml的固定结构
一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>
标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有<title>、<script>、<style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
2、<head>标签的作用
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>标签
在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，
4、标签的用途
我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使
用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
① 更容易被搜索引擎收录。
②.更容易让屏幕阅读器读出网页内容。
更多精彩内容微信公众平台：网页设计自学平台
限时!！免费送Dreamweaver、js等前端教程
position:fixed;用我自己的话来说，就是让你想要固定的东西固定。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
.photo{
width: 600px;
height: 600px;
position: fixed;
left: calc(50%-300px);
top: calc(50%-300px);
}
</style>
</head>
<body>
10月7日，昆凌在社交平台晒出自己荡秋千的美照。
照片中，昆凌长发披肩，头戴假日风草帽，
穿一袭白裙在海边荡着秋千，回眸甜笑，宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。
当我下拉时，图片的位置是不会动的。即使下滑到了最底部，图片的位置也是固定的。对比下面这张图：
子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。
实操代码理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html>看图：在father这个容器设置了相对定位之后，son1和son2都设置了绝对定位，我们的子类这时其实不是在body中绝对定位（absolute），而是在其父类的范围中绝对定位（absolute）。
position: absolute;查找定位的参照物方法：
从当前元素开始往上找，直到找到一个具有定位属性的元素为准，以这个元素为参照进行定位。
如果没有一个元素有定位属性,最终就参照body进行定位。（我一直理解的就是绝对定位就是你想定哪里定哪里）
定位的时候：结合top left right bottom 这四个方向属性进行配合定位。但是要注意：不能同时选择left喝right
注意：这里要区别于相对定位，在使用相对定位时，无论是否进行移动，原来的位置就没有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
background-color: salmon;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是box1，我采用了绝对定位
</div>
</body>
</html>position: relative;相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，原来的位置始终保留着。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
left: 300px;
top: 300px;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>原文链接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一个超级无敌可爱的人鸭
出处：CSDN
一篇文章中，小海前端（头条号）为小伙伴们介绍了CSS3中新增的border-image属性，该属性主要用于为容器的边框添加图片。本篇文章，继续为大家讲解该属性的用法和CSS3中对该属性的一些细节要求。
尚未阅读上一篇文章的小伙伴请先阅读上一篇文章，上一篇文章讲解了border-image属性及其派生属性的基础用法。
承接文章：为容器的边框添加图片，CSS3新增的边框图片属性，一种新颖的用法
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
该组属性的兼容性暂时还不是特别好，建议大家使用火狐浏览器（Firefox）来尝试该属性的各个效果。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
本篇文章涉及到的CSS3属性问题：
border-image-slice属性的使用细节
border-outset属性的用法
border-image-width属性和border-width属性的区别
border-image属性和border属性的冲突性
各个浏览器内核的兼容性
一、border-image-slice属性的使用细节：
上一篇文章中讲到，border-image-slice是用来设置边框图片的切片属性的。该属性的取值为一个不带单位的数值，默认单位为像素，但是不用书写px。该属性设置的数值可以将边框图片划分为9个区域，并贴到边框的9个不同位置。
这里还以上一篇文章中宽度和高度均为90像素的图片为例，该图片存放在一个名为images的文件夹中，图片的文件名为ball.jpg，图片中每个圆形的直径均为30像素。
素材图 ball.jpg
对于该属性，CSS3对于它的使用方法还有以下几个细节要求：
当切片的上下偏移之和大于等于图像的高度，且左右偏移之和大于等于图像的宽度。则容器只有四个角可以获得边框图片的切片，而容器的边无法获得任何图片。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代码指出，上切片尺寸为60像素，右切片尺寸为70像素，下切片尺寸为50像素，左切片尺寸为30像素。上下切片的偏移之和为110像素，左右切片的偏移之和为100像素，这两个值均超过了图片90像素的宽高尺寸。因此只有容器的四个角可以得到边框图像。最终效果如下图所示：
实体效果图
当切片的上下偏移量都大于等于图像的高度，且左右偏移量都大于等于图像的宽度。则容器的四个角可以获得完整的边框图像。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代码指出，上切片尺寸为90像素，右切片尺寸为100像素，下切片尺寸为120像素，左切片尺寸为130像素。每一个方向的切片偏移量均大于等于图片90像素的宽度和高度值。因此容器的四个角可以获得完整的边框图像。同样，边依然无法得到任何切片图像。
最终效果如下图所示：
实体效果图
border-image-slice属性还有一个可以放在切片数量后面的取值。当具有该取值并设置为“fill”时，边框图片中5号圆形就会显示在容器的内部。如果没有该取值，边框图片中5号圆形就不会显示在容器内部。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30 fill/30px round
最终效果如下图所示：
实体效果图
二、border-outset属性的用法：
该属性用来对边框图像实现向外扩张的效果。该属性的取值为带有单位的数值。同时该属性也是可以结合border-image属性单独使用的。
CSS代码如下所示：
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代码会让边框图像在显示的同时向外扩张30像素。请小伙伴们自行操作并尝试。
三、border-image-width属性和border-width属性的区别：
border-width属性可以单独使用，适用于设置具有颜色的边框宽度。
border-image-width属性不可以单独使用，必须在border-image属性取值内部固定的位置处使用。该属性主要用于设置具有图像的边框宽度。
这两个属性是可以同时使用的。
当容器内部具备文本内容时，我们发现，文本内容出现在了边框图片的位置处。为了方便小伙伴们观察，我把文本内容调整成了黄色。如下图的左侧部分。
实体效果图
此时调整border-width属性，为了让边框宽度生效，还需要设置边框样式border-style。为了不让容器的大小发生变化，添加box-sizing属性。为了便于查看，我把文本内容调整成了红色。如上图右侧部分。
CSS代码如下所示：
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image属性和border属性的冲突性：
CSS3规定，带有颜色的边框和边框图片不得同时存在，并且当border-image属性和border属性同时存在时，border-image是不起作用的。
CSS代码如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代码执行后，容器会带有10像素的边框，而不带有边框图片。小伙伴们可以自行尝试。
五、各个浏览器内核的兼容性：
CSS3的属性中还有许多都是浏览器不能完全兼容的，有的属性兼容部分浏览器，有的属性被浏览器部分兼容。那么，要对所有的浏览器都得到相同的外观，应该如何处理呢？
可以采用为CSS属性的兼容性前缀来解决这个问题。
-ms-，适用于具有Trident内核的IE系列浏览器。
-webkit-，适用于具有webkit内核的浏览器，例如Safari浏览器、360安全浏览器等。
-moz-，适用于Firefox浏览器。
-o-，适用于Opera浏览器。
因此，border-image属性要实现浏览器全兼容可以使用下列代码：
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不过通过实际操作，我发现border-image属性即使加上了浏览器兼容性前缀，也不能达到满意的效果。CSS3中还有许多属性都不能达到最满意的兼容性，我们只能等待CSS3完备的计划出台，并尽快得到大部分浏览器厂商的支持和认可。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
下一篇文章中，小海前端（头条号）会为小伙伴们讲解CSS3中实现多列布局的属性。这组属性解决了在CSS2时必须要对容器进行浮动才能在一行内显示多列的问题。希望小伙伴们不要错误。
*请认真填写需求信息，我们会在24小时内与您取得联系。
