css06（浮动、定位） -

浮动

1.浮动只限于水平方向
2.浮动元素脱离了文档流，后面的元素会上移填充它原来的空间
3.浮动元素不会影响到它前面的元素的布局，只公影响到后面的元素的排列
4.任何元素(包括行内元素)浮动后,都具备了块级元素的特征


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <h1>浮动的本质</h1>
    <div class="box">
        <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt="">
        <div class="desc">
            <h2>第十四期_前端开发</h2>
            <p>php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战； 2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战 ；4.Vue.js基础与实战</p>
        </div>
    </div>
    <img src="" alt="">
    <div class="desc">
        <h2></h2>
        <p></p>
    </div>
</body>
</html>

/* 初始化 */
* {
    /* 自动调整为0尺寸 */
    margin: 0;
    padding: 0;
    /* ie盒子，边框尺寸默认自动调整 */
    box-sizing: border-box;
}
.box{
    padding: 1em;
    border: 1px solid#000;
}
.box img{
    width: 15em;
    border-radius: 0.5em;
    float: left;
}

清除浮动

/* 初始化 */
* {
    /* 自动调整为0尺寸 */
    margin: 0;
    padding: 0;
    /* ie盒子，边框尺寸默认自动调整 */
    box-sizing: border-box;
}
.box{
    padding: 1em;
    border: 1px solid#000;
}
.box img{
    width: 15em;
    border-radius: 0.5em;
    float: left;
}
.box .desc a{
    width: 15em;
    height: 2em;
    background-color: chartreuse;
}
.box:after{
    content:'' ;
    display: block;
    clear: both;
}

文字不溢出

/* 初始化 */
* {
    /* 自动调整为0尺寸 */
    margin: 0;
    padding: 0;
    /* ie盒子，边框尺寸默认自动调整 */
    box-sizing: border-box;
}
.box{
    padding: 1em;
    border: 1px solid#000;
}
.box img{
    width: 15em;
    border-radius: 0.5em;
    float: left;
}
.box .desc a{
    width: 15em;
    height: 2em;
    background-color: chartreuse;
}
.box:after{
    content:'' ;
    display: block;
    clear: both;
}
.box .desc {
    overflow: hidden;
}

定位类型

1.静态定位: position: static 默认，也就是文档流定位，元素的显示位置与源码顺序
2.相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移
3.绝对定位: position: absolue; 相对于它的祖先中离它最近的”定位元素”的位置发生偏移
4.固定定位

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="css01.css">
</head>
<body>
    <div class="box">
        <h2>php</h2>
        <p>welcome</p>
    </div>
</body>
</html>

/* 初始化 */
* {
    /* 自动调整为0尺寸 */
    margin: 0;
    padding: 0;
    /* ie盒子，边框尺寸默认自动调整 */
    box-sizing: border-box;
}
.box {
    width: 15em;
    height: 15em;
    border: 1px solid#000;
    margin: 2em auto;
}
.box h2{
    border: 1px solid#000;
    background-color: chartreuse;
    position: relative;
    top:1em;
    left: 1em;
}

固定定位

/* 初始化 */
* {
    /* 自动调整为0尺寸 */
    margin: 0;
    padding: 0;
    /* ie盒子，边框尺寸默认自动调整 */
    box-sizing: border-box;
}
.box {
    width: 15em;
    height: 15em;
    border: 1px solid#000;
    margin: 2em auto;
}
.box h2{
    border: 1px solid#000;
    background-color: chartreuse;
    position:fixed;
    top:1em;
    left: 1em;
}