web前端基础-css

前言----- 继续努力

使用css完成首页页面的优化

什么是css？

       就是对html进行美化，好比化妆前后的差距。

HTML的块级标签

       

标签：默认独占一行，跟同级兄弟块竖直排列

       标签：默认同在一行，跟同级兄弟块横向排列

        块级标签只有结合css样式才有意义！修饰div标签一般用style属性并使用样式，不赞成用align属性

css的语法格式

   最好写在标签下

css的类别选择器

      元素选择器：span{width:100px; height:50px} 

      ID选择器：span{width:100px; height:50px}

      类选择器：

css的其他选择器

    属性选择器：         

     后代选择器：如下

    子元素选择器：如下

    This is 
    儿子
    
        孙子
    

  

     伪类选择器：

 

css的引入

    行内嵌入式： 

    嵌入式：

    
        
    
    
        哈哈哈
    

   链接式：

    导入样式： 

     样式优先级：遵循就近原则（以修饰的标签为基准）行内样式>id选择器>类选择器>元素选择器

css的块级标签的浮动

     属性float：使块级元素脱离文档流进行浮动

           （left：向左浮动；right：向右浮动；）

             浮动原理：脱离文档流之外，不占用文档流的空间

     属性clear：清除浮动

             both：两边都不允许浮动

             left：左边不允许浮动

             right：右边不允许浮动

css属性display

      display: none/不显示

      display:block/作为块级元素显示，相当于

标签，

      display:inline-block/作为行内块元素，相当于标签

      display:inline/默认，作为内联元素，元素前后没有换行符，没有宽和高的效果

使用div+css进行注册页面的优化

盒模型        

    margin：外边距（可以为负值）

                   margin-top：上外边距；margin-bottom：下外边距；margin-left：左外边距；margin-right：右外边距；

                   margin:10px;                     上下左右都是10px

                   margin:10px  20px             上下10px，左右20px

                   margin:10px  20px  30px;   上10px，右20px，下30px，左20px

                   margin:10px  20px  30px  40px;  顺序上右下左

    padding：内边距（同上）

    border：边框

                    border-width:边框宽度

                    border-color:边框颜色

                    border-style:边框样式（实线solid）

盒模型定位

      属性position：定位属性

                             absolute：绝对定位(top、right、bottom、left),以包含框最外层的包含框为基准进行偏移

                             relative：相对定位，相对于原来标准流的位置进行定位

                             fixed：固定定位，以浏览器为窗口进行定位    

            （盒子在标准流的定位：行内元素水平方向：margin-left+margin-right；块级元素竖直方向：margin-top 和                                        margin-bottom哪个值大取哪个；盒模型嵌套：子块的margin以父块的内容为参考）