本篇技术博文摘要 🌟
- 本文全面梳理CSS核心布局技术与视觉呈现核心知识点，聚焦现代Web开发关键实践。从盒子模型基础出发，深入解析内边距(padding)对元素尺寸的影响及其解决方案，剖析外边距(margin)塌陷现象与BFC布局上下文应对策略。
- 通过Flex弹性布局模块化拆解响应式设计实现路径，结合浮动布局历史演进与clearfix清除浮动方案对比，构建多维度布局知识体系。重点演示定位机制(position)在层叠上下文中的精准控制，配合2D/3D转换(transform)实现空间视觉交互。
- 进阶部分涵盖CSS动画全流程，从过渡(transition)平滑效果到关键帧(@keyframes)复杂动画编排，完整呈现动态交互实现范式。
- 特别整合移动优先设计理念，通过媒体查询(media query)适配方案与字体图标优化实践，系统构建响应式开发能力闭环，助力开发者高效解决实际布局难题。
引言 📘
- 在这个变幻莫测、快速发展的技术时代，与时俱进是每个IT工程师的必修课。
- 我是盛透侧视攻城狮，一名什么都会一丢丢的网络安全工程师，也是众多技术社区的活跃成员以及多家大厂官方认可人员，希望能够与各位在此共同成长。
@keyframes和animation属性调用动画
@keyframes 和 animation 属性
上节回顾
目录
22-@keyframes 和 animation 属性来创建动态的、不断变化的动画
01-盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*浏览器默认border=8，唯一用于布局的是水平居中*/
div {
width: 300px;
height: 300px;
background-color: pink;
padding-left: 4px;
border: 3px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div>
cfdaffshydghjgdjdnjjjjjjjjjjjjjjj
</div>
</body>
</html>网页效果图：
02-内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*盒子大小：content+padding+border*/
div {
width: 600px;
height: 600px;
background-color: pink;
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
padding: 30px;/*全部往内推30*/
padding: 30px 50px;
padding: 10px 60px 90px;
/* 上，左右，下 */
padding: 10px 30px 60px 90px;
/* 上 右 下 左 ，顺时针*/
}
</style>
</head>
<body>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque quae possimus temporibus! Rem, eius
voluptatibus? Veniam voluptas voluptatem inventore eaque dolorum repellat non quam. Numquam temporibus nobis
facere pariatur mollitia?
Beatae pariatur itaque at tenetur dolor nulla sapiente quam nemo! Animi praesentium labore qui esse delectus
expedita suscipit corrupti vitae, possimus est eos voluptate quos recusandae aliquid eveniet dolorem explicabo?
Vero quisquam animi reiciendis, ab velit laboriosam placeat tempore temporibus eligendi, asperiores, adipisci
molestias! Saepe modi mollitia nobis velit ipsum aspernatur accusamus perspiciatis minima nemo delectus beatae
cumque, vero voluptatem.
</div>
</body>
</html>网页效果图：
03-外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*外边距不影响盒子大小*/
ul li {
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span {
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
margin: 40px;
margin: 40px 30px;
margin: 40px 30px 23px;
margin: 40px 2px 34px 40px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span><span>2</span><span>3</span><span>4</span>
</body>
</html>网页效果图：
04-外边距塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: aquamarine;
/* border: 1px solid red; */
padding: 5px;
}
/*提前把样式写好！！！*/
.son {
width: 100px;
height: 100px;
background-color: pink;
/* margin-bottom: 20px; */
overflow: hidden;
}
.son2 {
margin-top: 10px;
}
.son3 {
margin-top: 10px;
}
.son1 {
margin-top: 300px;
}
/* margin塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走
给父元素添加边框或者填充父亲
overflow:hidden; -------偏方
、 padding: 10px 20px 40px 50xp 顺时针 */
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
<span>cnidsjkjcdscndskcm</span>
</body>
</html>网页效果图：
05-文本溢出（效果略）
网页效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 800px;
height: 800px;
background-color: pink;
/* overflow: auto; 尽可能的远离左右侧*/
/* overflow: hidden;底部无法显示在可视窗口，检查网页代码则可以 */
/* overflow: visible;可视窗口变大*/
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed reiciendis veritatis iure provident mollitia
dignissimos quia, facilis facere quasi enim. Hic quam velit quaerat nihil illum inventore consequatur, odio
consequuntur?
Minima error est nulla nesciunt facere deserunt, delectus deleniti velit dolores rem sint autem repudiandae
impedit molestiae a quaerat praesentium quisquam eos ad quibusdam ipsa voluptate ducimus dolorum. Magni,
repudiandae.
Hic quas illum totam, perferendis dolorem fugiat laudantium accusantium mollitia saepe cupiditate iure illo
dolor veritatis sed, odit velit. Et laboriosam consequatur eius unde vel odio pariatur velit in fugit.
Eligendi veniam non quo, voluptatem rerum minus maxime aliquid dolore ullam est alias quibusdam natus unde porro
officiis possimus recusandae qui suscipit. Labore a corporis explicabo tempore iusto ullam aliquid!
Suscipit accusamus eaque culpa corporis expedita incidunt nemo distinctio atque harum inventore sequi ratione
magni, laboriosam, repellendus iusto illum unde omnis, quisquam officiis esse dolore fugit consequuntur?
Veritatis, omnis soluta?
Impedit, voluptatum! Necessitatibus dignissimos eum adipisci veritatis reprehenderit voluptates possimus nemo
rerum amet ratione! Corrupti voluptates unde mollitia quaerat placeat, repudiandae, autem earum nemo minima
atque laudantium soluta inventore veniam.
Excepturi veniam animi quas voluptatem dicta voluptates, voluptate laborum incidunt dolorem recusandae fugiat,
illum nesciunt vel repellendus hic aspernatur suscipit vitae commodi similique iure est quo nisi. Sunt, eius
impedit!
Distinctio, beatae voluptatem accusantium quas necessitatibus esse enim quos sed ad error commodi, consectetur
aut optio eum ipsum voluptates, iusto nemo aperiam! Quidem corporis dignissimos veniam consequatur
necessitatibus error dolorum.
Id labore deserunt inventore voluptatem. Voluptatibus alias veniam possimus recusandae, consequuntur quia
voluptatum magni id laborum tempore quas harum perspiciatis iste voluptates ea? Neque consectetur id, quo
quisquam natus doloremque?
Nam perspiciatis illum rem nemo esse, odio ullam corrupti at et harum nesciunt? Quod cupiditate optio eaque
aliquid, similique incidunt omnis minus aut odio sit reiciendis possimus nihil? Pariatur, fugiat!
Inventore sed laudantium laborum adipisci, id repellat quasi officiis, voluptatibus debitis tempora sapiente
doloremque eaque expedita illo recusandae explicabo molestiae quaerat optio, accusantium odit? Quidem quisquam
ab quasi voluptates reiciendis.
Laudantium, odit veniam. Itaque culpa tenetur atque. Voluptates iusto assumenda facere quidem eos. Magnam nihil
sed ut nisi quaerat, itaque eum exercitationem quidem laboriosam sit illum illo amet placeat quasi.
Delectus, hic ad unde molestias dignissimos quibusdam reprehenderit itaque sed molestiae assumenda ipsa ullam
exercitationem voluptatum corporis explicabo non nemo neque modi, labore error tenetur. Possimus sint aut non
dolore.
Expedita architecto dolorum non libero facere distinctio quia eaque dolores, recusandae iure. Deserunt quibusdam
vel et asperiores, sunt, ut repellat laborum delectus vitae eveniet commodi. Blanditiis quibusdam voluptates
doloribus facere!
Aspernatur dolorem enim labore soluta, minima, cum tenetur provident mollitia optio magni, unde explicabo natus
voluptatibus excepturi nam. Optio quo veniam, commodi harum dolorem error nobis sint amet deleniti! Numquam.
Dignissimos nulla ullam facere perspiciatis consectetur dolores qui. Est quidem quas, veritatis fugiat vel culpa
aperiam. Quas nostrum excepturi amet? Magni explicabo eum error atque, nostrum delectus dolorum maiores
veritatis.
Officia, cum. Voluptate earum autem laudantium nulla sunt obcaecati assumenda nostrum hic, iste quas expedita
omnis debitis facilis excepturi cum quisquam porro. Dolorem porro, magnam saepe sed quae tenetur vero!
Explicabo nemo saepe quas iure dicta magni aliquid ipsa magnam. Est reprehenderit quam, odit non molestiae
corrupti molestias vero assumenda et incidunt, nesciunt laboriosam optio ipsum. Pariatur minus iste placeat!
Similique corporis aperiam, modi vitae distinctio facere atque, aut aliquid consequuntur ullam, beatae autem.
Distinctio, sint excepturi! Tempore recusandae in delectus placeat sed enim voluptates ad illum magnam,
repellendus accusamus?
Corporis unde, minima iure suscipit fugiat architecto adipisci nobis animi alias aspernatur in molestiae
repellat veniam, ut dolores labore vero aperiam. Sequi ratione nobis, eius quibusdam sed accusantium quo
doloremque.
Soluta exercitationem est fuga aliquid autem expedita sequi iusto molestias explicabo! Delectus maiores
perferendis atque quaerat eligendi quisquam neque quasi beatae officia fugiat! Possimus molestiae soluta alias
consectetur officiis maiores.
Nam architecto consequatur reiciendis, sequi ratione similique eligendi qui cupiditate repellat officia
asperiores omnis. Alias accusamus nobis eum saepe blanditiis, provident quam nesciunt, sed nihil doloremque
excepturi autem itaque maxime?
Repellendus nemo voluptas esse? Excepturi cum labore non aperiam, laborum, quas facilis officia at voluptates
obcaecati dolorum beatae hic expedita, saepe temporibus sed. Dolor eveniet, ipsum quo cumque rem expedita!
Iusto iste, beatae delectus ipsa voluptatem consectetur expedita quam voluptate suscipit porro, sequi quae
tempore, corrupti excepturi quisquam! Autem inventore accusantium ullam doloribus cupiditate eos quo iste
quisquam porro asperiores?
Officia tempora rerum dignissimos. Fugit voluptatibus officiis tempora optio ratione! Id velit amet, illo dolor,
voluptatum quo deserunt natus corrupti reiciendis voluptatibus iusto voluptates atque delectus ex et incidunt
minus!
Reiciendis temporibus quia accusamus reprehenderit ipsum saepe quidem doloribus. Reprehenderit, repellendus.
Illum quibusdam sit aut aliquid! Laborum vitae minus sequi optio, placeat id, molestias at adipisci dolorem
beatae nostrum fugiat.
Pariatur tenetur iste dolore illum, adipisci veniam repellendus! Rem cumque esse nulla fugit saepe ea nesciunt,
id suscipit hic et! Molestiae id consequatur magnam facere accusamus nobis temporibus porro veniam!
Iure non praesentium sed eveniet, quo voluptatibus animi molestias itaque voluptatem magni iste suscipit omnis
unde nihil ipsum ex sint id pariatur minus aut est? Obcaecati ipsam excepturi vitae necessitatibus!
Animi sapiente vitae ex aperiam maiores placeat sint debitis, et labore velit, ut asperiores! Repellendus odit
provident facilis tempora, adipisci est cum consequuntur explicabo cupiditate voluptatum placeat temporibus fuga
aperiam!
Placeat quo optio quae dolor officia dicta fugit excepturi nihil. Culpa est ab porro consequatur similique sequi
perspiciatis praesentium reprehenderit maiores, iste dolore dolorum dolor, a omnis magnam rerum facere.
Voluptate inventore blanditiis ducimus eos atque possimus dolorum maxime esse, quo, voluptatibus sunt nemo quam
facere amet laboriosam at totam aliquid ipsa illum! Voluptas, et? Provident ipsam neque quod consectetur.
Quisquam nisi, soluta optio debitis perspiciatis iure aspernatur quod quaerat nostrum impedit adipisci, ullam
expedita. Dicta numquam, tempore in quasi similique quidem a itaque dolores odit dignissimos dolorem aut
excepturi.
Enim incidunt quos inventore dolore necessitatibus sed minima earum facere nam vero. Adipisci ab asperiores
dolore accusantium modi voluptas, delectus quis quae perspiciatis ducimus commodi impedit reprehenderit vero non
assumenda.
Animi mollitia, fugiat architecto quaerat velit officia. Quaerat perferendis ipsum ratione nemo ipsam reiciendis
neque, odio, tempore sint facere hic, veniam eveniet non ab quos repellat illum saepe nihil explicabo.
Ullam fuga expedita rem recusandae? Excepturi quaerat, sunt unde totam voluptatem tempore. Aperiam, ipsum alias
adipisci quod sunt amet aspernatur quidem! Provident ullam tenetur ipsa eaque eum porro autem quis!
Dolore quas nisi nostrum itaque necessitatibus non possimus iure, voluptatibus pariatur incidunt fugiat dolorem
eos. Non quisquam tempora qui id dolores saepe soluta, tempore explicabo quia voluptate, voluptatibus adipisci
eos!
Quaerat cupiditate nihil porro nobis unde laborum, autem laboriosam nemo totam. Eveniet iure obcaecati
asperiores corrupti temporibus cum commodi velit iusto. Blanditiis id nulla eligendi libero, suscipit eveniet
ducimus commodi!
Soluta placeat dignissimos quasi tempora illo. Dolorum error, quam distinctio voluptatibus ut sunt illo, amet
ratione hic iusto quidem praesentium, accusamus nisi repellat porro sapiente est obcaecati alias maiores!
Reprehenderit?
Explicabo recusandae officiis deleniti repudiandae dignissimos sequi quo aut eveniet esse? Cumque dolor
reprehenderit vitae corporis veniam animi nam ipsa magnam officiis totam dicta consequatur, recusandae ullam!
Molestias, quam delectus.
Facilis similique quam veritatis totam voluptatibus repudiandae dolorem nobis ad animi? Maiores maxime tempora
qui doloremque repudiandae quae, eius magni suscipit eaque non eveniet at, voluptatum in vitae, culpa obcaecati!
Officia ut qui dolorem impedit repudiandae laborum placeat temporibus molestiae neque corrupti id, ipsum, quod
omnis reprehenderit aliquid. Recusandae sunt corrupti tempora totam molestiae voluptatibus architecto a neque
debitis ut!
Ipsum molestias, aut, dolores atque perspiciatis aspernatur dolore, possimus amet mollitia suscipit esse? Sed
dolorem doloremque dignissimos reprehenderit sunt suscipit odit sint aut doloribus, consequatur dicta labore,
repellendus unde eveniet?
Itaque dolores nam blanditiis at ab architecto delectus? Eius ipsam quibusdam ipsa architecto delectus enim non
quam voluptate inventore perferendis accusamus suscipit rerum dolore iste cupiditate illum, nihil itaque hic!
Nisi architecto, quos maiores amet quaerat, eaque alias, corrupti earum totam vero odio vitae ratione officiis
laborum molestias! Cupiditate libero nisi cum molestias! Fugiat odio nobis minus laudantium reprehenderit
eligendi!
Qui esse reiciendis dolor aspernatur laudantium eum expedita tempora atque corrupti. Eveniet, iure, minus neque
voluptate ipsa itaque quae debitis assumenda tempore veniam non odio reiciendis rem vel asperiores earum.
Tempora nisi nostrum, voluptate officia similique culpa placeat. Rem ratione explicabo sunt tempora. Aut,
commodi temporibus. Quo eaque enim nihil, ratione, perferendis ullam dolorum totam veritatis praesentium
recusandae sit nemo.
Minus eligendi in, adipisci ad amet sed molestias dolores quos, beatae, nemo quasi necessitatibus suscipit ab
aspernatur optio reprehenderit quas laboriosam. Optio, repellat vitae. Voluptates omnis quisquam non doloribus
iure?
Impedit fugiat repellat quasi. Voluptate rem nam voluptates doloribus, consequatur accusamus quasi molestias hic
eaque ratione non ducimus itaque iure sint perferendis sunt vero deleniti provident cupiditate nisi iusto esse?
Officiis maiores accusantium in possimus, commodi adipisci aut nam facere deserunt consectetur. Voluptate neque
vero veritatis eum facilis similique architecto nesciunt quas natus eos? Est sequi nisi error itaque saepe.
Ipsa autem tempore animi harum! Saepe earum expedita, dolorem consequatur corporis, aliquid soluta eius
sapiente, velit placeat quisquam vel libero perferendis minima voluptatibus a aspernatur eaque error ducimus?
Aperiam, consectetur.
Illo explicabo, saepe distinctio quas suscipit eveniet eaque iure quia earum praesentium cupiditate provident
quaerat expedita labore aperiam deserunt dignissimos repellat magnam quidem odio atque impedit ipsum,
consectetur ad. Veritatis?
Enim voluptatem quasi illo. Explicabo aspernatur alias voluptas facere laboriosam iure aperiam aliquid nisi
enim. Deserunt ex similique quis delectus, voluptas accusamus aliquam illo, necessitatibus incidunt, aut commodi
aspernatur sunt.
Omnis corrupti voluptates voluptas numquam nobis, ipsum quia quisquam ea deserunt minima! Esse non officiis quos
eos aliquid a est voluptatem quod quisquam, nostrum pariatur animi molestias corrupti placeat nulla?
Qui nesciunt non cumque odit, quasi eius, incidunt eum veritatis tempora explicabo, facere fugiat labore
accusantium mollitia! Inventore non eaque itaque quos natus sunt, illo, unde iure quam sequi ipsa.
Officiis non dolore quod facilis, tempore necessitatibus provident et dolor earum quaerat corporis labore
dolorum atque, perferendis iusto quam. Molestiae alias deleniti beatae necessitatibus, perspiciatis libero quae
quos natus voluptatum!
Facere dolore fuga iusto reiciendis alias, provident sed tenetur deserunt nisi vitae corporis consequuntur
culpa. Expedita sunt sit et, impedit ratione illum porro totam pariatur, ullam, dolores excepturi magnam eius!
Eos vitae exercitationem quam hic esse qui accusantium perferendis velit minus adipisci, tempore iusto
architecto sunt eum, optio, temporibus quaerat. Voluptates distinctio exercitationem ad voluptas, atque
reiciendis provident maiores quas!
Aliquid, eos? Atque accusamus necessitatibus distinctio quis commodi quo ducimus tempora deserunt culpa maiores
optio aliquid perferendis, debitis molestiae at modi delectus dolores inventore dolorem nisi aliquam provident
harum illum.
Eius eum eaque voluptatibus consequatur quibusdam, maxime quia veritatis, accusantium laboriosam odit ad alias
aliquid quo repellat obcaecati ea? Deleniti magni et veritatis maxime quo, natus impedit quod quia consequuntur!
Error commodi quod ratione quos, ad veritatis dolorem ipsum repellendus deserunt neque obcaecati accusantium
ducimus magni tempora eveniet sed laudantium adipisci. Odit corrupti minus veritatis quas aliquid consectetur
delectus aut?
Blanditiis, illo labore atque laudantium voluptate voluptates repudiandae inventore quia ad, ea facilis rem
nobis omnis aperiam ullam sapiente ratione ipsam voluptatem dolores expedita alias ab vero cum? Officiis, sunt!
Tenetur quibusdam corporis deleniti rem excepturi optio, quis error assumenda provident, esse earum eos quia
repudiandae omnis similique accusamus voluptatem fuga magni reprehenderit in blanditiis laboriosam? Nemo saepe
numquam incidunt.
Quas, ex repudiandae perferendis in distinctio autem accusantium ipsum porro mollitia minima provident minus
tempora aliquid suscipit? Blanditiis minus, ipsa sint veniam ad sed repudiandae eligendi, quidem dolores, ea
deserunt.
Quaerat, adipisci facilis rem, in id dolorum reprehenderit modi tempora rerum architecto dolore voluptates
fugiat nobis nostrum voluptatem dicta ipsum. Quae doloribus voluptates dolorum dignissimos soluta nobis cumque
suscipit ipsam.
Facere necessitatibus tempora rem quod voluptatum aliquid mollitia sit ex laborum omnis, sapiente eum eligendi?
Magnam tempora aut autem doloribus temporibus, ducimus deleniti optio magni tempore, doloremque, eaque nulla
alias.
Eum eius distinctio quisquam magni accusamus facilis incidunt maiores deleniti iure, consequatur labore, earum
ab cum dolores commodi voluptatibus. Officia perspiciatis dolor cupiditate quam perferendis dicta reiciendis
nihil iusto provident.
Optio atque minus beatae praesentium autem inventore? Libero nobis mollitia illo veritatis, explicabo saepe
animi iusto sint excepturi laudantium et maxime perferendis nihil autem consequuntur hic impedit quaerat
laboriosam aspernatur.
Quo magni repudiandae quam praesentium maiores ipsa fugiat. Itaque rem ipsa laudantium totam, autem asperiores
temporibus voluptas, dolorem enim architecto earum ab id culpa libero accusamus ut fugiat animi inventore.
Quia laboriosam, ea repudiandae vitae molestias itaque atque ducimus, id debitis dicta mollitia incidunt eaque
quos veritatis asperiores, facere quisquam at cupiditate aliquam quidem eius necessitatibus sequi dolore
eveniet! Voluptatibus.
Quas unde culpa architecto dignissimos ea in quasi doloremque, sed qui, dolorum assumenda quibusdam officiis
ipsam tempore eaque voluptate quae vitae repellat. Quae inventore itaque sunt culpa architecto omnis? Rem?
Voluptatibus incidunt perspiciatis culpa magnam. Aperiam explicabo molestiae nostrum fugit laborum reprehenderit
amet officiis corporis, eligendi, ea modi nemo, ad quas omnis tempora perferendis odio laudantium maiores quos
debitis. Saepe.
Corporis, hic deserunt quo laborum atque ad nulla perferendis, ducimus fugit nesciunt consequuntur ipsum
placeat! Quod commodi quisquam repudiandae amet, natus ad id quae! Ullam eum minima impedit quisquam earum?
Saepe maiores quo minus delectus cupiditate, in obcaecati deserunt dolores, officiis inventore totam! Aliquid
iste at fugiat sint doloribus error? Laudantium inventore odit nam aliquam, necessitatibus provident nemo saepe
sequi?
Numquam sunt, inventore itaque hic excepturi nesciunt consequatur totam explicabo omnis nulla nostrum, facilis
impedit ipsam dignissimos ullam aliquam? Dicta, vel id aliquam recusandae itaque iste laudantium eos distinctio
exercitationem.
Sequi delectus impedit veritatis ut quis quod neque, eligendi possimus nobis consectetur ratione sed repellendus
aliquid omnis ipsum nihil provident aut? Saepe fuga aliquam rem eaque? Soluta a numquam veritatis.
Natus, pariatur iure! Neque, dicta? Aut unde, blanditiis nam quam laboriosam tempore ullam optio eligendi id
eius modi atque velit neque culpa maiores. Cumque nam cupiditate, magnam animi at laboriosam?
Quisquam blanditiis consectetur harum fuga ratione laboriosam, repellendus quidem repellat molestiae, rem
corporis libero, veniam rerum labore temporibus? A obcaecati doloremque assumenda ipsam repudiandae doloribus
tempora, fuga amet velit suscipit!
Expedita dolorum ipsum assumenda esse obcaecati repudiandae, reiciendis soluta ab odio. Illo corporis at
assumenda expedita est. Ad ex ea sint accusamus culpa! Culpa consectetur doloremque, officiis quod consequatur
labore?
Atque est voluptatibus pariatur doloremque, deserunt consequuntur! Eum eveniet architecto ea iure in reiciendis
quidem error laboriosam impedit, fugiat autem dolores quibusdam distinctio nulla odio nobis officia consequuntur
maxime ipsa!
Et ullam illum voluptates, voluptas ipsam officia officiis quis voluptate tempora eaque dolore quod blanditiis,
dolores laudantium, explicabo ducimus hic? Ipsam odio facere dolor commodi, minus corrupti cupiditate quas. Non?
Tenetur quo hic exercitationem provident quod minus, esse repudiandae minima. Officia accusamus nisi quam
tempora excepturi nulla a ex molestiae maiores delectus perspiciatis illo aliquid similique corporis, error
alias cupiditate!
asperiores voluptate repellat qui cumque non excepturi dolore, odio maxime
</div>
</body>
</html>
06-样式继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a {
font-size: 40px;
} */
div {
font-size: 50px;
color: #807474;
/* padding: 13px; */
}
/* css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身更改样式，因为a链接部分样式无法继承
*/
</style>
</head>
<body>
<div>
杀手锏得看懂开始<br>
<span>我是经常都是</span><br>
<a href="#">；的策略模式的流程的</a>
<i>cdjckdd </i>
</div>
</body>
</html>网页效果图：
07-解决padding影响盒子大小问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持多语言字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，以适配移动设备 -->
<title>Document</title> <!-- 设置网页标题 -->
<style>
/* CSS样式 */
div {
width: 300px; /* 设置div的宽度为300px */
height: 300px; /* 设置div的高度为300px */
background-color: pink; /* 设置div的背景色为粉色 */
padding: 40px; /* 为div内内容添加40px的内边距 */
border: 2px solid red; /* 为div添加红色边框，宽度为2px */
/* box-sizing: border-box; 解决padding导致盒子尺寸变大的问题 */
box-sizing: border-box; /* 使padding和border包含在div的总宽度和高度内 */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quisquam aliquam dolores eligendi neque illo
velit facere deleniti nam, laboriosam quasi, ut nisi qui quae rerum. Atque ea excepturi deleniti.
</div> <!-- div容器内包含一些拉丁文本内容 -->
</body>
</html>
网页效果图：
08-flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* flex默认为行布局的排列方式 */
flex-direction: row-reverse;/*默认从左到右布局，反之：row-reverse*/
flex-direction: column;/*默认从上到下，反之：column-reverse*/
flex-direction: column-reverse;
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* 主轴（行方向）上的布局 */
justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
/* 侧轴（列方向） */
/* align-items 单行的 align-content：多行的*/
align-items: center;
/* align-items: end; */
align-items: start;
/*多行侧轴*/
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;/*两边贴上下边*/
align-content: space-around;
align-content: space-evenly;
}
.son {
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
</div>
</body>
</html>网页效果图：
09-flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持多语言字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，以适配移动设备 -->
<title>Document</title> <!-- 设置网页标题 -->
<style>
/* 样式区域 */
/* .father 类样式：父级容器 */
.father {
width: 800px; /* 父容器的宽度 */
height: 800px; /* 父容器的高度 */
background-color: pink; /* 父容器背景颜色为粉色 */
display: flex; /* 使用flex布局 */
/* 设置flex方向为反向行布局 */
flex-direction: row-reverse; /* 从右到左的行布局 */
/* flex-direction: column; 设置为列布局，默认为上到下排列 */
/* flex-direction: column-reverse; 设置为反向列布局 */
/* flex-direction: row; 设置为默认的从左到右的行布局 */
flex-wrap: wrap; /* 如果子元素超出容器宽度，将换行 */
/* flex-wrap: nowrap; 设置不换行，所有子元素会在一行内显示 */
/* 主轴（行方向）上的布局 */
justify-content: center; /* 子元素居中排列（主轴方向） */
justify-content: end; /* 子元素靠右排列（主轴方向） */
justify-content: space-around; /* 子元素均匀分布，并且每个子元素两侧有相等的间距 */
justify-content: space-evenly; /* 子元素均匀分布，且子元素之间和两端的间距相等 */
justify-content: space-between; /* 子元素均匀分布，两端的子元素贴紧容器边缘 */
/* 侧轴（列方向）上的布局 */
align-items: center; /* 子元素在侧轴方向上居中对齐 */
/* align-items: end; 设置为子元素在侧轴方向上靠底部对齐 */
align-items: start; /* 子元素在侧轴方向上靠顶部对齐 */
/* 多行布局时，设置侧轴（列方向）的对齐方式 */
align-content: start; /* 多行的子元素靠上对齐 */
align-content: end; /* 多行的子元素靠下对齐 */
align-content: center; /* 多行的子元素在侧轴方向上居中对齐 */
align-content: space-between; /* 多行子元素间隔均匀，两端贴紧容器 */
align-content: space-around; /* 多行子元素均匀分布，且每行之间有相等间距 */
align-content: space-evenly; /* 多行子元素均匀分布，且每行之间和两端的间距相等 */
}
/* .son 类样式：子元素 */
.son {
width: 170px; /* 子元素宽度 */
height: 200px; /* 子元素高度 */
background-color: aqua; /* 子元素背景颜色为水绿色 */
}
</style>
</head>
<body>
<div class="father">
<!-- 子元素区域 -->
<div class="son">1</div>
<div class="son">2</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
</div>
</body>
</html>
网页效果图：
10-定位补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
}
.son1 {
position: absolute;
/* z-index 定位中显示的优先级，越大越优先 */
z-index: 5;
top: 100px;
left: 50px;
background-color: aqua;
}
.son2 {
position: absolute;
z-index: 3;
top: 110px;
left: 80px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">111</div>
<div class="son son2">222</div>
</div>
</body>
</html>网页效果图：
11-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
float: left;
}
</style>
</head>
<body>
<img src="https://img1.baidu.com/it/u=3991541016,2951402135&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod consequuntur dicta illum nesciunt praesentium autem
natus deserunt odio esse, eius earum eveniet minima tempora, ipsum, ipsam sequi. Deserunt, natus et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, ea doloribus! Autem ex error rerum nemo nostrum.
Ratione assumenda debitis quasi minus nesciunt, ex obcaecati sit atque neque. Tenetur, nostrum.
Vero voluptas dolor deserunt quas mollitia, cumque magni voluptatum non nulla ea sed, vel, dolores ex perferendis
beatae nemo accusamus consequatur totam ipsum incidunt quae inventore molestiae temporibus sit? Doloremque.
Architecto facilis sunt quas possimus eos quasi, aspernatur dolore aliquam deserunt amet quibusdam, dolores cum
beatae, ut perferendis quam esse assumenda blanditiis quis placeat ipsam repudiandae dicta. Ipsam, debitis atque.
Nemo provident unde quas iste, sunt sit, repellendus atque facere corporis, id tenetur aspernatur. Et molestiae
officiis quod tenetur vero numquam nulla in illo. Soluta quod iure ad atque quas?
Quos corrupti quaerat sint doloremque officia ullam voluptas. Distinctio maiores eaque ullam assumenda atque
asperiores officiis hic vero! Atque, doloribus unde! Vero neque mollitia nostrum minima quos praesentium, iusto
commodi.
Voluptate nam placeat dolorem facere at error exercitationem odit nihil corrupti amet neque modi enim, dolores
fugiat quos eaque! Deleniti quidem ullam sit nobis laudantium accusantium provident commodi natus dolor.
Libero, corporis. Veniam fuga laudantium, quam culpa repellat aut eius quod praesentium similique blanditiis
asperiores? Officia maiores, perferendis qui dignissimos cupiditate, unde placeat explicabo in vel repellendus non
iste aliquam?
Eligendi nulla nesciunt molestias. Consectetur quo quasi debitis magnam, nihil velit unde accusantium tempore et
error suscipit asperiores soluta ex fuga doloremque ratione vel aliquam in temporibus quidem non animi?
Ipsum molestiae fugiat sint? A amet ea eveniet. Autem deserunt nobis enim cumque ex esse facere a et commodi iste
nemo ipsam, omnis fugit suscipit sapiente dolores error dolor quo.
Laborum consequuntur voluptatum corporis cupiditate sequi? Hic non adipisci culpa natus voluptatibus neque doloribus
maiores in esse nostrum. Aperiam beatae minima ratione expedita, commodi maiores voluptate reiciendis molestias sunt
possimus.
</body>
</html>网页效果图：
13-float讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 1000px;
/* height: 1000px; */
background-color: pink;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
background-color: blue;
float: left;
/* 浮动，会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时，其父元素的高度发生塌陷 */
}
.son3 {
width: 400px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
<div class="son son3"></div>
</div>
</body>
</html>网页效果图：
14-float问题解决办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ul { */
/* height: 300px; */
/* overflow: hidden; */
/* } */
ul li {
/* float: left; */
float: right;
list-style: none;
margin-right: 20px;
}
/* div {
clear: both;
} 从div开始向下都是不浮动的*/
p {
/* clear 清楚浮动 */
clear: both;
}
</style>
</head>
<body>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<div></div>
<p>我是完全不想动位置的</p>
</ul>
</body>
</html>网页效果图：
15-渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 800px;
background-image: linear-gradient(to right, green, pink, yellow, red);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>网页效果图：
16-字体图标
<!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="../font_3931265_h8zi8uedfw8/iconfont.css">
<script src="../font_3931265_h8zi8uedfw8/iconfont.js"></script>
<!-- <style>
span {
color: pink;
}
.icon-a-008_huoguo {}
font-size: 400px;
}
</style> -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon {
font-size: 70px;
}
</style>
</head>
<body>
<span class="iconfont icon-a-008_huoguo"></span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-008_hanbaokuaican
"></use>
</svg>
</body>17-媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8，支持多种语言字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，确保在移动设备上适配 -->
<title>Document</title> <!-- 设置网页的标题 -->
<style>
div {
background-color: pink; /* 默认情况下，所有 <div> 元素的背景颜色为粉色 */
}
/* @media only screen and (max-width:699px) and(min-width:550px){
div{
background-color: pink;
}
} */
/* 这段被注释的媒体查询原本是希望在宽度为550px到699px之间时背景为粉色，但被注释掉了 */
@media screen and (min-width: 900px) {
div {
background-color: green; /* 当屏幕宽度大于或等于900px时，<div>的背景色改为绿色 */
}
}
@media only screen and (min-width: 320px) and (max-width: 700px) {
div {
background-color: blue; /* 当屏幕宽度在320px到700px之间时，<div>的背景色改为蓝色 */
}
}
</style>
</head>
<body>
<div>
scdscdc <!-- 在页面上显示的内容 -->
</div>
</body>
</html>
网页效果图：
18-默认外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
woshinsaxnsj
<ul>
<li>cnidsjkjcdscndskcm</li>
</ul>
</body>
</html>网页效果图：
19-2d转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8，支持多种语言字符 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，确保在移动设备上适配 -->
<title>Document</title> <!-- 设置网页的标题 -->
<style>
.father {
width: 300px; /* 设置父容器的宽度为300px */
height: 300px; /* 设置父容器的高度为300px */
border: 1px solid black; /* 设置父容器的边框为1px黑色实线 */
margin: 100px auto; /* 设置父容器的上下外边距为100px，左右居中 */
}
.son {
width: 300px; /* 设置子容器的宽度为300px */
height: 300px; /* 设置子容器的高度为300px */
background-color: pink; /* 设置子容器的背景色为粉色 */
/* 以下是不同的 CSS 变换方式，注释部分演示了几种常见的 transform 用法 */
/* 平移： */
/* transform: translate(-40px, 40px); -- 水平移动-40px，垂直移动40px */
/* transform: translateX(70px); -- 仅水平移动70px */
/* transform: translateY(-60px); -- 仅垂直移动-60px */
/* 旋转： */
/* transform: rotateZ(40deg); -- 沿Z轴旋转40度 */
/* 复合写法：旋转和平移可以一起写 */
/* transform: translate(100px) rotateZ(45deg); -- 平移100px后旋转45度 */
/* transform: rotateZ(45deg) translate(100px); -- 旋转45度后平移100px */
/* 缩放： */
/* transform: scale(1.5); -- 放大为原来的1.5倍 */
/* transform: scaleX(2); -- 沿X轴放大2倍 */
/* transform: scaleY(2); -- 沿Y轴放大2倍 */
/* 倾斜变形： */
/* transform: skew(40deg); -- 将元素进行倾斜40度 */
/* 复合变换：向右下移动100px，旋转45度，缩放1.5倍 */
transform: translate(100px, 100px) scale(1.5) rotate(45deg); /* 最终应用复合变换 */
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div> <!-- 子容器，内容是“2222222” -->
</div>
</body>
</html>
网页效果图：
20-3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;/*开启3D模式*/
perspective: 800px;
/* （眼睛距离这个东西的距离）perspective-origin: 100px 200px; */
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/*绕X轴转*/
transform: rotateX(45deg);
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/*背部隐藏，效果绕对角线旋转*/
backface-visibility: hidden;
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>网页效果图：
21-过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
/* transition 谁（哪个属性）变化给谁加 */
transition: all 5s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/* backface-visibility: hidden; */
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>网页效果图：
22-@keyframes 和 animation 属性来创建动态的、不断变化的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes myMovie {
from {
width: 200px;
background-color: pink;
}
to {
width: 800px;
background-color: aqua;
}
}
@keyframes myfirst {
0% {
width: 200px;
background-color: pink;
}
20% {
width: 400px;
background-color: green;
}
80% {
width: 800px;
background-color: red;
}
100% {
width: 1200px;
background-color: aquamarine;
}
}
div {
width: 200px;
height: 50px;
background-color: aqua;
animation: myMovie 5s infinite alternate steps(4);
animation: myfirst 5s infinite alternate steps(400);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>网页动画效果图：
@keyframes 和 animation 属性
欢迎各位彦祖与热巴畅游本人专栏与技术博客
你的三连是我最大的动力
点击➡️指向的专栏名即可闪现
➡️ 永恒之心蓝队联纵合横防御
➡️逆向软件破解工程
➡️红帽高级工程师
➡️红帽系统管理员
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
