CSS 常用的属性

1.颜色属性

    <style>
        p{
            color: red;      
            color: #ffff00;  用16进制表示
            color: #ff0;     两个重复的写一个，与上面等同
            color: rgb(255,0,0);
            color: rgba(255,0,0,0.5);  增加透明度
        }
    </style>

三种方式：red,#FFFF00,rgb(255,255,255)

2.字体属性

    <style>
        p{
            font-size: 50px;      大小
            font-family: 宋体;     样式
            font-weight: 900;     粗细
            font-style: oblique;  斜体
        }
    </style>

 3.背景属性

    <style>
        body{
            width: 800px;
            height: 800px;
            background-color: blueviolet;
            background-image: url("1.jpg");
            background-position: left center;
            background-repeat: no-repeat;
        }
    </style>

注意：记得要添加宽度和高度，不然出错，我们一般用div来设置背景

4.文本属性

    <style>
        div{
            width: 700px;
            height: 500px;                 div的宽高
            font-size: 30px;　　　　　　　　 文本字体大小
            text-indent: 150px;　　　　　　　首行缩进
            background-color: blueviolet;  div的背景色
            text-align: center;　　　　　　　文本居住对齐
            line-height: 50px;　　　　　　　 文本的行高
            letter-spacing: 100px;　　　　　文本每个字符加空格
            word-spacing: 100px;　　　　　　文本每个单词加空格
            text-transform: capitalize;　　文本首字母大写
            direction: ltr;　　　　　　　　　文本从到右排列
　　　　　　　text-decoration:none           文字下划线

        }
    </style>

5.边框属性

    <style>
        div{
            border-style: dashed;
            border-color: red;
            border-width: 5px;
            border: dashed 5px red;  简写
        }
    </style>

6.列表属性

    <style>
        ul{
            list-style: circle; 空心圆圈
            list-style: none;   无样式
            list-style: decimal-leading-zero; 数字 01
            list-style: disc;  实心圆圈
            list-style: upper-alpha; 字母 A
        }
    </style>

7.display

    <style>
        p{
            background-color: aqua;
            display: inline;         #块级变内联
        }
        span{
            background-color: aqua;  #内联变块级
            display: block;
        }
        ul{
            display: none;          #消失，可以实现图片轮播
        }
    </style>

 8.盒子

内边距会影响盒子的大小，外边距不会影响盒子的大小,需要设置

练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒 子 移到大盒子的中间

修改外边距：

    <style>
        body{
            background-color: green;
            margin: 0px;            body距离html会有一些像素，需要将body的外边距设置为0，可以解决body与html的缝隙
        }
        .outer{
            width: 300px;
            height: 300px;
            border: solid 1px transparent;   #如果不设置边框，会出现边界塌陷
            background-color: blue;
            padding-top: 100px;
            padding-left: 100px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>

修改内边距：

    <style>
        body{
            background-color: green;
            margin: 0px;
        }
        .outer{
            width: 200px;
            height: 200px;
            border: solid 1px transparent;
            background-color: blue;
            padding-top: 100px;
            padding-left: 100px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

margin collapse（边界塌陷或者说边界重叠）

　　外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场

        1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

　　　2父子div：如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin ；

上述练习效果图：

 

9.float

标准流：div块级元素自上而下排列，这种方式就是按标准来的流。如何在一行中显示多个块，这就需要用到了float，来脱离标准流。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

        .div3{
            width: 150px;
            height: 150px;
            background-color: red;
            float: left;
            clear: left;
        }

float:设置好float后， 当前的div块会漂浮起来，如果上一个div也设置了float且方向相同，当前div块会跟在上一个div 后面。如果下一个div是标准流，则下一个div会上移到当前div位置，如果下一个div不是标准流，也设置了float且方向相同，当前div块会跟在上一个div 后面。

clear:左边，右边不允许出现浮动元素，这个规则只能影响使用清除的元素本身，不能影响其他元素。

clear : none | left | right | both

10.position

　　1 static，默认值 static：无特殊定位，对象遵循正常文档流。

　　2  position:relative

     　　 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。（相对于自身偏移）

      　　absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative，就可以使用 top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置，只是视觉上相对于它在文档中的原有位置移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对定位后，其参照物是以离自身最近元素(父类元素)是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。（相对于上辈偏移，没有上辈就是相对于html）

　　3  position:fixed

　　　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。