梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > CSS3框模型-外边距(margin)内边距(padding)使用实战教程【从入门到精通】

CSS3框模型-外边距(margin)内边距(padding)使用实战教程【从入门到精通】

时间:2018-07-30 01:20 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

今天梁先国seo学习了关于css3框模型中外边距(margin)属性和内边距(padding)属性的定义及作用以及在网页实际开发过程中需要运用的特定场合,如果不知道如何使用外边距(margin)属性内边距(padding)属性及它们之间的区别,可以观看最新web前端开发原创视频教程,希望对大家有所帮助。

下面以梁先国seo个人博客站为例,现在打开网站,把眼睛移到网站首页分页处.

梁先国seo个人博客站

我们可以看到页码显示1-10位阿拉伯数字,也就是网站首页被分成10页显示,我们凭肉眼直观看是一个个绿色的小正方形,里面显示的是1-10的白色阿拉伯数字还有首页,末页,下一页,别小瞧这些数字,它们都是可以点击的超链接(你不信可以亲自试试,跳转的首页分页样式是引用的dedecms样式效果,不好看,以后改进)当然这都是我们实际看到的样式,而实现这些样式效果需要需要运用css3对应的属性功能

对于专业的网页技术开发人员来说,我们在分析一个网页样式效果,一般是通过键盘上的快捷键F12,借助web开发者工具解决问题,

下面我们通过F12来分析梁先国seo博客首页分页处的css样式效果 :

实际分析过程
显示“首页”字样的a元素的整体尺寸大小是 44x24px, 这是浏览器通过处理后显示的a元素的尺寸大小,那么这个“a”元素的尺寸大小是怎么计算的?下面具体分析一下 a元素“ 首页”的文本尺寸大小是28x20px ,然后开发人员使用padding属性给a元素上下各增加了2px,左右各增加了8px,而border和margin各自为0,所以 分析得出a元素“首页”宽width 44px=28px+padding(16px) ;高height24px=20px+padding(4px) ,由此“首页”字样的a元素最终整体尺寸 大小为44x24px 。至于其他带“1-10”的a元素的尺寸大小 跟上面的分析方法一样,可以正确得出结果。

下面开始HTML网页和css样式编写首先创建一个HTML文件,文件名为:www.seozol.cn-首页分页外边距
(margin)与内边距(padding)的使用方法.html注意w3c规定网页html文件名为英文名称), 这样写是梁先国seo站长帮助大家理解代码。

HTML网页如下:
<!doctype html>
<html>
<head>
<title>www.seozol.cn-首页分页外边距(margin)与内边距(padding)的使用方法</title>
<meta charset="utf-8">
</head>
<body>
<div id="content"></div>
<div id="pages">
<a href="http://www.seozol.cn">首页</a>
<a href="http://www.seozol.cn/index_2.html">下一页</a>
共10页120条记录
</div>
</body>
</html>

css内部样式表如下:
<style>
#content{border:1px solid #D01EC2;
width:95%;
min-height:100px;
padding:30px;
margin-bottom:20px;
 
}
#pages a{border:1px solid #9cb12f ;
padding:3px 10px;
border-radius:5px;
background-color: #9cb12f;
color:#fff;
text-decoration:none;
}
</style>
最后网页设计开发展示效果图如下:
最后网页设计开发展示效果图如下:



本文标签:

版权声明:本文:CSS3框模型-外边距(margin)内边距(padding)使用实战教程【从入门到精通】 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部