master

分支 (1)

管理

管理

master

zly
/
node.txt



review----------
	文本样式：
		word-spacing
		letter-spacing
		word-break:
		word-wrap:
		overflow:
			hidden;
			scroll;
		width
		height
		max-width
		max-height
		min-width
		min-height

		元素的隐藏和显示：
			display:
				none:
				block
			visibility:
				hidden
				visible

	列表样式：
		list-style-type
		list-style-position
		list-style-image:url()
		line-height:
	盒子模型：
		盒子=content+padding+border+margin

		box-sizing:content-box/border-box
		1.标准盒子
			width-->content
		2.边框盒子
			width-->盒子=content+padding+border

	盒子样式：
		background:
			-color
			-image
			-repeat
			-clip
			-origin
			-position
			-size:100px 100px;
				  100% 100%
				  cover
				  contain
			-attachment


		border:
			border-radius:20px
			border:1px solid red
			border-image-source:url()
			border-image-slice:number:注意：不加单位，默认单位px

			border-image-repeat:

	表格：
		border-collapse: collapse;
		caption-side: top;

----------------
html4:
	<body>
		<div id="outer">
			<div id="center">
				<div class='header'>
					<div>
						<div>
							span
							span
						</div>
						<div></div>
					</div>
					<div></div>
				</div>
				<div class='center'></div>
				<div class='footer'></div>
			</div>
		</div>
	</body>


html5:
<body>
	<div>
		<div id="center">
			<header>
				<div class='header_top'>
					<section>
						span*2
					</section>
					<section></section>
				</div>
				<div></div>
			</header>
			<article></article>
			<footer></footer>
		</div>
	</div>
</body>


----------
布局：
	默认文档流：
		元素默认所在浏览器中的位置
		从上到下，从左到右
	1.display：
		inline:将块级元素转换为行内元素
		block：将行内元素转换为块级元素
		inline-block：将当前元素转换为兼具行内和块级特性的元素

	2.浮动布局
		float:left/right;

		浮动属性不会遮盖文字
		对行内元素设置浮动，会让行内元素可以设置宽高属性
		对于块级元素设置浮动，独占一行属性失效

		浮动合适停止？
		1.当遇到父级边框时停止浮动
		2.遇到其他浮动元素停止浮动

清除浮动特性：
	clear:left/right/both
	1.在浮动元素之后添加一个块级元素,给块级元素设置清除浮动

	2.给所有浮动元素的父元素设置::after{
		content:'';
		clear:left;
		display:block;
	}