css布局原理与实现--2019.09.04

清除子级对父级的影响的方法：

html

<body>
<div class="box1">
        <div class="box2">
            子区块
        </div>
        <!-- <div class="clear"></div> -->
    </div>
</body>

css：

.box1 {
    width: 300px;
    border: 5px dashed red;
}
.box2 {
    width: inherit;
    height: 300px;
    background-color: aqua;
    float: left;
}

方法一：

父级元素高度设置=子元素一样的高度*

css

.box1 {
    height: 300px;
}

方法二：

父元素一起嗨起来

css：

.box1 {
    float: left;
}

方法三：添加一个元素，抵消上一个元素的浮动

css：

.clear {
    clear: both;
}

方法四：给父级元素添加overfloer，专门来清除浮动

css：

.box1 {
    overflow: hidden;
}

三列布局（绝对定位+浮动定位）

html：

body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容区</div>
            <div class="right">右侧</div>
        </div>

        <!-- 将中间改为散列 -->
        <div class="footer">体部</div>
    </div>

</body>

绝对定为css：

.container {
    width: 1000px;
    margin: auto;
}
.header {
    height: 60px;
    background-color: lightgray;
}

.footer {
    height: 60px;
    background-color: lightgray;
}
.main {
    /* min-height: 800px;用内容来撑开高度 */
    background-color: aquamarine;
    margin: 5px auto;
}

.left {
    width: 200px;
    min-height: 800px;
    background-color: green;
}
.content {
    min-height: 800px;
    background-color: red;
}
.right {
    width: 200px;
    min-height: 800px;
    background-color: green;
}
.main {
    /* 给定位父级设置定位属性  可以是相对 也可以是绝对 */
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
}
/* 内容区通过挤压得到的 margin */
.content {
    margin-left: 200px;
    margin-right: 200px;
}

浮动css：

.container {
    width: 1000px;
    margin: auto;
}
.header {
    height: 60px;
    background-color: lightgray;
}
.footer {
    height: 60px;
    background-color: lightgray;
}
.main {
    /* min-height: 800px;用内容来撑开高度 */
    background-color: aquamarine;
    margin: 5px auto;
    overflow: hidden;
}

.left {
    width: 200px;
    min-height: 800px;
    background-color: green;
}
.content {
    min-height: 800px;
    background-color: red;
}
.right {
    width: 200px;
    min-height: 800px;
    background-color: green;
}
/* 浮动 */
.left {
    float: left;
}
.right {
    float: right;
}

.content {
    float: left;
    width: 600px;
}

样式：

4PKX~0}SP8(ZI7BUAN$IK]G.png

总结

主要学习了如何清除浮动的影响（best：overflow：hidden）。了解了相对定位，绝对定位，固定定位。在制作登录网页时了解了要设置遮和透明度（opacity），在二维码图片区设置了父子元素，通过移动父级元素调整。在制作招生广告时，使用了js代码，cursor: pointer改变鼠标形状。

在配置三列布局中：父级元素设置定位属性可以随意设置不用注意，主题的高度由内容来撑开.

相关文章