文章目录
1、margin
margin就是盒子和旁边盒子的间距
2、性质
- 1、margin属性的塌陷现象。在标准文档流中,竖直方向的margin不叠加,以较大的为准。
举例
<!DOCTYPE html>
<html>
<head>
<title>margin塌陷现象</title>
<style type="text/css">
.p1{
width: 200px;
height: 100px;
background-color: orange;
margin-bottom: 20px;
}
.p2{
width: 200px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
</html>
本来p1和p2选择器上下间隔为50px,但是实际上只有30px(竖直方向的margin不叠加,以较大的为准)
- 2、盒子居中
margin:0 auto
margin的值可以为auto,表示自动。当margin-left、margin-right都为auto时则居中
<!--左侧的margin尽可能的增加,则盒子往右靠-->
margin-left:auto;
<!--右侧尽的margin可能的增加,则盒子往左靠-->
margin-right:auto;
注意:
- 1、使用margin:0 auto属性的盒子必须要有明确的width属性值(不然没效果)
- 2、margin:0 auto;的居中只有在标准文档流的盒子才有效果(浮动,绝对定位和固定定位的盒子使用margin:0 auto无效)。
- 3、margin:0 auto;居中的是盒子自己,而不是盒子里的内容居中 居中文本使用text-align:center;属性
也就是当一个盒子浮动了、绝对定位了、固定定位了、都不能使用margin:0 auto;居中
- 3、p标签默认有margin:16px
- 4、善于使用父亲的padding而不是儿子margin
- margin属性,本质上是描述兄弟和兄弟之间的距离,最好不要用margin属性表达父子之间的距离,所以我们要善于使用父亲的padding,而不是儿子的margin
- 给儿子设置margin,父亲不设置border属性,则父亲跟着儿子改变,如果父亲设置了border则只是儿子改变
举例
一个父盒子和一个子盒子,子盒子设置了margin-top:50
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
}
.box2{
width: 100px;
height: 100px;
margin-top: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
子元素box2设置margin-top,结果把父元素给弄下来
解决
给父元素设置border后就达到了效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
border: 2px solid red;
background-color: orange;
}
.box2{
width: 100px;
height: 100px;
margin-top: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
3、margin 属性ie6兼容问题
1、双倍margin bug,
当出现连续浮动元素,携带和浮动方向相同的margin时,队首元素,第一个元素会出现双倍的margin。(eg:float:left,并且margin-left:时最左侧的margin是margin属性值的2倍)
解决方法
- 让浮动方向和margin方向相反。(要养成这个习惯)
- 使用hack(不建议):单独给队首的元素,写一个一半的_margin
2、ie6的3px bug
儿子盒子右浮动,然后margin-right:10px;显示效果的13px;
解决方法:
不用管,根本不允许儿子踹父亲,如果出现了说明代码写的不标准。
2、常用属性
1、行高(line-height)
- css中,所有的行,都有line-height(行高),就是行的高度。盒模型中盒模型的padding,不是直接作用在文字上而是作用在行上(作用在盒子上才有效果,作用在文本上没效果)
- 文字在自己的行里如果行高减字体大小能平分则居中,不能平分则底部多1px.(工程师有个约定,行高和字号一般都是偶数,这样文字就能居中)
- 单行文本的居中:行高=盒子高(只适合单行文本)
- 多行文本的居中:设置padding
2、文本属性
1、常用属性值
font-weight:700;//字体加粗
font-family:"微软雅黑","宋体";//文本字体,如果用户电脑没有微软雅黑字体,则用宋体,备选字体可以有无数个
text-align: center;//文本对齐方式
font-weight:normal;//字体不加粗
font-style:norrmal;//字体不倾斜
font-decoration:none;//没有下划线,没有删除线
2、文本大综合属性
字体权重,字号行高和字体一起设置
格式
字体粗细可以省略,必须有字号和字体。
Font 字体综合写
Font: [字体权重] 字号/行高 字体;
举例
font: 14px/24px "宋体";
等价于
font-size: 14px;//字体大小
line-height: 24px;//行高
font-family: "宋体";//字体样式
========================================
font: 400 15px/15px "宋体";
等价于
font-weight:400;//字体粗细:400,正常 700 加粗
font-size: 15px;//字体大小
line-height: 15px;//行高
font-family: "宋体";//字体样式
=========================================
3、设置字母字体
<!--字母字体为Arial 汉字为微软雅黑 备选字体为宋体(在设置字体属性的时候要将英文字母字体,放在最前面,这样所有的中文就不能匹配英文字体,将自动变为后面的中文字体) -->
font-family:"Arial","微软雅黑","宋体";
页面中我们只使用:微软雅黑、宋体、黑体。
所有的中文字体都有英语别名,也可以通过英语别名设置
3、行高百分比表示
font: 14px/200% "宋体";
等价于:
font: 14px/28px "宋体";
4、首行缩进
/*首行空2个汉字的格 indent:"缩进"的意思 em就是汉字的距离单位*/
text-indent: 2em;
3、颜色
css里面可以简写
color:#fff;
等价于
color:#ffffff;
注意:在HTML中不能简写