前端 css 进阶

 

内容目录：

　　1.css盒子模型
　　2.浮动 float
　　3.溢出 overflow
　　4.定位 position
　　5. z-index
　　6.opacity

1.css盒子模型

margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)

(1)margin:
    margin-left margin-right margin-bottom margin-top
    margin:2px 3px 4px 5px;  顺序：上右下左
    margin:10px 20px;   第一个参数：上下  第二个参数：左右
    margin:10px auto;

(2)padding:
    padding-left   padding-right  padding-bottom padding-top
    padding:2px 3px 4px 5px;   顺序：上右下左
    padding:10px 20px; 与margin一样

2.浮动：float

float:right;  float:left;

只要页面布局，就都会用到浮动

浮动带来的影响：
    脱离文档流，造成父标签塌陷

 三种解决方式：
    (a)固定高度
    (b)伪元素清除法
    (c)overflow:hidden
    
使用较多的 ---> 伪类清除法
'''
.clearfix:after {
    content:'';
    display:block;
    clear:both;
}
'''

3.溢出 overflow

overflow:hidden;
文本超出div的长度的时候会将其隐藏

overflow:auto; 加上一个滑条（下方）
overflow:scroll; 加上两个滑条（右边、下方）

4.定位 position

(1) 相对定位：相对于标签本身原来的位置
(2) 绝对定位：相对于已经定位过的父标签
(3) 固定定位：相对于浏览器窗口固定在某一个位置

1.static(静态):
    static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

2.relative(相对定位):
        相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。需要注意的是即使设置了元素的相对定位以及偏移值，
    元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，
    left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

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

3.absolute(绝对定位):
        设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，
    那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭。

    重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
    这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;
    父元素设置position:relative; 然后Top、Right、Bottom、Left用百分比宽度表示。

4.fixed(固定):
        对象脱离正常文档流，使用top,right,bottom,left等属性以窗口为参考点进行定位，当滑动滚动条时，
    对象会固定在原先位置，不会动！其层叠通过z-index属性定义。
    注意：一个元素如果设置了position:absolute|fixed;那么该元素不能设置float。但relative可以。

脱离文档流：
    绝对定位、固定定位
不脱离文档流：
    相对定位

5. z-index

#i2 {
    z-index:999;
}
设置对象的层叠顺序：
    1.z-index值表示谁压着谁，数值大的压住数值小的
    2.只有定位了的元素，才能有z-index，也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index,而浮动元素不能使用
    3.z-index值没有单位，就是一个正整数，默认为0

6.opacity

  用来定义透明效果。取值范围是0~1， 0是完全透明，1是完全不透明

 

****************实现的例子*******************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cnblog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-page">
        <!--博客侧边栏开始-->
        <div class="blog-left">
            <div class="head-image">
                <img src="1.jpg" alt="">
            </div>
            <div class="blog-user-name">
                <p>赖小七</p>
            </div>
            <div class="blog-user-info">
                <p>这个人什么都没写！</p>
            </div>
            <div class="blog-contact">
                <ul>
                    <li>关于我：</li>
                    <li><a href="">新浪微博</a></li>
                    <li><a href="">微信公众号</a></li>
                </ul>
            </div>
            <div class="blog-tech">
                <ul >
                    <li>SING</li>
                    <li>ROCKET GIRL</li>

                </ul>
            </div>
        </div>
        <!--博客侧边栏结束-->

        <!--博客右侧内容开始-->
        <div class="blog-right">
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>
            <div class="blog-content">
                <div class="blog-title">
                    <span class="title">天王盖地虎，小七一米五</span>
                    <span class="time">2019-05-30</span>
                </div>
                <div class="blog-abstract">
                    <span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
                </div>
                <hr>
                <div class="blog-content-tech">
                   <span>SING</span>
                    <span>ROCKET GIRL</span>
                </div>
            </div>


        </div>
        <!--博客右侧内容结束-->

    </div>
</body>
</html>
博客页面
/*博客页面的css样式表*/
/*通用样式*/
body {
    margin: 0;
    background-color: lightgray;
}
/*清除超链接的下划线*/
a {
    text-decoration: none;
}
/*清除ul列表前面的点和内边距*/
ul {
    list-style-type: none;
    padding-left: 0;
}
/* 清除 浮动塌陷问题*/
.clearfix:after {
    content: '';
    clear: both;
    display: block;
}

/*左侧边栏的样式*/
.blog-left {
    width: 20%;
    height: 100%;
    position: fixed;  /*固定定位*/
    background-color: rgba(0, 0, 0, 0.47);

}

/* 设置头像框*/
.head-image {
    width: 150px;
    height: 150px;
    border: 3px solid white;
    border-radius: 50%;
    margin: 30px auto;
    overflow: hidden;
}

/* 设置 头像里面的照片 填充 */
.head-image img {
    width: 100%;
}
/*设置 名字 和 介绍信息*/
.blog-user-name,.blog-user-info {
    color: lightgray;
    text-align: center;
}

/* 左下方的联系方式 和 技术 的  ul*/
.blog-contact ul,.blog-tech ul{
    text-align: left;
    padding-left: 30%;
    margin-top: 80px;
    color: lightgray;
}

/* 超链接 a */
.blog-contact a:link {
    color: white;
}
.blog-contact a:hover {
    color: red;
}
.blog-contact a:active {
    color: yellow;
}
.blog-contact a:visited{
    color: #00e5ff;
}


/*----------右边内容的样式----------*/
.blog-right {
    float: right;
    width: 80%;
}

/* 一篇文章整体*/
.blog-content {
    border-radius: 5px;
    margin: 5px 10px;
    height: 150px;
    background-color: white;
    border: 1px solid darkgrey;
    box-shadow: 3px 3px rgba(0,0,0,0.3);
}

/* 一篇文章中， 标题整体 包括标题内容和时间*/
.blog-title {
    border-left: 5px solid red;
}

/* 一篇文章中，标题内容 */
.title {
    margin-left: 10px;
    height: 50%;
    font-size: 36px;
}

/* 一篇文章中， 最上面的标题后面的   时间*/
.time {
    font-size: 16px;
    margin-top: 5px;
    float: right;
    color: darkgrey;
}

/* 一篇文章中， 中间的 内容摘要*/
.blog-abstract {
    margin-left: 20px;
    padding-top: 10px ;
    height: 30%;
}

/*一篇文章中，最下方的  #Python  # js*/
.blog-content-tech {
    color: darkgrey;

    margin-left: 20px;
}

.blog-content-tech span{
    display: inline-block;
    margin-left: 20px;

}
博客样式

 

插入的图片：

 

效果图：

 

 

posted @ 2019-05-30 19:13  xt12321  阅读(150)  评论(0)  编辑  收藏  举报