直观点讲就是用外边距把box撑成居中。
margin也可以用顺时针的方式以一个语句定义四个外边距的大小
margin有一个auto属性用来设置浏览器边距,只能用在宽度上,不能用在高度上。
可以看到现在box实现了水平居中。
margin和padding一样可以简写。
margin负值可以让边框与浏览器合并。
margin为0的时候,box与浏览器还是有一段距离的,并没有完全贴边。
而想要贴边的话,可以给body单独一个标签选择器,令其margin=0,再让box类的margin-left=0.
以margin-left为例,给正值,box就向右边走,而给负值的话,box就向左侧走。我们管正值叫正方向,负值叫反方向。
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
一个小练习 :制作下面的菜单效果:
效果:
发现中间的线似乎粗了点,这个问题是上一个格子的底边和下一个格子的顶边重合导致的。
这时候就要应用到margin的负值了,在选择器中加入下面这条语句
外边距合并指的是,当两个垂直外边距相遇时,长的外边距会将短的外边距替换。
一个例子:
建立两个盒子之后,我们想设置margin好让两个盒子分开。
我们想让两个盒子分开的更大一点,于是调整第二个盒子的顶部外边距
解决方法如下:
CSS简介
CSS是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
选择器的就是根据不同需求把不同标签选出来。
基础选择器由单个选择器组成包括标签选择器,类选择器,id选择器和通配符选择器
标签名{
属性1:属性值1
属性2:属性值2
属性3:属性值3
...
}
.类名{
属性1:属性值1
...
}
多类名使用 在标签class属性中写多个类名用空格隔开
#id名{
属性1:属性值1
...
}
* { //通配符选择器使用"*"定义,表示选取页面中所有的元素(标签)
属性1:属性值1
...
}
文本缩进:
text-indent: 10px/2em
给定缩进长度或em相对单位一个文字的大小
行间距:
line-height: 26px
详情可参考
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ w3c