1.padding是内容和内容的边框之间的空间。
CSS学习2----padding/border/margin
原创
©著作权归作者所有:来自51CTO博客作者韩立伟的原创作品,请联系作者获取转载授权,否则将追究法律责任
2.border是指画在方框的每一边的直线。可以是一边或者任何边的组合。
3.margin是指一个标签和另一个标签之间的间隔。
4.他们都有四个属性:margin-left,margin-right,margin-top,margin-bottom;
padding-left,padding-right,padding-top,padding-bottom;
5.一般用像素定义一个尺寸,如margin-right:20px;
当定义四边时,还有更快捷的设定方式,如下:
margin:10px 15px 10px 25px;
padding:0px 10px 15px 20px;
这四个值的顺序非常重要,分别代表top,right,bottom,left;
eg.
p{
border:1px solid #666666;
padding:10px 10px 10px 10px;
margin:0px;
}
body{
margin:0px;/*★让body的边框紧靠着网页边框。*/
}
6.边框碰撞问题:如果两个边框碰撞,浏览器不会把两个边框的值相加,而是会采用最大的那个边框。
7.<span>xxxx</span>
8.我们常用的块级标签:div、p、h1~h6 、表格、列表。
9.行内标签为:strong、span、img、超链接、各种表单标签。
10.在大多数情况下,CSS对待块级标签和对待行内标签是相同的,
你可以定义样式给文字、颜色、背景等,但是margin和padding比较特殊。
11.块级标签是独占一行的!!!
12.★
使块级标签产生如行内标签一样的效果:display:inline;
使行内标签产生如块级标签一样的效果:display:block;
display还有一个特殊的值none,它可以隐藏样式元素,使他不会在浏览器上出现。
13.在CSS中每个边框有3个属性可以控制:color(颜色)、width(宽度)、style(样式);
style常用的属性:solid(实线)、dashed(虚线)、none、hidden。
(说明:其中none和hidden的作用是一样,它们都完全除去了边框,
none值对于取消单独的一条边框很有用。)
eg.
div{
border:1px solid #444; /*使用border来设置属性*/
border-bottom:none;
padding:10px;
}
14.★可以使用border-方向-width和border-方向-style两个属性来改变边框的宽度和样式。
eg.
border-bottom-style:solid;
border-bottom-width:3px;
15.★技巧性的东西:
《1》。让一个div居中
div{
margin-left:auto;
margin-right:auto;
}
《2》。让一个div自动增长
div{
width:400px;
height:auto;
overflow:auto;
}
16.overflow的3个属性值:
①visible:浏览器的通常的做法,默认使用。
②hidden:隐藏。
③scroll:添加滚动条,不幸的是只要使用这个选项,即使内容很少,滚动条也会出现!
④auto:在需要的时候,自动添加滚动条。
17.注意事项:
★margin是不改变网页的大小的!!
对于一个标签加padding时,会改变网页的大小。
eg.
一个网页的宽度为960px
div{
paddind-left:10px;
width:950px; /*这样网页的宽度始终为960px。*/
}
18.★给网页添加背景图片
div{
background-p_w_picpath:url(1.png); → 默认是平铺。
background-repeat:no-repeat; → 不平铺;(logo用的多)
background-repeat:repeat-x; → 只平铺X轴。
background-position:10px(距左的像素) 30px(距上的像素);
center center;
left bottom;
right top;
832px -128px;
}
上一篇:CSS学习1----基本
下一篇:CSS3学习3----举例

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
margin-left,margin-bottom,margin-top,padding,padding-bottom,border-bottom的说明
margin-left,margin-bottom,margin-top,padding,padding-bottom,border-bottom的说明
padding margin-left margin-bottom margin-top padding-bottom -
CSS中margin和padding的区别
本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件
css margin padding jeecg 外边距 -
(3)盒子:border、padding、margin
盒子模型 边框:border 上:borde...
html css 盒子模型 外边距 内边距