Java学习总结（二十四）——前端：CSS样式设计（CSS引入，选择器，盒子模型，浮动元素）

一．CSS引入方式
1.CSS简介：
（1）CSS(Cascading style Sheets):层叠样式表。用来给html网页设置样式;
（2）当多个选择器对同一个元素进行样式设计时，则该元素的样式为多个选择器叠加的效果（当有冲突时，按照优先级设置）;
2.引入方式：
（1）方式一：行内样式（在html元素的style属性上设置样式）

（2）方式二：页面内嵌样式（在head标签内部嵌入样式）

（3）方式三：引入外部样式文件

例1（演示CSS三种引入方式）：
Html代码：

CSS代码：

#haha{
    width: 300px;
    height: 300px;
    background-color: blue;
}

运行结果：

二．CSS选择器：
1.标签选择器

2.类选择器

3.ID选择器：

4.复合选择器：

5.子选择器(选择父选择器的直接子元素)：

6.后代选择器：

7.伪类选择器(用来设置元素在不同状态下的样式)

例2（选择器的使用）：
代码：

    
        
        
        
    
    
        

            

                

            
            
首页
            

                产品介绍
                

                    安全防护

                    管理效率

                    电脑加速

                    游戏加速

                    等级加速

                    电脑加速

                    账号保护

                    手游助手

                    桌面管理

                    最近文档

                
            
            

                安全咨询
                

                    安全专题

                    管家大事记

                    联合实验室

                
            
            

                在线安全
                

                    电脑诊所

                    申诉举报

                    诈骗信息查询

                    网站安全检测

                    密码安全检测

                    账号安全查询

                
            
            

                活动中心
                

                    兑换礼包

                    赚安全金币

                    专题活动

                
            
            

            

            

            
登录
            

                
            
            


            
        
    

运行结果：

试用下拉菜单：

三．CSS盒子模型（BOX模型）
1.基本组成
（1）border(边框) 
（2）padding(内边距,也叫填充)：元素中的内容与边框(border)之间的距离。
（3）margin(外边距)：与相邻元素或父元素之间的距离。
（4）content(内容)：盒子包含的内容(皇宫)。
2.图例：

例3（盒子模型举例）：

    
        
        
        
    
    
        
皇城
            
皇宫
                
皇帝
            
        
    

运行结果：

例4（盒子模型属性的使用）：

    
        
        
    
    
    
        

            
1
            
2
            
2
            
4
            
5
            
6
            
7
            
8
            
9
        
    

运行结果：

四．CSS浮动（float）
1.浮动元素：float:left|right
2.设置了float属性的元素即为浮动元素，浮动元素脱离了正常的文档流（标准流），不遵循“从左到右，从上到下，遇块换行”的标准文档流的排布方式
3.可以清除浮动：clear:left|right|both
4.规律一：
如果某个元素是浮动元素，那么有两种情况：
（1）这个浮动元素的上一个元素是标准流中的元素，则该浮动元素与上一个标准流元素相对垂直位置不变
（2）这个浮动元素的上一个元素也是浮动元素，则这两个浮动元素在同一水平位置排列(除非两个浮动元素的宽度和超过水平位置总宽度，这种情况下该浮动元素会被“挤”到下一行)。
5.规律二：
（1） 设置了clear属性的元素，主动负责完成清除浮动(移动自身完成目标)。
例5（CSS浮动的使用）：
代码：

    
    
    


    
这是div1里面的内容
    
这是div2里面的内容
    
这是div3里面的内容
    
这是div4里面的内容
    
这是div5里面的内容

运行结果：

【本次总结完】