CSS属性操作/下

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