CSS基础学习笔记(第三天)

最新推荐文章于 2022-06-21 11:42:20 发布

满山猴子

最新推荐文章于 2022-06-21 11:42:20 发布

阅读量264

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Cocksuck/article/details/106348586

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

目录

CSS第三天

一、浮动

文档流

文档流，是指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直 margin 的合并

实例代码_14:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_14(浮动)</title>
        <style type="text/css">
            .continer{
                /*设置其父元素,因为其子元素都为浮动元素
                 所以父元素无法撑开, 解决方式(清除浮动): 请看  实例代码_15*/
                width: 600px;
                border: 2px solid cornflowerblue;
            }
            .div_01,.div_02,.div_03{
                width: 100px;
                height: 100px;
                /*设置三个div都是左浮动/有浮动*/
                float: left;
                /*float: right;*/
            }
            .div_01{
                background: red;           
            }
            .div_02{
                background: green;
            }
            .div_03{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="div_01">第一个div元素</div>
            <div class="div_02">第二个div元素</div>
            <div class="div_03">第三个div元素</div>  
        </div>
    </body>
</html>

清除浮动

父级上增加属性 overflow：hidden

在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both（不推荐）

使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

清除浮动的使用方法：

 .con2{... overflow:hidden} 或者

<div class="con2 clearfix">

实例代码_15:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_15(清除浮动)</title>
        <style type="text/css">
            .continer{
                /*设置其父元素,因为其子元素都为浮动元素
                 所以父元素无法撑开, 解决方式(清除浮动) 3种方式*/
                /*(1)使用overflow:hidden清除浮动  推荐使用*/
                /*overflow:
hidden;*/
                width: 600px;
                border: 2px solid cornflowerblue;
            }
            /*(2)使用在浮动元素后添加空div元素 ,设置clear:both  不推荐*/
            /*.div_04{
                clear: both;
            }*/
            /*(3)使用成熟的清除浮动的方式(伪类及clear:both)  推荐使用*/
            .continer:after,.continer:before{
                content: '';
                display: table;
            }
            .continer:after{
                clear: both;
            }
            .div_01,.div_02,.div_03{
                width: 100px;
                height: 100px;
                float: left;
            }
            .div_01{
                background: red;
            }
            .div_02{
                background: green;
            }
            .div_03{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="div_01">第一个div元素</div>
            <div class="div_02">第二个div元素</div>
            <div
class="div_03">第三个div元素</div>  
            <!--清除浮动个第二种方式  添加空div元素-->
            <!--<div
class="div_04"></div>-->
        </div>
    </body>
</html>

二、定位

关于定位

我们可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

实例如下:

实例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位的元素</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: pink;
                /*生成相对定位的元素*/
                position: relative;
                left: 100px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="continer">relative:表示生成相对定位的元素,元素本身所占据的文档流位置不变,设置元素相对于文档流位置的偏移</div>
    </body>
</html>

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            .continer{
                width: 300px;
                height: 300px;
                background: darkseagreen;
                margin: 100px auto;
                /*设置父元素相对定位*/
                position: relative;
            }
            .inner{
                width: 200px;
                height: 200px;
                background: pink;
                /*生成绝对定位的元素*/
                position: absolute;
                left: 20px;
                top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner">absolute:表示生成绝对定位的元素,元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位。</div>
        </div>
    </body>
</html>

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            .continer{
                width: 30px;
                background: dodgerblue;
                text-align: center;
                /*设置固定定位*/
                position: fixed;
                left: 25%;
                top:0px;
            }
        </style>
    </head>
    <body
bgcolor="gainsboro">
        <div class="continer">该div元素为固定 定位元素</div>
    </body>
</html>

static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性

inherit 从父元素继承 position 属性的值

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置元素的层级

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位的元素</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                /*设置层级: 首先必须是绝对定位的元素;
                然后使用z-index设计层级(取值1-999: 值越大层级越高)*/
                position: absolute;
            }
            .div_01{
                background: red;
                z-index: 2;
            }
            .div_02{
                background: green;
                z-index: 5;
            }
            .div_03{
                background: blue;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div class="div_01">第一个div元素</div>
        <div class="div_02">第二个div元素</div>
        <div class="div_03">第三个div元素</div>
    </body>
</html>

典型定位布局

1、固定在顶部的菜单

2、水平垂直居中的弹框

3、固定的侧边的工具栏

4、固定在底部的按钮

CSS实现垂直居中的问题

难点: 一个div在另一个div中的垂直居中的设置?

(1)利用text-align 实现块元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 400px;
                height: 300px;
                padding-top: 100px;
                background: skyblue;
                text-align: center;
            }
            .inner{
                display: inline-block;
                width: 200px;
                height:
200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(2)利用padding设置,且父元素和子元素的大小一致

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                padding: 20px;
                background: skyblue;
            }
            .inner{
                width: 200px;
                height: 200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(3)利用position和margin进行元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -50px 0px 0px -50px;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(4)利用position进行元素的水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 0px;
                top: 0px;
                right:0px;
                bottom:0px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(5)适用于图片的居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                line-height: 200px;
                text-align: center;
            }
            img{
                width: 100px;
                height:
100px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <img src="images/InLett-logo.png"
alt="英莱特IT学院" />
        </div>
    </body>
</html>

效果:

三、特征布局实例讲义

经过对前面知识点的巩固和加深，我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局，以此来达到综合应用知识的目的。

1、特征布局：翻页（所需知识点：盒模型、内联元素）

2、特征布局：导航条 01（所需知识点：盒模型、行内元素布局）

3、特征布局：导航条 02（所需知识点：盒模型、浮动、定位、字体对齐）

4、特征布局：巨幕导航（所需知识点：盒模型、浮动、定位、对齐...）

5、特征布局：图片列表（所需知识点：盒模型、浮动）

6、特征布局：新闻列表（所需知识点：盒模型、浮动）

满山猴子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习笔记(第三天)

四、浮动文档流文档流，是指盒子按照 html 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素5、浮动元素后面没有浮动
复制链接

扫一扫

专栏目录