css06_margin和文本属性

最新推荐文章于 2022-10-26 12:07:27 发布

Luuuzi

最新推荐文章于 2022-10-26 12:07:27 发布

阅读量245

点赞数

分类专栏： web 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_36366618/article/details/120335552

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

1、margin
2、常用属性

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中不能简写

Luuuzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css06_margin和文本属性

文章目录1、margin2、性质3、margin 属性ie6兼容问题1、双倍margin bug，2、ie6的3px bug2、常用属性1、行高(line-height)2、文本属性1、常用属性值2、文本大综合属性3、设置字母字体3、行高百分比表示4、首行缩进3、颜色1、marginmargin就是盒子和旁边盒子的间距2、性质1、margin属性的塌陷现象。在标准文档流中，竖直方向的margin不叠加，以较大的为准。举例<!DOCTYPE html><html>&
复制链接

扫一扫