CSS基础学习

一、CSS简介

　　　　 css是一种网页渲染技术，把文档结构和表现形式分离，使得网页更加的清爽。

  　　      css的必要条件：渲染特定的html标签。

　　　　div、span等容器：

　　　　　　div可以称为层或者块状元素，和p标签、h等标签具有一样的特点：单独占一行。

　　　　　　span称行内元素，和a标签、font标签、img等标签具有一样的特点：可以在一行中显示。

　　　　但是呢：css学习完后，没有绝对的“行内元素”和“块状元素”，可以通过display属性来进行转换【inline（行内）与block（块状）】

二、css写在哪呢？

　　　　1:.css可以写在标签内部的style属性中，这种称为内联样式。

    
        
        
    
    
        
            一个字
        
    

　　　　2.css可以写在hear下的style标签中，这种称为内部样式表。

    
        
        
        
    
    
        
            一个字
        
    

　　　　3.css可以写在单独的css文件中，需要标签来引入css文件，这种称为外部样式表

    
        
        
        
    
    
        
            一个字
        
    

二、选择器

　　1.标签选择器：使用HTML标签名来作为选择器

    
        
        
        
    
    
        
            一个字
        
    

　　　2.类选择器：以 . + 名称来命名

    
        
        
        
    
    
        
            一个字
        
    

　　　　3.ID选择器：以#+名称来命名

    
        
        
        
    
    
        
            一个字
        
    

　　　　4.通配符选择器，直接以*号命名，一般建议写在css开头

    
        
        
        
    
    
        
            一个字
        
    

　　　　5.伪类选择器hover，当鼠标放到对象上面时会出现hover的效果

    
        
        
        
    
    
        
            一个字
        
    

三、css常用属性

　　1.尺寸：

　　　　宽度  width：100px或者100%；

　　　　高度 height：100px或者100%；

　　2.边框

  　　　　 border-top: 2px solid red;

        　　  border-right: 5px dashed black;

         　　 border-bottom: 10px double violet;

         　　 border-left: 3px dotted green;

　　　　　设置上下左右边框的样式不同，solid: 定义实线边框，dashed: 定义一个虚线边框，double: 定义两个边框。 两个边框的宽度和 border-width 的值相同，dotted: 定义一个点线边框

　　

    　　 /*字体*/

        　　  /*颜色*/

          　　color: orange;

          /*字体大小*/

         　　 font-size: 20px;

          /*字体加粗*/

         　　 font-weight: bold;

          /*字体样式*/

          　　font-family: "微软雅黑";

          /*倾斜字体*/

         　　 font-style: italic;

          /*文本居中*/

        　　  text-align: center;

          /*行高：使文本垂直居中*/

         　　 line-height: 700px;

          /*文字装饰线*/

         　　 text-decoration:overline;

          /*背景*/

        　　  /*背景颜色*/

        　　  background-color: yellow;

          /*背景图片*/

         　　 background-image:url(img/img1.jpg) ;

          /*背景图片是否重复*/

         　　background-repeat:repeat-y;

          /*表格边框合并*/

        　　  border-spacing: 0px;

         　　 border-collapse: collapse;

　　/*转换成块状元素*/

         　　 display: block;

          /*背景图片定位*/

         　　 background-position: center top;

         　　 background-position:-30px  200px；

          /*背景图片放缩*/

          　　background-size: 100% 100%;

　　/*去掉列表项目符号*/

          　　ist-style: none;

          /*设置列表的项目符号图片*/

  　　　　 list-style-image: url(img/resizeApi.png);

　　　设置行内块状元素：兼具行内元素和块状元素的特点

　　　　　　display: inline-block;

四、盒子模型

　　注意：行内元素设置宽高无效，由内容大小确定。如span标签等。

　　1.外边距 margin

　　　　margin：50px； 上下左右各外边距都为50px；

　　　　单独设置：

　　　　　　margin-left: 15px;

         　　　  margin-right:30px ;

         　　　  margin-top: 50px;

                      margin-bottom: 20px;

　　2.内边距 padding

　　　　padding: 30px; 设置上下左右内边距都为30px；

　　　　单独设置：

　　　　　　 padding-bottom: 30px;

                      padding-left: 20px;

                      padding-right: 30px;

                      padding-top: 10px;

　　3.盒子模型实际高度=(margin-top)+(border-top)+(padding-top)+height +(margin-bottom)+(border-bottom)+(padding-bottom)；

　　   盒子模型实际宽度=(margin-left)+(border-left)+(padding-left)+width+(margin-right)+(border-right)+(padding-right)；

　　　　　注意如果设置了box-sizing: border-box;，盒子宽度和高度就包含了border和padding，不再使用上面的公式计算高度和宽度。

　　

　　盒子模型外边距合并情况1：

　　　　1.两个div嵌套

　　　　2.两个div都没有设置边框

　　　　这样会使margin值合并，以margin值大的为准

　　实例：

　　　　首先设置存在边框效果：

效果图：

　　取消边框就会出现margin值合并，margin以大的为准：

效果图：

　　当里面的div的margin-top大于外面的div时，没有边框，margin会以大的值为准。

　　解决这种问题的方法：

　　　　　　　　　　　1.选择避免这种情况。

　　　　　　　　　　　2.在父级div上添加padding-top=“xx px”；

盒子模型外边距合并情况2：

　　　　　　1.当两个div 垂直排列时，如果div1有 margin-bottom ，div2有margin-top，这时也会发生边距合并，并且以 较大的值为准。

　　实例：

　　上面的div设置了margin-bottom为50px，下面的div设置了margin-top为30px，按理它们之间的间距应该为80px，但是发生了间距合并，以margin值大的为准，所以它们的间距为50px。

　　　　该问题无法解决，只能去避免，找准参照物就可以更好的实现效果。