css学习与总结

布局标签之间的比较 

        昨天刚学完用table标签和frameset框架标签的页面布局，今天又学习div+css的页面布局。感觉计算机技术就是这样，一个简单的页面布局都是这样可用多种方法，并且三种方法对于一些简单基本的布局都能实现，且各有特点。                                                    1、TABLE表格布局。 
            优点：布局容易、快捷、兼容性好。 
            缺点：改动不便，需重新调整，工作量大。 

        2、DIV+CSS。 

            优点：布局灵活、改动方便。 
             缺点：需考虑平台的兼容性，对制作人员技能要求转高。                                                                                                                3、https://blog.csdn.net/qq_17614015/article/details/51364222   讲述了frameset和div布局的优缺点                                           注：最后相比较而言，个人觉得以后开发直接熟练一种div的就行了，如果用到table和frameset话现学也比较好上手

div布局需要会的六点 

        实际上还是由HTML的div区域标签来布局区域的相对位置，对于掌控总体的布局，需要理解会用以下四点：                                       1、div嵌套技术的使用（尽量把界面先大体划分为几个模块 ，然后一个模块里面尽量都是同一类的小模块  。                               2、使用 css浮动技术：：float属性： left  right：浮动在桌面的右边 。                                                        
             3、clear属性： both：两边都不允许浮  left：左边不允许浮动       right：右边不允许浮动  。                                                                     <!-- 为避免后面不在同一行的模块隐在浮动块下，先要解除浮动 -->
                          <div style="clear: both;"></div>                                                                                                                                             4、合理的设置每个区域所占宽和高的比例 （通过设置line-height=div的height使文本居中，因为原始行高默认为字体的高度，且字体永远会在不同的行高中居中，设置好line-height放在div中文本就会居中）。                                                                       5、css盒子模型（万物皆盒子）通过padding属性调整内边距，即盒子内部的内容在当前盒子内的位置。margin属性调整外边距，即调整并列同级盒子之间的距离相对位置。                                                                                                                                 6、css绝对定位：position: absolute;top: 200px;left: 300px;使用这条语句控制当前盒子相对于桌面左边和上边的空距离。
            浮动的元素会脱离正常的文档流，在正常的文档流中不占空间,因此
                 a、需要时可用来设计合色（浮动块不占空间，后面的非浮动标签会向前挪，隐藏在浮动块下面）
                 b、通过浮动使多个div布局在同一行（div不自动换行，span反之）
                 c、使用浮动可使得文字环绕在div区域边上

table布局也需要会两点

       1、table嵌套,先把整个界面按行分为几个模块，就是一个几行的表格，看集体每个模块的内容来定某行分为几列。把一个模块中都是相同类型的小模块行嵌套一个table标签再细分为几行几列。                                                                                                     2、colspan列单元格合并，rowspan行单元格合并。在同一个table标签中出现大小不同的内容区域，必定要合并单元格。

frameset布局掌握三点 

       1、frameset嵌套  。                                                                                                                                                                           2、rows=“x%” cols=“x%” 设置区域大小  。                                                                                                                                       3、  <frame src="ccc.html"  name="rightFrame"/>     指定区域对应的html（可重新编辑布局）和name属性方便后面指定链接跳转到哪一个frame。   

div布局决定网页骨架，css如何化妆渲染

css将html内容布局和美化进行分离

css常用选择器：ID选择器：#id名                类选择器：.类名             元素选择器：标签名字

<style type="text/css">
		    div{
				color: blue;
			}
			#div1{
				color:red;
			}
			.fruit{
				color: greenyellow;
			}
			.vegetable{
				color: pink;
			}
		</style>

css引入方式：

1. 行内样式：在标签内部定义style
2. 内部样式：在head中定义style标签
3. 外部样式：<link rel="stylesheet" href="网站首页.css" type="text/css" />引入外部css文件

css的扩展选择器：

1. 选择器分组：中间用逗号隔开
2. 后代选择器：中间用空格隔开
3. 子元素选择器：>号隔开
4. 属性选择器：中括号隔开
5. 伪类：只针对a标签使用

css优先级：

1. 就近原则，靠近div的优先
2. 精确度：行内样式>id选择器>类选择器>元素选择器

css属性   ：   
    https://www.cnblogs.com/whatisfantasy/p/6168416.html      常用css属性及其用法