CSS魔法(二)

# 文档类型<!DOCTYPE>

<!DOCTYPE html> 

# 字符集

<meta charset="UTF-8" />

# 换行标签

<br />

# div span标签

 

 

后代选择器  子代选择器 >

交集选择器 

div.one{

}

并集选择器

 

行内元素和块级元素的区别

块级元素:独占一行 能设置大小

行内元素:不能设置大小   display:inline-block可将行内元素转为块级元素

 

行高 line-height 文字居中

<style>
        div {
            height: 50px;
            width: 200px;
            background-color: pink;
            line-height: 50px;
        }
</style>
<div>我是行高</div>

 权重

  权重值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #ya {  /*权重 0,1,0,0*/
        color: blue;
    }
    
    .yase {   /* 类选择器权重 高于 标签选择器   权重   0, 0, 1, 0*/
        color: green;
    }

    div { 
        /* 权重   0, 0, 0, 1*/
        /* 权重   0, 0, 0, 1*/
        color: red;
    }

    
    div { 
        /* 权重   0, 0, 0, 1*/
        /* 权重   0, 0, 0, 1*/
        color: hotpink!important;
    }


    *  {    0 0 0 0 

    }

    /**  0000
    div 0001
    .one 0010
    #two 0100
    行内 1000
    important ∞*/
    </style>
</head>
<body>
    <div class="yase" id="ya" style="color: orange">亚瑟</div>
</body>
</html>
View Code

  权重相同  则就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*div { 0001 
        color: red;
    }
    div {  000
        color: green;
    }*/
    div p {/* 0001 + 0001  =  0002*/
        color: green;
    }

    p {  /*0001*/
        color: red;
    }
    .feng { /* 0010*/
        color: blue;
    }
    
    /*1. 权重相同  则就近原则*/
     /*2. 权重会叠加0001 + 0001  =  0002*/
    </style>
</head>
<body>
    <div>
        <p class="feng"> 凤姐 </p>
    </div>
</body>
</html>
View Code

透明

div {
            width: 200px;
            height: 200px;
            /*background-color: #000;*/
            color: #fff;
            background: rgba(0, 0, 0, .3); /* red  green blue  alpha  0~1  */
        }

 表格细线边框

<style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
    </style>

 a链接

a:link {color: #FF0000} /* 未访问时的状态 */
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */

 内边距问题

  padding:0px,5px,10px,15px;就是上为0,右为5,下为10,左为15,

  padding的顺序是顺时针方向的

  padding会撑开 带有widht 和height盒子,要记得减去padding值

<style>
    div {
        width: 160px;
        height: 160px;
        border: 1px solid red;
        padding-left: 20px;
        /*非常严重的问题, padding 会撑开 带有 widht 和height盒子*/
    /*    1. 我们要求这个 div 就是标准的 200 * 200   
        2. 但是我们给了padding就撑开盒子了  240 
        3. 问我们怎样能保证盒子 不超过 200 * 200 */ 
    } 
</style>

 外边距

  控制盒子与盒子之间的间距

 盒子居中三种方式

 /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */

/* margin-left: auto;
margin-right: auto; 自动充满*/

/* margin: auto; 上下左右都是auto*/

 外边距塌陷

  外边距合并 尽量避免

 

 圆角边框(border-radius: 150px)

<style>
    div {
        width: 312px;
        height: 312px;
        /*background-color: pink;*/
        margin: 100px auto;  
        /*border-radius: 50%; 让一个正方形  变成圆圈*/
        border: 1px solid red;
        border-radius: 150px 0;  
    }
</style>

 圆角练习

<style>
    body {
        background-color: #ccc;
    }
    .radius a {
       width: 172px;
       height: 172px;
       background-color: #fff;
       display: inline-block;
       margin: 30px;
       border-radius: 50%;
       text-align: center;
       line-height: 172px;
       color: red;
       text-decoration: none;
       font-weight: 700; 
    }
    .radius a:hover {
        background-color: red;
        color: #fff;
    }
    </style>

 

<div class="radius">
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
</div>

效果

 盒子阴影

<style>
    div {
        width: 200px;
        height: 200px;
        /*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/
        /*transition: all 1s;*/
        
    }
    div:hover {  /*鼠标经过div时候的样子。。。*/
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
</style>

浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .one {
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .two {
            width: 320px;
            height: 200px;
            float: left;
            background-color: greenyellow;
        }
        .three {
            width: 320px;
            height: 200px;
            float: left;
            background-color: blue;
        }
        .four {
            width: 320px;
            height: 200px;
            float: right;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>
View Code

 

posted @ 2018-09-15 22:09  ~沐风  阅读(503)  评论(0编辑  收藏  举报