shenzhen1225

## 知识点的总结


    1.html 结构
    2.标签
        块标签： 特征
                 div  p  h1-h6 ul li ol li dl dt dd table  form
        行标签：特征
                 span  em i strong b img a  input  select option textarea
    3.a标签  1）超链接  2）锚链接
                属性  href  链接地址

## 浮动的作业

![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJYCAYAAABy5h8aAAAgAElEQVR4AezdUWhd150/+qXr4GKTYA0uCTU1lgl4oFBGGeel5YIVfB+bO7ovgRYuUV5cOi//k8nbMEMVGPo0vlHgz38Yv1SBS0v9UuUmr6HyS/oSzcgMzCWGwQoODhNG/GVcbBpqzp/fOVr2PkfnyMeSjnTW3p9d1H3OPmvvvdZnWZH19VprT7Xb7Xay1Vdgaqq+bdMyAgQOX8CPjMM3d0cCBAgQIEDgmQSmkt+BngmsgYXbSQxSYrf/byVWWp0JECBAgAABAgQIECBAgAABAgSaIyDAak5fa2nTBGZnU5qba1qrtZcAAQIECBAgQIBAMwW2UkobIzR9dYQyihCYQAEB1gR2iioR2LPA9HRKS0sprayktLCQ0vJySltbKc3P915ycTGlmAo26KvVelJ21HJPzvCKAAECBAgQIECAAIHDFohQKv4av7zLjRcqZaa3X/cXX0ypMwMzZmH2fy31F/aewOEKTFkD63DBD/1u1sA6dPIjvWEEVjMzvSOv1te7VYoRWXlbXU0pwq4IqCLgii3Oi/Ar9vnYqOXyde3rL2ANrPr3sRYSIECAAIHCBRq3BlaETjHy6oOU0s9TSvG+f4tgKwKo7V8NOvtXUkq/TClFsJW3mMARvx7ENSLkii2uHeFY7POx7Y9K3VkDq8yee67Maqs1AQIDBWKkVYy+qm7x/uc/7wZTG9tjinPIld9H+Qi/qoFWHBu1XPV+XhMgQIAAAQIECBAgcHgCObCKAGvYFgHW9q8CnSLxb9vntoOqaoAVZWI010zlQvF5NdCqfOQlgcMUEGAdprZ7ERi3wKDpgnk0VYy4ylsEXdXwKgdVMe2wuo1arnqO1wQIECBAgAABAgQITJZABFDVACvXrhpUxbH4t/DqsRxo7TY1MV/LnsCYBQRYYwZ2eQKHKhCLtleDqrh5Xsg9TyWMY9XX8T5G

## css样式--浮动---补充
   # 浮动的补充（做网站时注意）  #

![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAMBCAYAAAB2tDD8AAAgAElEQVR4Aey9DXgV1b3v/90hREQBXyvRCAFE3noo5xQqsVoJEXyrEMXjSdp72igqwum14NXecGp9q73Jo/5FPecqvqB4evskp8coobVWMQa1lXD03Ks8hYAYCBIEa6uSAGIIe/+f35pZM2tmz35LdsLeyXd8tjOz1m/91m99ZrKZ714vE/riiy8i4EYCJEACJEACJEACJEACJEACJEACSRAInXbayRSRSYDKepNQ1reADSABEiABEiABEiABEiABEsgAArmhENVFBlyH3g+Bl7n3GbMGEiABEiABEiABEiABEhgABHKRhIiMRNhZme33QugYXkL+UJHtdw/jJwESIAESIAESIAESIAGXQG68DiotHv021JQuwGw5ivgvYszAe642/aIxAsunPz1mCMwgARIgARIgARIgARIgARLIWAK5CBAXWjzqPEs0WkLAPM7YVjGwaAI914bRPmOkyD3idnCHnGN9X/V3MRnSfzgx+DCZBEiABEiABEiABEiABLKZQK4/eP2gL+laMEpaOBxGOGwrkT4UJP74eJ75BCwBGUJOjnxyAFtUOeJRicyAXy8yv2mMkARIIJ0E+DWQTpr0RQIkQAIkQAJ9RsAjIr0CMgIZhXj06FElJs8442s49bRTcdxxecjLG9xnAbKi7CPQ2XkEX33Vib/+5a/45JNPVU/koEGD5GcJaCEp95o+zr4WMmISIAESIAESIAESIAESGLgEQl8741SnX1GLSNlLL6QIyBHDh2PsuDEYPHgwvjx0CJ1HjiASCQ9cYmx5QgKhUA7yBg/G8UOH4siRI9jRshPt7R0QISm9lFo86n1ChzQgARLonwTYE9k/rytbRQIkQAIk0O8JOCLSFZAyjDWiBOQpJ5+MMWML0dnZiS+/PNTvYbCB6Sdw/PFDkZeXh507Wv

## css样式--浮动（下）
  ** 性质3：浮动的元素有“字围”效果**
来看一张图就明白了。我们让div浮动，p不浮动。

![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBQAAAK4CAYAAADEEa4zAAAgAElEQVR4Aex9B5xU1fX/903Z3nd22WUXFpYO0rEgoGCwd2OLLVHAlpgYY4pGE2NN8ovxn0QTDRoTTezGEmMNKgIiIjYsgLAgfXsvs1Pe/3POfXfmzcybto0F7vvs7Lvv3nPOPff7bj3vFm3VqlU61KUQUAgoBBQC+xyB6upqlJeXw+/391gXXbeu0nfs2AGbzYZhw4bFlS9lyHsiypB8ku3xeCLIreRY+UUwxvCw4rfyiyFCBSkEAghommbpDniaHLFow8OozNntdqSnpyMjIwNOp5PLIYmTtFZ36Sfp5LO8m9RJyEl8PeVNKAJFpBBQCCgEFAIDgoBVXW7lx8oYTZuGYBtH/uH04c/J0mhut9u69zkgkKhIFAIKAYWAQmCgEaCBd7TBd7L+Zt0lr/ku3WY66TaH6RBNUcAvRssUoJGC1F0hMIgRoPza0dGBuro61jInJ4eNDPQgO3FkeJAX+Ul/M430k3czvZVb+qm7QkAhoBBQCOyfCITX9zIV0fxlON3NNGY304TaF0AGB6KJoAuTEy5XPmsdHR0xum0cpfqnEFAIKAQUAoMcgWQH2Vb0Vn6UbLO/2R0eJiEiGvrRbIX29nZ0dXXB6/XGlCN5zXdzXGa3mYbcPQ0Ll6OeFQL9iQAZDRoaGuB2u5GdnR2YqUBxyk6cvEfzk/6STt4T0TsZ2kTkKRqFgEJAIaAQ6FsEotXT0fxl7BQej4Zow2no2eFwIC0tDZmZmeyWBm4rWhlfuCxlUDAjo9wKAYWAQmA/RCDWgDo8OdFo4/mHh4c/UzzkJ3/Nzc2or6+H5vfDmZICvRfLOMLToJ4HMwJhnz0oX0R69TgBJCp86qYQRt9GNP6LLtxCEQsv4g+JI4Im6MGuwGPAwZNL5VMw/dJ

## css样式--浮动（中）·
    # 浮动 #
浮动是css里面布局用的最多的属性。

现在有两个div，分别设置宽高。我们知道，它们的效果如下：

![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5UAAAKGCAYAAADanb9SAAAgAElEQVR4AexdB5wURdb/d8/Mptmcl5yjkgVBEUFUBBFPBUU8IyjqeYcefvfpqZ/hPPXu1NNTUYEznXqK3CnmACpBJEjOYQlL2pxmZ3Zif79X1d3TMzuzO7OJBap/v92prqr3qurflV69V1VSVk66gigfxUcE9E+Bx+sDf2evUXIS0c8oBCReWkkGzCYZAHnIoPfWeGS0UkKtURiRhkBAIHBqIKD2e6dGZkUuBQICAYGAQOC0RyBqyS8yRMyRRfPHUnw+kiXh8fAc5eTkICMzHbGxsYiJiZqdn7FwnfYIuFweOJ1OlJaUobCwmK1CmM18UUKShcB32lcAUcDTAgEaAsQTJQKie4sSMBFdICAQEAi0TQQa3Z2fAQuMUjSaSqNAmZyciO49usFiMcNht8PpcQNittE2W0BbyZUsI9ZsQXxCAtxuD/bvy0dVlQ1ms8SUli0tWApNZVupCCIfrYGA6I5bA+UI02j0LCRC/iKaQEAgIBAQCJyyCNQZIlpaAG0hTWXEQiUzcVV8TEOZnp6CLt26wu12MYHylP2KIuMnDQESLC2WGBzMP4CyskpVsGxZU1ghVJ60zy0SbgEEmiY0CnVjC3yS8CzrzBjCRxUhAgGBgEBAIHA6ItD4gUCnbC5hs4WEyijsVblAGZcQh85dOqPWYYejtvZ0/OqiTK2AgM1mQ3wcr0v22j2otdfCbKGJrt50WiEXIgmBwKmBQGQCpBAUT42vKXIpEBAICAQEAmceAtGM0YFzYZ3SIAzqMZpL0GyGDxKRppLMXn2Kws7m6d+/D0vWVmNrhuQFizMdgURrIoNg+/ZdTJ6UJQktZQYrNJVnem07tcofXpDUh5dTq0Bncm710f9MBkGUXSAgEBAICAS

## css样式--浮动（上）
# 标准文档流 #
宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
# 标准文档流的特性 #

我们来看看标准流有哪些微观现象。

**（1）空白折叠现象：**

无论多少个空格、换行、tab，都会折叠为一个空格。

## 定位
#     CSS中的绝对定位与相对定位 #

**层级关系为：**

div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
div—————————-没有设置为定位元素，不是参照物
div———————- position:relative 参照物
div box1
div box2 ——–position:absolute; top:50px; left:120px;
div box3

## css盒模型（下）
# 水平格式化 #
非替换元素的水平格式化
水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。

其中margin-left，width，margin-right可以设置为auto。
主要有下面几种情况：

一个属性设置成auto
如果三个属性中某个属性设置了auto，其余两个为特定的值，那么设置auto的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的width。

## css盒模型（上）
# 详解CSS盒模型 #

本文主要是学习CSS盒模型的笔记，总结了一些基本概念，知识点和细节。

**一些基本概念**

HTML的大多数元素都是块级(block)元素或行内(inline)元素

**块级元素**

## CSS3
**text-decoration**
**语法：**

text-decoration: none | underline | overline | line-though

none: 无文本修饰（浏览器默认初始值）

underline : 表示有下划线

overline : 表示有上划线


	1.html 结构
	2.标签
	块标签：特征
	div p h1-h6 ul li ol li dl dt dd table form
	行标签：特征
	span em i strong b img a input select option textarea
	3.a标签 1）超链接 2）锚链接
	属性 href 链接地址
	# 浮动的补充（做网站时注意） #

	![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAMBCAYAAAB2tDD8AAAgAElEQVR4Aey9DXgV1b3v/90hREQBXyvRCAFE3noo5xQqsVoJEXyrEMXjSdp72igqwum14NXecGp9q73Jo/5FPecqvqB4evskp8coobVWMQa1lXD03Ks8hYAYCBIEa6uSAGIIe/+f35pZM2tmz35LdsLeyXd8tjOz1m/91m99ZrKZ714vE/riiy8i4EYCJEACJEACJEACJEACJEACJEACSRAInXbayRSRSYDKepNQ1reADSABEiABEiABEiABEiABEsgAArmhENVFBlyH3g+Bl7n3GbMGEiABEiABEiABEiABEhgABHKRhIiMRNhZme33QugYXkL+UJHtdw/jJwESIAESIAESIAESIAGXQG68DiotHv021JQuwGw5ivgvYszAe642/aIxAsunPz1mCMwgARIgARIgARIgARIgARLIWAK5CBAXWjzqPEs0WkLAPM7YVjGwaAI914bRPmOkyD3idnCHnGN9X/V3MRnSfzgx+DCZBEiABEiABEiABEiABLKZQK4/eP2gL+laMEpaOBxGOGwrkT4UJP74eJ75BCwBGUJOjnxyAFtUOeJRicyAXy8yv2mMkARIIJ0E+DWQTpr0RQIkQAIkQAJ9RsAjIr0CMgIZhXj06FElJs8442s49bRTcdxxecjLG9xnAbKi7CPQ2XkEX33Vib/+5a/45JNPVU/koEGD5GcJaCEp95o+zr4WMmISIAESIAESIAESIAESGLgEQl8741SnX1GLSNlLL6QIyBHDh2PsuDEYPHgwvjx0CJ1HjiASCQ9cYmx5QgKhUA7yBg/G8UOH4siRI9jRshPt7R0QISm9lFo86n1ChzQgARLonwTYE9k/rytbRQIkQAIk0O8JOCLSFZAyjDWiBOQpJ5+MMWML0dnZiS+/PNTvYbCB6Sdw/PFDkZeXh507Wv
	性质3：浮动的元素有“字围”效果
	来看一张图就明白了。我们让div浮动，p不浮动。

	![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBQAAAK4CAYAAADEEa4zAAAgAElEQVR4Aex9B5xU1fX/903Z3nd22WUXFpYO0rEgoGCwd2OLLVHAlpgYY4pGE2NN8ovxn0QTDRoTTezGEmMNKgIiIjYsgLAgfXsvs1Pe/3POfXfmzcybto0F7vvs7Lvv3nPOPff7bj3vFm3VqlU61KUQUAgoBBQC+xyB6upqlJeXw+/391gXXbeu0nfs2AGbzYZhw4bFlS9lyHsiypB8ku3xeCLIreRY+UUwxvCw4rfyiyFCBSkEAghommbpDniaHLFow8OozNntdqSnpyMjIwNOp5PLIYmTtFZ36Sfp5LO8m9RJyEl8PeVNKAJFpBBQCCgEFAIDgoBVXW7lx8oYTZuGYBtH/uH04c/J0mhut9u69zkgkKhIFAIKAYWAQmCgEaCBd7TBd7L+Zt0lr/ku3WY66TaH6RBNUcAvRssUoJGC1F0hMIgRoPza0dGBuro61jInJ4eNDPQgO3FkeJAX+Ul/M430k3czvZVb+qm7QkAhoBBQCOyfCITX9zIV0fxlON3NNGY304TaF0AGB6KJoAuTEy5XPmsdHR0xum0cpfqnEFAIKAQUAoMcgWQH2Vb0Vn6UbLO/2R0eJiEiGvrRbIX29nZ0dXXB6/XGlCN5zXdzXGa3mYbcPQ0Ll6OeFQL9iQAZDRoaGuB2u5GdnR2YqUBxyk6cvEfzk/6STt4T0TsZ2kTkKRqFgEJAIaAQ6FsEotXT0fxl7BQej4Zow2no2eFwIC0tDZmZmeyWBm4rWhlfuCxlUDAjo9wKAYWAQmA/RCDWgDo8OdFo4/mHh4c/UzzkJ3/Nzc2or6+H5vfDmZICvRfLOMLToJ4HMwJhnz0oX0R69TgBJCp86qYQRt9GNP6LLtxCEQsv4g+JI4Im6MGuwGPAwZNL5VMw/dJ
	# 浮动 #
	浮动是css里面布局用的最多的属性。

	现在有两个div，分别设置宽高。我们知道，它们的效果如下：

	![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5UAAAKGCAYAAADanb9SAAAgAElEQVR4AexdB5wURdb/d8/Mptmcl5yjkgVBEUFUBBFPBUU8IyjqeYcefvfpqZ/hPPXu1NNTUYEznXqK3CnmACpBJEjOYQlL2pxmZ3Zif79X1d3TMzuzO7OJBap/v92prqr3qurflV69V1VSVk66gigfxUcE9E+Bx+sDf2evUXIS0c8oBCReWkkGzCYZAHnIoPfWeGS0UkKtURiRhkBAIHBqIKD2e6dGZkUuBQICAYGAQOC0RyBqyS8yRMyRRfPHUnw+kiXh8fAc5eTkICMzHbGxsYiJiZqdn7FwnfYIuFweOJ1OlJaUobCwmK1CmM18UUKShcB32lcAUcDTAgEaAsQTJQKie4sSMBFdICAQEAi0TQQa3Z2fAQuMUjSaSqNAmZyciO49usFiMcNht8PpcQNittE2W0BbyZUsI9ZsQXxCAtxuD/bvy0dVlQ1ms8SUli0tWApNZVupCCIfrYGA6I5bA+UI02j0LCRC/iKaQEAgIBAQCJyyCNQZIlpaAG0hTWXEQiUzcVV8TEOZnp6CLt26wu12MYHylP2KIuMnDQESLC2WGBzMP4CyskpVsGxZU1ghVJ60zy0SbgEEmiY0CnVjC3yS8CzrzBjCRxUhAgGBgEBAIHA6ItD4gUCnbC5hs4WEyijsVblAGZcQh85dOqPWYYejtvZ0/OqiTK2AgM1mQ3wcr0v22j2otdfCbKGJrt50WiEXIgmBwKmBQGQCpBAUT42vKXIpEBAICAQEAmceAtGM0YFzYZ3SIAzqMZpL0GyGDxKRppLMXn2Kws7m6d+/D0vWVmNrhuQFizMdgURrIoNg+/ZdTJ6UJQktZQYrNJVnem07tcofXpDUh5dTq0Bncm710f9MBkGUXSAgEBAICAS
	# 标准文档流 #
	宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
	# 标准文档流的特性 #

	我们来看看标准流有哪些微观现象。

	（1）空白折叠现象：

	无论多少个空格、换行、tab，都会折叠为一个空格。
	# CSS中的绝对定位与相对定位 #

	层级关系为：

	div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
	div—————————-没有设置为定位元素，不是参照物
	div———————- position:relative 参照物
	div box1
	div box2 ——–position:absolute; top:50px; left:120px;
	div box3
	# 水平格式化 #
	非替换元素的水平格式化
	水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。

	其中margin-left，width，margin-right可以设置为auto。
	主要有下面几种情况：

	一个属性设置成auto
	如果三个属性中某个属性设置了auto，其余两个为特定的值，那么设置auto的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的width。
	# 详解CSS盒模型 #

	本文主要是学习CSS盒模型的笔记，总结了一些基本概念，知识点和细节。

	一些基本概念

	HTML的大多数元素都是块级(block)元素或行内(inline)元素

	块级元素
	text-decoration
	语法：

	text-decoration: none \| underline \| overline \| line-though

	none: 无文本修饰（浏览器默认初始值）

	underline : 表示有下划线

	overline : 表示有上划线