CSS属性操作/下

1.伪类

anchor伪类

跟<a>/</a>有关：专用于控制链接的显示效果

a:link（没有接触过的链接），用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态），用于产生视觉效果。

a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态。

伪类选择器：伪类值得是标签的不同状态：

a ===》点过状态没有点过的状态鼠标悬浮状态激活状态

<style>

    a:link{            #未访问的链接

        color: #2459a2;

    }

    a:visited{         #已访问的链接

        color: #FF0000;

    }

    a:hover{           #鼠标移动到链接上

        color: antiquewhite;

    }

    a:active{          #选定的链接    格式：标签：伪类名称{css代码}

        color: violet;

    }

</style>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       .top{

           background-color: rebeccapurple;

           width: 100px;

           height: 100px;

       }

        .bottom{

            background-color: green;

            width: 100px;

            height: 100px;

        }

        .outer:hover .bottom{

            background-color: yellow;

        }

        注意:一定是outer:hover  控制outer里某一个标签,否则无效

        .top:hover .bottom{

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="top">top</div>

    <div class="bottom">bottom</div>

</div>

</body>

</html>

before after伪类

：before p:before 在每个<p>元素之前插入内容

：after p:after 在每个<p>元素之后插入内容

.item{

    width: 50px;

    height: 50px;

    background-color: #99cc99;

}

p :after{

    content: "hi";

    display: block;

    color: #FF0000;

}

<div class="outer">

    <div class="top"></div>

    <div class="bottom"></div>

<p>hello</p>

</div>

2.line-height 行高　

.item{

    width: 300px;

    height: 300px;

    background-color: #2459a2;

    /*overflow: scroll;  #滚动条*/

    overflow:hidden; #超出部分隐藏

    line-height: 10px;

}

3.外边距（margin）和内边距（padding）

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

padding：用于控制内容与边框之间的距离。

Border(边框)：围绕在内边距和内容外的边框

Content：盒子的内容，显示文本和图像

margin（外边距）

单边外边距属性：

margin：改变位置，不影响元素大小

padding：会改变元素大小

*{

  margin: 0;

}

.item{

    width: 200px;

    height: 200px;

    background-color: #2459a2;

    /*padding: 20px;*/

    margin-bottom: 50px;

    padding: 50px;

}

.item1{

    width: 200px;

    height: 200px;

    background-color: #99cc99;

    padding: 20px;

    /*margin-top: 60px;*/

    /*padding: 20px;*/

}

<div class="item">div1</div>

<div class="item1">div2</div>

margin:10px 20px 20px 10px；

        上边距为10px

        右边距为20px

        下边距为20px

        左边距为10px

margin:10px 20px 10px;

        上边距为10px

        左右边距为20px

        下边距为10px

margin:10px 20px;

        上下边距为10px

        左右边距为20px

margin:25px;

        所有的4个边距都是25px

居中应用：margin：0 auto　　

padding（内边距）

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。设置同margin。

思考1：body的外边距

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有HTML），在默认情况下，body距离html会有若干像素的margin，具体数据因各个浏览器不尽相同，所有body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{

    border: 1px solid;

    background-color: cadetblue;

}

>>>解决方法：

body{

    margin: 0;

}

思考2：margin collapse（边界塌陷或者边界重叠）塌陷只限上下塌陷

1、兄弟div：

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

2、父子div：

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

*{

  margin: 0;

}

.outer{

    width: 300px;

    height: 300px;

    background-color: #99cc99;

    /*margin: 100px 100px;*/

    /*border: 1px solid red;*/

    overflow: hidden;  在父集里面增加overflow：hidden

}

.c1{

    width: 100px;

    height: 100px;

    background-color: #2459a2;

    margin: 100px 100px;

}

>>>解决方法：　　

overflow：hidden；

4.float属性

1.所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流失排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

float：

会判断上一个元素是否浮动，如果浮动，紧贴上一个元素。

否则，与上一个元素保持垂直距离不变

2.清除浮动（推荐）

clear语法：

clear：none| left | right | both

取值：

none：默认值。允许两边都可以有浮动对象

left：不允许左右有浮动现象

right：不允许右边有浮动现象

both：不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会印象其他元素，如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。　

'''

    .clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容；

    content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。

    display: block;               <----加入的这个元素转换为块级元素。

    clear: both;                  <----清除左右两边浮动。

    visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。

                                       visibility:hidden;仍然占据空间，只是看不到而已；

    line-height: 0;               <----行高为0；

    height: 0;                    <----高度为0；

    font-size:0;                  <----字体大小为0；

    }

    .clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神

                                       奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。

之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

<div class="head clearfix"></div>

'''

3.overflow：hidden

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

4.塌陷问题　

container{

    width: 200px;

    height: 200px;

}

.box1{

    width: 200px;

    height: 200px;

    background-color: aquamarine;

    float: left;

}

.box2{

    width: 200px;

    height: 200px;

    background-color:chartreuse ;

    float: left;

}

.footer{

    width: 300px;

    height: 100px;

    background-color: #2459a2;

}

.clearerfix:after{

    content: "";

    clear: both; #清除浮动

}

<div class="container clearerfix">

    <div class="box1">box1</div>

    <div class="box2">box2</div>

</div>

<div class="footer">footer</div>

5.position

static

static默认值、无定位，不能当做绝对定位的参照物，并且设置标签对象left、top等值是不起作用的

position：relative 相对定位

1.参照物是元素之前文档流中的位置，即以自己原始位置为参照物

2.元素不脱离文档流（之前的空间位置依然存在）

3.然后Top、Right、Bottom、Left用百分比宽度表示。

注意：position：relative的一个主要用法：方便绝对定位找到参照物

position：absolute 绝对定位

1. 参照物是最近已定位祖先元素，如果元素没有定位，那么就是（body元素）

2.元素脱离文档流（之前的空间位置依然存在）　

父元素：position：relative

定位的子元素：position absolute

position：fixed 脱离文档流

1.属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

注意：一个元素若设置了position：absolute /fixed；则该元素就不能设置float。

因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是relative却可以。因为它原本所占的空间仍然占据文档流。

脱离文档流的：float position：absolute position:fixed