0 0 0 5 - 优化内容区设置

星海雪的钟爱 · 发表于 2019-2-20 15:19:06

交作业，container的父元素body定位不能为relative,否则container的top属性不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第四、五节：页面美化，优化</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
            color: #d81d1d;
        }
        /* body元素的heigt不能设置为100%，设置后，背景图会有重复
         * 原因：浏览器似乎会给body加了一个margin:8，body元素的height实际会比html的高度值小
         * 处理：方式1：清除margin值；使用*{margin:0}初始化
         *      方式2：让body继承html的高度
         */

        body{
            background: url("../images/bg.jpg") center center;
            /* 设置网页的背景图片，并水平垂直居中 */
            background-size: cover;
            /* 设置背景图模式为cover */

            /* position: relative; */
            /* body元素position不能设置relative,否则container的top属性不起作用 */
        }

        #container{
            width: 100%;
            text-align: center;
            position: absolute;
            /* 设置垂直居中 */
            top: 50%;
            transform: translateY(-50%);
            /* 垂直上移50%的高度 */
        }

    </style>
</head>
<body>
    <div id="container">
        <h1>我爱鱼C</h1>
        <p>fishc.com.cn-让编程改变世界</p>
        <a href="http://fishc.com.cn">传送门</a>
    </div>
</body>
</html>

phszhuli · 发表于 2019-3-25 16:53:14

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"> 
        <title>欢迎来到HTML世界</title>
        <style type="text/css">/*指定CSS的样式定义*/
                body{
                        background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
                        background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
                        margin: 0;
                        padding: 0;/*潜规则，提高自主控制*/
                        position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

                }
                
                html,body{
                        height: 100%; /* height如果不设置100%，就会出现重复
                */
                        color: #ffffff
                }
                #container{
                        width: 100%;
                        text-align: center;/*文字居中*/
                        position: absolute;/*绝对定位*/
                        top: 50%;
                        transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
                }
        </style>
</head>
<body>
        <div id="container"><!--div封装，id区块说明-->
<h1>我爱鱼C</h1> 
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

萌·小杨 · 发表于 2019-5-26 18:50:43

<!doctype html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>看什么看</title>
                <style type="text/css">
                        html {
                                height: 100%;
                                color: #00ff00;
                                margin:0;
                                padding:0;
                                position: relative;
                        }
                        body {
                                background: url("bg.jpg") center center;
                                background-size: cover;
                        }
                        #container {
                                width: 100%;
                                text-align: center;
                                position:absolute;
                                top:50%;
                                transform:translateY(-50%);
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>老子哎FishC</h1>
                        <p>草泥马</p>
                        <a href="http://fishc.com.cn">传送！</a>
                </div>
        </body>
</html>

fangfangfengfei · 发表于 2019-6-5 22:04:35

homework

作业

fangfangfengfei · 发表于 2019-6-5 22:11:32

EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

body设置position为relative后会使其高度height变为0px；不再继承html的height
absolute是相对于第一个不是static的父元素进行定位的，so本例中他的%高度是相较于body的0px的
解决办法

增加 body{height：100%}
或者删除body的positon：relative 此时的containers会相较于根元素html的位置和height进行布局

fangfangfengfei · 发表于 2019-6-5 22:19:27

MSK 发表于 2017-7-5 09:48
我的直接无法居中，还是麻烦不二看看

那个id的名字跟css的不对照导致样式不能识别

fangfangfengfei · 发表于 2019-6-5 22:26:32

嘟嘟！发表于 2017-8-6 19:37
为什么要设置区块宽度为100%，横向撑满屏幕呢？感觉没啥区别

通常情况下块状元素是占满整个一行的也就默认width：100%
但是如果给元素加了绝对定位，该元素的宽度就具有了包裹性，width与元素的最大宽度相关，并不是100%，所以需要用到水平居中特性时需要将width设为100%

Cloud1258 · 发表于 2019-8-20 23:49:01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>欢迎来到html的世界</title>
        <style type="text/css">
             html,body{
                 height: 100%;
                 color: #ffffff;
             }
             body{
                 background: url(link.jpg) center center;
                 background-size: cover;
                 margin: 0;
                 padding:0;
                 position: relative;
             }
             #container{
                 width: 100%;
                 text-align: center;
                 position: absolute;
                 top:50%;
                 transform: translateY(-50%);
             }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>我爱编程</h1>
            <p>编程能静心</p>
            <a href="https://cn.bing.com">必应</a>
        </div>
    </body>
</html>

ricia · 发表于 2020-2-21 16:46:04

EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

在css里面应该这样注释/* position: relative; */ ，不过写成好像也不生效了
html{
      height: 100%;
      color: #FFFFFF;
   }
要设置body的position为relative，上面的html后面应该加上  ,body

ricia · 发表于 2020-2-21 16:53:53

background: url("../img/ilovefishc.jpg") center center; 和 background-image: url("../img/ilovefishc.jpg"); 有什么区别呀！后面这段代码加center后就无法显示背景图了。

huanghuiyv · 发表于 2020-8-15 16:00:26

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST! TEST!!</title>
        <style type="text/css">

            html {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                /* position: relative; */
                background: url([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]) center center;
                background-size: cover;
            }

            #container {
                width: 100%;
                text-align: center;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
            }

            h1 {
                color: pink;
            }

            p {
                color: honeydew;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h1>我爱鱼C</h1>
            <p>让编程改变世界!</p>
            <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
        </div>
    </body>
</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 5 - 优化内容区设置