码迷,mamicode.com
首页 > 其他好文 > 详细

20160728

时间:2016-07-28 15:04:36      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<!-- 版本类型声明 -->
<html lang="en"><!-- 根元素 -->
<head>
	<meta charset="UTF-8">
	<!-- 声明页面的编码格式 -->
	<title>20160722</title><!-- 将页面标题放到页面编码之下,防止乱码 -->
	<meta name="keywords" content="音乐,视频,电影">
	<meta name="descrilition" content="">
</head>
<body>
	<h1 style="text-align: center;">2016-07-28学习日志</h1>
	<hr>
	<h2>CSS盒模型</h2>
	<h3>什么是盒模型</h3>
	<ul>
		<li>由margin/border/padding/content组成</li>
	</ul>
	<hr>
	<h3>margin属性</h3>
	<ul>
		<li>top-right-bottom-left:顺时针</li>
		<li>具体方位单独设置: margin-top|margin-right|margin-bottom|margin-left</li>
		<li>margin: top-right-bottom-left</li>
		<li>margin: top left+right bottom</li>
		<li>margin: top+bottom left+right</li>
		<li>marign: 一个值代表四个方向上一样</li>
		<li>margin: 20px auto意思是上下两个方位的外边距为20px,左右方向上实现居中</li>
		<li><strong>竖向margin的叠加</strong></li>
			<ul>
				<li>margin在横向上是加法,但在竖向上却会产生叠加,并会取上下间距的其大者生效</li>
			</ul>

		<li><strong>margin对行标签的影响</strong></li>
			<ul>
				<li>行属性标签设置margin时,横向起作用,竖向无效</li>
			</ul>
		<li><strong>margin-top的bug</strong></li>
			<ul>
				<li>当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,有些浏览器会把内层元素的margin-top作用于父元素</li>
				<li>解决方法:浮动,display:inline-block,</li>
			</ul>
		<li><strong>IE6下的横向双倍margin bug</strong></li>
			<ul>
				<li>IE6会在特定的条件下,将设置的横向margin值变成双倍,条件</li>
					<ol>
						<li>元素必须浮动</li>
						<li>元素必须具有横向的margin即margin-left,margin-right</li>
						<li>原色是块元素</li>
						<li>必须是IE6</li>
						<li><strong>解决:display:inline;</strong></li>
					</ol>
			</ul>
	</ul>
	<hr>
	<h3>padding属性</h3>
	<ul>
		<li></li>
	</ul>
	<hr>
	<h3>border属性</h3>
	<ul>
		<li>solid/dotted:点线/dashed:虚线</li>
	</ul>
	<hr>
	<h3>display属性</h3>
	<ul>
		<li>block/none:元素隐藏/inline/inline-block</li>
	</ul>
	<hr>
	<h3>标准模式与怪异模式</h3>
	<ul>
		<li>怪异模式是在IE6及更早的IE版本下的和模型所占的空间总宽度=内容+外边距</li>
			<ul>
				<li>box-sizing:content-box;采用标准模式解析,是默认模式</li>
				<li>box-sizing:border-box;采用怪异模式解析</li>
			</ul>
	</ul>
	<hr>
</body>
</html>	

  

20160728

标签:

原文地址:http://www.cnblogs.com/handsomehan/p/5714731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!