盒子模型

CSS浮动 -- 笔记 - 图3

review0427-1

<!DOCTYPE html>
<html>
<head>
    <title>review0427-1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="review0427.css">
</head>
<body>
    <div id="div1">
        div标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。div 可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。当使用 CSS-P 的时候，主要把它用在DIV（division）tag 上。当把文字，图像，或其他的放在DIV中，它可称作为“DIVblock”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在DIV中的HTML。
    </div>
    <div id="div2">
        <label>姓名：</label><input type="text" name="">
    </div>
</body>
</html>

#div1{
    background-color: red;
    width: 150px;
    height: 150px;
    top: 150px;
    left: 150px;
    position: absolute;
    /*DIV大小，位置，背景*/
    overflow: scroll;
    /*超出div宽度和高度的文字或者图片进行隐藏处理*/
    /*超出div宽度和高度的文字或者图片增加滚动条*/
    outline: dashed;
    /*dashed虚线轮廓 dotted点状轮廓 soild实线 double双线 none无*/
    border-bottom: solid;
    /*设置div边框的边线宽度，颜色，虚线，实线等样式css属性*/
    /*border-left  border-right   border-top   border-bottom*/
}
#div2{
    top: 150px;
    left: 350px;
    position: absolute;
    /*border-bottom: solid;*/
}
input{
    border: none;
    border-bottom: solid;
    outline: none;
}

review0427-2

<!DOCTYPE html>
<html>
<head>
    <title>review0427-2</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="review0427-2.css">
</head>
<body>
    <div id="div1">
    div标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。div 可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。当使用 CSS-P 的时候，主要把它用在DIV（division）tag 上。当把文字，图像，或其他的放在DIV中，它可称作为“DIVblock”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在DIV中的HTML。    
    </div>
    <div id="div2">
    div标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。div 可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。当使用 CSS-P 的时候，主要把它用在DIV（division）tag 上。当把文字，图像，或其他的放在DIV中，它可称作为“DIVblock”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在DIV中的HTML。
    </div>
</body>
</html>

div{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-left: 20px;
}

#div1{
    background-color: yellow;
    margin-top: 20px;
    /*margin-left: 20px;*/
    margin-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    /*content-box在宽度和高度之外绘制元素的内边距和边框*/
    /*border-box已设定的宽度和高度分别减去边框和内边距
    才能得到内容的高度和宽度*/
}

#div2{
    background-color: blue;
}

*{
    margin: 0px 0px 0px 0px;
    /*margin为4个时，margin:上  右  下  左;（为顺时针方向）*/
    /*margin为3个时，margin:上   左=右   下;*/
    /*margin为2个时，margin:上=下   左=右;*/
    /*margin为1个时，margin:上=右=下=左;*/
}

review0427-3

<!DOCTYPE html>
<html>
<head>
    <title>review0427-3</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="review0427-3.css">
</head>
<body>
    <div id="div1">第一个</div>
    <div id="div2">第二个</div>
    <div id="div3">第三个</div>
    <div id="div4">
        <img src="image/4.jpg">
        <p>
            div标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。div 可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。当使用 CSS-P 的时候，主要把它用在DIV（division）tag 上。当把文字，图像，或其他的放在DIV中，它可称作为“DIVblock”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在DIV中的HTML。
        </p>
    </div>
</body>
</html>

/*div{
    width: 200px;
    height: 200px;
}
*/
#div1{
    background-color: yellow;
    float: left;
}

#div2{
    background-color: red;
    width: 300px;
    float: left;
}

#div3{
    background-color: blue;
    width: 400px;
    float: left;
}

/*崩塌也可以叫做：崩溃、破坏、崩塌：父一级的块状元素的高度发生了破坏；*/
/*知识点：在没设定宽度之前，宽度是上一级父元素的宽度（沾满一整行），高度随内容而撑开，设定宽度。*/

#div4{
    background-color: red;
    float: left;
}

img{
    /*设置底边对齐*/
    vertical-align: bottom;
    float: left;
}

p{
    text-align: justify;
    line-height: 1.2em;
}