用户投稿目标做成：
结果作成：
code:
html:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML/CSS教学绝对定位和相对定位</title><link rel="stylesheet" href="css/style.css"></head><body><div class="header"><div class="box"></div> </div></body></html>css:blockquote.q{quotes: none;}blockquote:before,blockquote:after;q:before, q:after{content:''; content:none;}table{border-collapse: collapse;border-spacing:0;}.header{width:300px;height:200;border:1px solid red;}.box{width:100px;height:100px;background: -webkit-linear-gradient(yellow,red);background: -o-linear-gradient(yellow,red);background: -moz-linear-gradient(yellow,red);background: linear-gradient(yellow,red);position:absolute;left:0;bottom:0;right:0;top:0;}老师与助教批改错误点：
作业尝试的很不错呦~
有做出背影渐层效果及设定 position 很棒！
codepen 有免费版 codepen.io/trending
以下提供建议：
HTML 档案命名建议不要用中文字，未来档案上传空间可能会导致档案开启有乱码的可能性
如需让 .box 的基準点为父元素 .header ，
可在 .header 设定 position:relative;(相对定位) 。
那如果没在 .header 设定 position:relative;
(相对定位) .box 定位则会以 body 为基準
微信扫一扫打赏
支付宝扫一扫打赏
