07 CSS-CSS布局【尚硅谷JavaWeb教程】

07 CSS-CSS布局【尚硅谷JavaWeb教程】

JAVAWEB的学习笔记
学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

使用的html5 照着敲和老师的效果不一样(html4.7),html5 是根据内容来变化高度的。
position: absolute --绝对定位,需要配合使用left,top
relative – 相对定位,一般会和float,margin,padding … 一起使用

DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            /*绝对定位*/
            position: absolute;
            /*指定 x y轴距离*/
            left: 100px;
            top: 100px;

            width: 200px;
            height: 50px;
            background-color: chocolate;
        }

        #div2{
            /*相对定位 float 浮动*/
            position: relative;
            float: left;
            margin-left: 20px;

            width: 200px;
            height: 50px;
            background-color: aqua;

        }

        #div3{

            height: 50px; /*在html5中高度是失效的*/
            background-color: blue;
        }
        #div4{
            width: 200px;
            height: 50px; /*在html5中高度是失效的*/
            background-color: red;

            float: left;
        }
        #div5{
            width: 200px;
            height: 50px; /*在html5中高度是失效的 和老师效果不一样*/
            background-color: coral;
            float: left;
        }
        div{
            position: relative;
        }
    style>
head>
<body>


    <div id="div3">
        <div id="div4"> div>
        <div id="div5"> div>
    div>

body>
html>


```

```html
DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: dimgrey;
        }
        div{
            position: relative;
        }
        #div_top{
            background-color: #03ec58;
            height: 20%;

        }
        #div_left{
            background-color: #ef9d5e;
            height: 80%;
            width: 15%;
            float: left;
        }
        #div_main{
            background-color: #5683f5;
            height: 70%;
            float: left;
            width: 85%;
        }
        #div_bottom{
            background-color: #e8779f;
            height: 10%;
            width: 85%;
            float: left; /*解决左边空隙和参照物问题*/
        }
        #div_container{
            width: 80%;
            height: 100%;
            border: 1px solid blue;
            margin-left: 10%;
            float: left;
        }
    style>
head>
<body>
    <div id="div_container">
        <div id="div_top">div_topdiv>
        <div id="div_left">div_leftdiv>
        <div id="div_main">div_maindiv>
        <div id="div_bottom">div_bottomdiv>
    div>

body>
html>






```

你可能感兴趣的:(JavaWEB,css,html,前端)