【第36天】CSS关于层叠的一系列特性

1 页面元素类型

1.1 块元素

       块元素(block),在不设置宽度的前提下独占一行,不满一行即留空白。开始和结尾自带换行,一行不能存在其他元素,即使设置了外边距。设置盒子模型与对齐方式有效。 元素举例:div、h1~h6、p、img、pre、ul、li。(pre标签类似于DTD中的CDATA,在标签内可以换行,直接写转义字符)

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>块元素</title>
        <style>
            div{
                background-color: lightblue;
                width:400px;
                height:300px;
                /* 文本居中对齐 */
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div>我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div</div>
        <div>我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div</div>
    </body>
</html>

在这里插入图片描述

1.2 内联(行内)元素

        内联(行内)元素(inline),内联元素开始和结尾没有换行,一行可以存在多个。并且宽度取决于内部的嵌套的内容(宽度由内容撑开,高度随字体大小而改变),设置盒子模型部分无效,设置对齐方式无效。 元素举例:a label span img

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>内联(行内)元素</title>
        <style>
            label{
                background-color: deeppink;
                width:400px;
                height:300px;
                /* 文本居中对齐 */               
                text-align:center;
            }
        </style>
    </head>
    <body>
        <!--
           
        -->
        <label>我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label</label>
        <label>我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label</label>
    </body>
</html>

在这里插入图片描述

1.3 内联(行内)块元素

        **内联(行内)元素(inline-block),内联块元素,属于内联元素,但是具有块元素的所有特性。不自动换行、能够识别宽高、默认排列方式为从左到右。**元素举例:img。

1.4 空元素

       **空元素(empty),内部不嵌套任何内容,一般用来设置页面的具体参数或者换行等格式。**元素举例:br hr meta。

1.5 使用display属性更改元素类型

       若想使一个类型的元素出现其他类型元素的特性,可以在CSS中定义display。用法“display:元素类型"。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <style>
            div{
                background-color: lightblue;
                width:400px;
                height:300px;
                /* 文本居中对齐 */
                text-align:center;
            }
            label{
                background-color: deeppink;
                width:400px;
                height:300px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <!--
            display:元素类型
            这里将块元素转换成了内联元素
        -->
        <div style="display:inline">我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div</div>
        <hr>
        <label style="display:block">我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label
            我是label我是label我是label我是label我是label</label>
        <div style="display:none">我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div我是div
            我是div我是div我是div我是div我是div我是div</div>
    </body>
</html>

在这里插入图片描述

2 盒子模型

       CSS中将元素的四个边框默认隐藏,当我们显示这些边框时,发现这些元素就像一个一个的盒子从上到下排列在页面上。 CSS使用如下图的十四个属性定位一个元素的宽高、内外边距、边框的高度。(下图黑框的意义为元素的本身大小)
       盒子边框,以及内外的空间位置,我们称之为盒子模型。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style>
        /*  一些浏览器会自动对元素之间加边距,
          加这个全选选择器可以将元素之间和元素内边距都去掉,
          将所有盒子模型的参数都收归程序员掌控
        */
            *{
                margin:0;
                padding:0;
            }
            div#container{
                /* 显示元素边框
                    border:边框类型 粗细 颜色
                    类型:solid double dotted
                */
                border:solid 2px red;
                /*
                    页面整体居中,元素上下没有边距为0,
                    左右设置为auto意为一样等宽

                    为什么center标签不推荐使用了?    
                    整个页面只要加一个center标签,
                    那么里面包括的所有元素都会居中
                    
                */
                margin:0 auto;
                width:600px;
                height:900px;
            }
            ul{
                /* 去掉列表前面的点状徽记(ol也适用),
                若想保存徽记使其到表格内显示,
                设置外边距margin-left 
               */
                list-style-type: none;
            }
            h2{
                /*margin-top:60px;
                margin-left:30px;
                margin-bottom:100px;
                margin-right:50px;*/
               
                /*
                    简便写法:
                    case1:四个参数
                    margin:上 右 下 左;
                    
                    case2:三个参数
                    注意括号内表示相同的参数
                    margin:上 (右左) 下
                    
                    case3:两个参数
                    margin:(上下) (右左)
                    
                    case4:一个参数
                    margin:(上右下左)

                */
                margin:60px 50px 100px 30px;
                /*
                    padding依然遵循简略写法的原则,
                    
                    border只能设置一次对四个元素起作用,
                    若要上下左右区别设置,需要分着设置
                */
                padding-top:20px;
                padding-left:100px;
                padding-bottom:40px;
                border-top:double 5px blue;
                border-right:dotted 10px orangered;
                border-bottom: dotted 13px #ff68e2;
                border-left:double 1px olive;
            }
            ul{
                border:solid 2px aqua;
            }
            li{
                border:solid 2px purple;
            }
            p{
                border:solid 2px orangered;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h2>我是二级标题</h2>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
            <p>我是一个段落</p>
        </div>
    </body>
</html>

3 背景设置

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>背景设置</title>
        <style>
            ul{
                /*当li设置为行内元素时,
                徽记自动隐藏,这个属性无作用*/
                list-style-type:none;
                margin-top:100px;
            }

            li{
                /*使li这个块级元素改为内联显示*/
                display:inline;
            }
            body{
                /* 设置背景图 */
                background-image:url("image/background.gif");
                /* 若不设置,背景图平铺满浏览器,
                repeat-x:只允许背景图横向排列;
                repeat-y:只允许背景图纵向排列;
                no-repeat:背景图不排列不平铺,只显示一次 */
                background-repeat:repeat-x;
                background-color:#cccc99;
            }

        </style>
    </head>
    <body>
        <ul>
            <li><img src="image/1.jpg"></li>
            <li><img src="image/2.jpg"></li>
            <li><img src="image/3.jpg"></li>
            <li><img src="image/4.jpg"></li>
        </ul>
    </body>
</html>

综合分辨率适配、图片阴影与元素颜色冲突等问题,尽量不要使用背景图作为背景,使用背景也尽量使用浅颜色的。

4 定位

       position的默认值为static,一般不设置position属性时,会按照正常的文档流进行排列。

4.1 相对定位

       元素根据它按这个元素原先所在位置外边距的左上角进行定位,定位之后元素依然保持原先的状态。若定位后元素需要偏移出原先的地方,需要使用top、right、bottom、left属性定位偏移量。定义一次,top与bottom只写一个,left与right只写一个。 元素偏移后,原来的位置依然被占用,块级元素依然占一行。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style>
            div#container{
                border:solid 2px black;
                position:relative;
                margin:0 auto;
                width:600px;
                height:500px;
            }
            div#sub1{
                border:solid 2px red;
            }
            div#sub2{
                border:solid 2px orange;
                /*
                    相对定位:

                */
                position: relative;
                /* 向下偏移200 */
                top:200px;
                /* 向右偏移300 */
                left:300px;
            }
            div#sub3{
                border:solid 2px yellow;
                top:300px;
                left:400px;
            }
            div#sub4{
                border:solid 2px green;
            }
            div#sub5{
                border:solid 2px aqua;
                top:200px;
                left:300px;
            }
            div#sub6{
                border:solid 2px blue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sub1">我是层1</div>
            <div id="sub2">我是层2</div>
            <div id="sub3">我是层3</div>
            <div id="sub4">我是层4</div>
            <div id="sub5">我是层5</div>
            <div id="sub6">我是层6</div>
        </div>
    </body>
</html>

在这里插入图片描述

4.2 绝对定位

       元素根据距离它最近的定位过的父元素的左上角padding开始的地方(即只从padding的左上角开始) 进行定位。需要使用top、right、bottom、left属性定位偏移量。定义一次,top与bottom只写一个,left与right只写一个。原先占满一行的块元素定位后元素不再占满一行,原先的位置被占用。
       注意,如果不存在定位过的祖先元素,则根据body定位在浏览器的左上角(相当于position:fixed)。所以使用绝对定位必须存在一个定位过的参照物,不能让元素根据浏览器的左上角进行定位。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            div#container{
               /*绝对定位的居中显示,需要先将上下左右都设置为0*/
	            border:solid 2px black;
	            position:absolute;
	            margin:0 auto;
	            left: 0;
	            top: 0;
	            right: 0;
	            bottom: 0;
	            width:600px;
	            height:500px;
            }
            div#sub1{
                border:solid 2px red;
            }
            div#sub2{
                border:solid 2px orange;
            }
            div#sub3{
                border:solid 2px yellow;
                position: relative;
                top:300px;
                left:400px;
            }
            div#sub4{
                border:solid 2px green;
            }
            div#sub5{
                border:solid 2px aqua;
                position:relative;
                top:200px;
                left:300px;
            }
            div#sub6{
                border:solid 2px blue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sub1">我是层1</div>
            <div id="sub2">我是层2</div>
            <div id="sub3">我是层3</div>
            <div id="sub4">我是层4</div>
            <div id="sub5">我是层5</div>
            <div id="sub6">我是层6</div>
        </div>
    </body>
</html>

在这里插入图片描述

5 浮动

       在不设置宽度的情况下,默认块元素从左到右占满整个父元素(注意不是占满浏览器)的整个宽度空间。 如果设置了浮动,则元素会向浮动方向不断缩小宽度,直到达到内部嵌套的内容的宽度为止,并且元素漂浮在页面上(想象为原来一样高的元素突然飘起来了,但是当其他元素也飘起来,他们还是会在空中一样高的)。

       下面未浮动的元素会占用浮动元素原来的空间(一般是背景被覆盖掉,文字环绕显示),浮动也可以理解为word中的文字环绕显示。

       无论内联还是块元素,设置为浮动时都变为块元素,且元素设置浮动后,不在整个文档流的管辖范围,那么它之前存在在父元素内的高度就随着浮动不复存在了,此时若父元素没有设置高度,会默认自己标签中没有任何内容。父元素不能被撑开,造成高度塌陷,设置的背景无法显示

  • 解决方法:

    • 对父元素设置高度

    • 对父元素设置 overflow:hidden清除浮动

    • 把父元素也设置为浮动

    • 在父元素结束标签前加上

      清除浮动的影响。

  • 未设置浮动时

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            div#container{
                width:900px;
                height:600px;
                /*为什么要在div父标签上加与背景同色的边框? 
                有些浏览器在标签内部的标签设置margin时 
                需要border指定边界 
                否则margin失效,但为了让边框可以隐藏不显示
                设置同色*/
                margin:0 auto;
                background-color:yellow;
                border:solid 1px yellow;
            }
            div#box1{
                background-color: pink;
                margin-top:30px;
                height:100px;
            }
            div#box2{
                background-color:hotpink;
                margin-top: 30px;
                height:120px;
            }
            div#box3{
                background-color: deeppink;
                margin-top: 30px;
                height:140px;
            }
            p{
                background-color: orangered;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="box1">我是div1</div>
            <div id="box2">我是div2</div>
            <div id="box3">我是div3</div>
            <p>我是段落我是段落我是段落我是段落我是段落
            我是段落我是段落我是段落我是段落我是段落我是段落我是段落
                我是段落我是段落我是段落我是段落我是段落我是段落我是段落
                我是段落我是段落我是段落我是段落我是段落我是段落</p>
        </div>
    </body>
</html>

在这里插入图片描述

  • 将box1设为左浮动,将box2设为右浮动,其余不变,可以看到此时box1、box2分别浮动到了父元素的左右两端,box3占用了第一行原来box1的位置。
            div#box1{
                background-color: pink;
                margin-top:30px;
                height:100px;
                float: left;
            }
            div#box2{
                background-color:hotpink;
                margin-top: 30px;
                height:120px;
                float: right;
            }

在这里插入图片描述

  • 将box3设为左浮动之后,内联元素p来占用box3的空间。
            div#box3{
                background-color: deeppink;
                margin-top: 30px;
                height:140px;
                float:left;
            }

在这里插入图片描述

  • 行内元素p此时会因为前三个元素都浮动而被动挤占了原来box3的位置,若要清除浮动对p元素的影响,可以使用clear属性,注意,在这里消除的影响只是消除了在p看来其它元素对它的浮动影响,与其它元素、父元素并无关系。

  • 清除p元素左侧的浮动影响

 			p{
                background-color: orangered;
                margin-top: 30px;
                clear: left;
            }

在这里插入图片描述

  • 清除p元素右侧的浮动影响
 			p{
                background-color: orangered;
                margin-top: 30px;
                clear: right;
            }

在这里插入图片描述

  • 清除p元素两侧的浮动影响
 			p{
                background-color: orangered;
                margin-top: 30px;
                clear: both;
            }

在这里插入图片描述

6 布局

       在html4.01中通过div搭配css可以设置页面的简单布局,从html5开始,添加很多布局元素(布局元素全部都是html5新特性),来取代div对页面进行布局。这些元素配合搜索引擎可以使页面更加条理,搜索引擎找寻网站信息更加快速便捷。

css/layout.css

div#container{
    margin:0 auto;
    width:600px;
    height:800px;
    border:solid 1px white;
    /*
        CSS3新特性
            阴影:给元素添加阴影
    */
    box-shadow:30px 30px 30px gray;
    /*
        CSS3新特性
        border-width:边框宽度
        border-style:边框类型
        border-color:边框颜色
        用来取代CSS2中的border属性
        但是注意以上三句必须全部书写,否则部分浏览器无效
    */
}

header{
    width:600px;
    height:100px;
    background-color: hotpink;
    /*
        CSS3新特性
            圆形边框数字越大边框越圆
    */
    border-radius:25px;
}

aside{
    width:150px;
    height:600px;
    background-color:gray;
    float:left;
}
section{
    width:450px;
    height:600px;
    background-color:silver;
    float:left;
}

footer{
    width:600px;
    height:100px;
    clear:both;
    background-color: hotpink;
}

header ul,aside ul{
    list-style-type: none;
}
header ul li{
    float: left;
    padding-right:40px;
}

header ul li a{
    text-decoration: none;
    font-weight: bolder;
    color:white;
}

aside ul li{
    padding-top:80px;
    font-family:DFPWaWaW5;
}
aside ul li a{
    color:black;
    font-weight:bolder;
    font-size:17px;
    text-decoration: none;
}

section header{
    width:450px;
    height:50px;
    background-color:gray;
}
section footer{
    width:450px;
    height:50px;
    background-color:gray;
}
section p{
    width:450px;
    height:200px;
    background-color:white;
}
section figure img{
    width:60px;
}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>布局</title>
        <link rel="stylesheet"
        href="css/layout.css">
    </head>
    <body>
        <div id="container">
            <!--
                header:表示页面,用来放置logo 标题
                搜索框等页面首部元素
            -->
            <header>
                我是网页的标题,LOGO,等信息
                <!--
                    nav:一般用来放置页面首部的菜单栏或者
                    导航栏等,内部多嵌套ul列表
                -->
                <nav>
                    <ul>
                        <li><a href="#">我是菜单栏1</a></li>
                        <li><a href="#">我是菜单栏2</a></li>
                        <li><a href="#">我是菜单栏3</a></li>
                        <li><a href="#">我是菜单栏4</a></li>
                    </ul>
                </nav>
            </header>
            <!--
                aside:用来放置侧边栏信息,一般在页面的左侧或者右侧
            -->
            <aside>
                <ul>
                    <li><a href="#">我是链接1</a></li>
                    <li><a href="#">我是链接2</a></li>
                    <li><a href="#">我是链接3</a></li>
                    <li><a href="#">我是链接4</a></li>
                </ul>
            </aside>
            <!--
                section:一般用来放置正文
            -->
            <section>
                我是正文的内容,内部多嵌套一片完整的文章
                <!--
                    aricle:表示一篇完整文章的开始,
                    所谓完整文章表示存在页眉页脚正文三部分
                -->
                <article>
                    <header>我是正文页眉</header>
                    <p>我是正文内容</p>
                    <footer>我是正文页脚</footer>
                </article>
                <!--
                    除了正文还可以添加轮播 多媒体相册等
                -->
                <figure>
                    <figcaption>我是轮播或者多媒体相册的标题</figcaption>
                    <img src="image/1.jpg" />
                    <img src="image/2.jpg" />
                    <img src="image/3.jpg" />
                </figure>
            </section>
            <!--
                footer:页脚,一般放置地址信息,广告,联系方式
                等等
            -->
            <footer>
                我是页脚
                <address>一般放置地址,联系方式,加盟信息,
                法律规定等等</address>
            </footer>
        </div>
    </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值