css布局技巧

阅读: 评论:0

css布局技巧

css布局技巧

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛😜
  • 📝 个人主页:馆主阿牛🔥
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏:css🍁
  • 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

上期传送门:
👉css中的选择器
👉css盒子模型及其实战案例(上)
👉css盒子模型及其实战案例(下)
👉css网页布局之浮动及其实战案例(超详细)
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧
👉css三角的做法及其案例
👉css布局技巧-css三角巧妙运用


目录

    • 📋 个人简介
    • 解释
    • 案例

解释

我们前面讲浮动的时候说道浮动的元素会“飞起来”,不占有位置,会破毁标准流,导致浮动的元素下面的标准流会跑到浮动元素的位置被浮动的元素压住,但是,我们之前在浮动那一节说过,浮动产生的目的就是让文字围绕浮动元素的,即浮动的盒子不会压住文字,利用这个特性可以很好的简化某些布局。

案例

<!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;}.box{width: 800px;height: 132px;background-color: skyblue;margin: 0 auto;padding: 5px;}.pic{float: left;margin-right: 5px;width:200px;height: 132px;}.pic img{width: 100%;}</style>
</head>
<body><div class="box"><div class="pic"><img src="300.jpg" alt=""></div><p>泰山又名岱山、岱宗,隶属于山东省泰安市[1],是世界自然与文化遗产、国家5A级旅游景区,有“五岳之首”“五岳之长”“天下第一山”之称。泰山被古人视为“直通帝座”的天堂,成为百姓崇拜,帝王告祭的神山,有“泰山安,四海皆安”的说法。自秦始皇开始到清代,先后有13代帝王引次亲登泰山封禅或祭祀,另外有24代帝王遣官祭祀72次。泰山代表景点有阴阳界、桃花峪、傲徕峰、玉皇顶。</p></div></body>
</html>

本文发布于:2024-01-31 00:05:34,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170663073823805.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:布局   技巧   css
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23