首页 > 代码库 > python--CSS属性操作/下

python--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>
View Code

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
View Code

居中应用:margin:0 auto  

padding(内边距)

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

思考1body的外边距

   边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为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>

‘‘‘
View Code

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  

python--CSS属性操作/下