从0开始学web-day10

oxygen_ls

于 2022-01-21 08:35:10 发布

阅读量198

点赞数

分类专栏：前端 # css 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122613826

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

1.复习
day9复习
2.定位属性
定位属性：position
static：默认值静态的
relative：相对定位相对于自身原来位置的偏移，不会脱离正常的文档流
absolute：绝对定位脱离正常的文档流导致后边的上来，不会占据空间如果父元素没有定位，则根据浏览器窗口的第一屏，父元素有定位,则根据离其最近的有父元素
fixed：固定定位脱离正常的文档流根据浏览器可视窗口定位无论是否出现滚动条都会处在给定位置不动
sticky：粘性定位 css3.0新增低版本浏览器不支持必须要指定粘性的位置
定位属性一般跟方向值连用（left right top bottom）
left 与 top 的优先级高于 right 和 bottom
如果想要子元素根据父元素定位，一般父级相对，子级绝对
如果元素没有设置宽高，设置了absolute之后宽高就是内容的宽度，如果设置了就是自己设置的宽高

3.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 相对定位 相对于自己原来位置的偏移 */
        .top1 {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            left: 50px;
            margin: 0 auto;
        }
        .top2 {
            width: 100px;
            height: 100px;
            background: orange;
            margin: 0 auto;
        }
        .top3 {
            width: 100px;
            height: 100px;
            background: rgb(140, 231, 235);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 

     -->
     <div class="top1"></div>
     <div class="top2"></div>
     <div class="top3"></div>
</body>
</html>

4.绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .top3 {
            width: 100px;
            height: 100px;
            background: purple;
        }
        .top2 {
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .link1 {
            width: 500px;
            height: 500px;
        }
        .link2 {
            width: 300px;
            height: 300px;
            background: lightsalmon;
        }
        .link3 {
            width: 50px;
            height: 50px;
            background: lightskyblue;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="top1"></div>
    <div class="top2"></div>
    <div class="top3"></div>
    <div class="link1">
        <div class="link2">
            <div class="link3"></div>
        </div>
    </div>
</body>
</html>

5.相对定位绝对定位的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            width: 1000px;
            height: 400px;
            background: red;
            margin: 0 auto;
            position: relative;
        }
        .top1 {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            right: -100px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top1"></div>
    </div>
</body>
</html>

6.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 300px;
        }
        .top {
            width: 100px;
            height: 100px;
            background: violet;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
</body>
</html>

7.粘性定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 100px;
        }
        .top1 {
            width: 100%;
            height: 50px;
            background: blue;
        }
        .top2 {
            width: 100%;
            height: 60px;
            background: brown;
        }
        .top3 {
            width: 100%;
            height: 20px;
            background: chartreuse;
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="top1">001</div>
    <div class="top2">002</div>
    <div class="top3">003</div>
    <div>004</div>
    <div>005</div>
    <div>006</div>
    <div>007</div>
    <div>008</div>
    <div>009</div>
    <div>010</div>
    <div>011</div>
    <div>012</div>
    <div>013</div>
    <div>014</div>
    <div>015</div>
    <div>016</div>
    <div>017</div>
    <div>018</div>
    <div>019</div>
    <div>020</div>
    <div>021</div>
    <div>022</div>
    <div>023</div>
    <div>024</div>
    <div>025</div>
    <div>026</div>
    <div>027</div>
    <div>028</div>
    <div>029</div>
    <div>030</div>
    <div>031</div>
    <div>032</div>
    <div>033</div>
    <div>034</div>
    <div>035</div>
    <div>036</div>
    <div>037</div>
    <div>038</div>
    <div>039</div>
    <div>040</div>
    <div>041</div>
    <div>042</div>
    <div>043</div>
    <div>044</div>
    <div>045</div>
    <div>046</div>
    <div>047</div>
    <div>048</div>
    <div>049</div>
    <div>050</div>
    <div>051</div>
    <div>052</div>
    <div>053</div>
    <div>054</div>
    <div>055</div>
    <div>056</div>
    <div>057</div>
    <div>058</div>
    <div>059</div>
    <div>060</div>
    <div>061</div>
    <div>062</div>
    <div>063</div>
    <div>064</div>
    <div>065</div>
    <div>066</div>
    <div>067</div>
    <div>068</div>
    <div>069</div>
    <div>070</div>
    <div>071</div>
    <div>072</div>
    <div>073</div>
    <div>074</div>
    <div>075</div>
    <div>076</div>
    <div>077</div>
    <div>078</div>
    <div>079</div>
    <div>080</div>
    <div>081</div>
    <div>082</div>
    <div>083</div>
    <div>084</div>
    <div>085</div>
    <div>086</div>
    <div>087</div>
    <div>088</div>
    <div>089</div>
    <div>090</div>
    <div>091</div>
    <div>092</div>
    <div>093</div>
    <div>094</div>
    <div>095</div>
    <div>096</div>
    <div>097</div>
    <div>098</div>
    <div>099</div>
    <div>100</div>
    <div>101</div>
    <div>102</div>
    <div>103</div>
    <div>104</div>
    <div>105</div>
    <div>106</div>
    <div>107</div>
    <div>108</div>
    <div>109</div>
    <div>110</div>
    <div>111</div>
    <div>112</div>
    <div>113</div>
    <div>114</div>
    <div>115</div>
    <div>116</div>
    <div>117</div>
    <div>118</div>
    <div>119</div>
    <div>120</div>
    <div>121</div>
    <div>122</div>
    <div>123</div>
    <div>124</div>
    <div>125</div>
    <div>126</div>
    <div>127</div>
    <div>128</div>
    <div>129</div>
    <div>130</div>
    <div>131</div>
    <div>132</div>
    <div>133</div>
    <div>134</div>
    <div>135</div>
    <div>136</div>
    <div>137</div>
    <div>138</div>
    <div>139</div>
    <div>140</div>
    <div>141</div>
    <div>142</div>
    <div>143</div>
    <div>144</div>
    <div>145</div>
    <div>146</div>
    <div>147</div>
    <div>148</div>
    <div>149</div>
    <div>150</div>
    <div>151</div>
    <div>152</div>
    <div>153</div>
    <div>154</div>
    <div>155</div>
    <div>156</div>
    <div>157</div>
    <div>158</div>
    <div>159</div>
    <div>160</div>
    <div>161</div>
    <div>162</div>
    <div>163</div>
    <div>164</div>
    <div>165</div>
    <div>166</div>
    <div>167</div>
    <div>168</div>
    <div>169</div>
    <div>170</div>
    <div>171</div>
    <div>172</div>
    <div>173</div>
    <div>174</div>
    <div>175</div>
    <div>176</div>
    <div>177</div>
    <div>178</div>
    <div>179</div>
    <div>180</div>
    <div>181</div>
    <div>182</div>
    <div>183</div>
    <div>184</div>
    <div>185</div>
    <div>186</div>
    <div>187</div>
    <div>188</div>
    <div>189</div>
    <div>190</div>
    <div>191</div>
    <div>192</div>
    <div>193</div>
    <div>194</div>
    <div>195</div>
    <div>196</div>
    <div>197</div>
    <div>198</div>
    <div>199</div>
    <div>200</div>
    <div>201</div>
    <div>202</div>
    <div>203</div>
    <div>204</div>
    <div>205</div>
    <div>206</div>
    <div>207</div>
    <div>208</div>
    <div>209</div>
    <div>210</div>
    <div>211</div>
    <div>212</div>
    <div>213</div>
    <div>214</div>
    <div>215</div>
    <div>216</div>
    <div>217</div>
    <div>218</div>
    <div>219</div>
    <div>220</div>
    <div>221</div>
    <div>222</div>
    <div>223</div>
    <div>224</div>
    <div>225</div>
    <div>226</div>
    <div>227</div>
    <div>228</div>
    <div>229</div>
    <div>230</div>
    <div>231</div>
    <div>232</div>
    <div>233</div>
    <div>234</div>
    <div>235</div>
    <div>236</div>
    <div>237</div>
    <div>238</div>
    <div>239</div>
    <div>240</div>
    <div>241</div>
    <div>242</div>
    <div>243</div>
    <div>244</div>
    <div>245</div>
    <div>246</div>
    <div>247</div>
    <div>248</div>
    <div>249</div>
    <div>250</div>
    <div>251</div>
    <div>252</div>
    <div>253</div>
    <div>254</div>
    <div>255</div>
    <div>256</div>
    <div>257</div>
    <div>258</div>
    <div>259</div>
    <div>260</div>
    <div>261</div>
    <div>262</div>
    <div>263</div>
    <div>264</div>
    <div>265</div>
    <div>266</div>
    <div>267</div>
    <div>268</div>
    <div>269</div>
    <div>270</div>
    <div>271</div>
    <div>272</div>
    <div>273</div>
    <div>274</div>
    <div>275</div>
    <div>276</div>
    <div>277</div>
    <div>278</div>
    <div>279</div>
    <div>280</div>
    <div>281</div>
    <div>282</div>
    <div>283</div>
    <div>284</div>
    <div>285</div>
    <div>286</div>
    <div>287</div>
    <div>288</div>
    <div>289</div>
    <div>290</div>
    <div>291</div>
    <div>292</div>
    <div>293</div>
    <div>294</div>
    <div>295</div>
    <div>296</div>
    <div>297</div>
    <div>298</div>
    <div>299</div>
    <div>300</div>
</body>
</html>

8.定位的层叠
定位的层叠
默认谁在后边谁在上边显示
更改定位元素的层叠属性的属性 z-index 没有单位
值越大越靠上显示，值可以是正值也可以是负值必须是整数可以无穷大可以无穷小默认值是auto
9.水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 方式一 */
        /* div {
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            margin-top: -50px;
        } */
        /* 方式二 */
        /* div {
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        } */
        /* 方式三 */
        /* 四则运算函数 calc（）加减乘除 */
        div {
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
            left: calc(50% - 100px);
            top: calc(50% - 50px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>