CSS基础练习题

悬梁刺股9
已于 2023-06-09 17:27:53 修改
阅读量727
点赞数
文章标签： css css3 前端
于 2022-06-01 10:20:39 首次发布
本文链接：https://blog.csdn.net/m0_57048774/article/details/125078923
版权
<body>
    <style>
       .ziti {}
   </style>
   <div class="ziti">01字体样式</div>
   <!-- 01字体 细、粗、正常字体、倾斜、不倾斜、尺寸 -->

   <br/><br/>
   <style>
       .touying {}
   </style>
   <div class="touying" style="width: 150px;height: 50px;border: 1px solid red;text-align: center;line-height: 50px;">02盒子投影</div>
   <!-- 02文字投影 过后盒子左边上边阴影 -->

   <br/><br/>
   <style>
       .align {}
   </style>
   <div class="align" style="width: 500px;border: 1px solid red;">
       03液体之火让你若梦若醒，飘飘欲仙让天地颠倒让世界旋转。把人类历史浇灌的跌宕起伏，将琴棋书画熏染的色彩斑斓，
       醉了刘伶狂了诗仙张扬了曹孟德书写了鸿门宴，湿了清明杏花雨瘦了海棠李易安。景阳冈上助武松三拳毙虎，浔阳楼头纵宋江题诗造反。
       你啊！成全了多少英雄豪杰，放倒了多少村夫莽汉。歌舞与你相佐美色与你为伴。催诗情万丈壮文人斗胆，有人借你发疯有人借你夺权。
       有时你只是一个道具，烘托一下谈判桌上的氛围。有时你更像一种暗器，把贪杯的对手麻翻。
       你呀！既入朱门豪宅又进村舍陋院，既流溢皇室的金樽又盛满农家的粗碗。愁也要你喜也要你，洞房花烛夜、他乡遇故知、金榜题名时、迁徙流放的囚犯、
       落魄的文人骚客、得志的朝廷大员都是你的知己。你的伙伴甚至即将上路的死囚都要你为之饯别，因为你耽误了多少大事，因为你弄出了多少冤案。
       因为你鲜活了多少逸事趣闻，因为你催生了多少佳作名篇。更因为你造就了多少人的肝癌而魂归天堂。真的是成也有你败也有你，生也有你死也有你。
       你这浇愁愁更愁的琼浆啊！穷也有你富也有你。千家万户还都离不开你。</div>
   <!-- 03首行缩进、垂直对齐、行高、文字间距、文字居中右、两端对齐、最后一行两端对齐 -->

   <br/><br/>
   <style>
       .position {}
   </style>
   <div class="position">04定位</div>
   <!-- 04相对定位、绝对定位、固定定位、默认 -->

   <br/><br/>
   <style>
       .overflow {}
   </style>
   <div class="overflow" style="width:500px;height: 200px; border:1px solid red ">05液体之火让你若梦若醒，飘飘欲仙让天地颠倒让世界旋转。把人类历史浇灌的跌宕起伏，将琴棋书画熏染的色彩斑斓，
       醉了刘伶狂了诗仙张扬了曹孟德书写了鸿门宴，湿了清明杏花雨瘦了海棠李易安。景阳冈上助武松三拳毙虎，浔阳楼头纵宋江题诗造反。
       你啊！成全了多少英雄豪杰，放倒了多少村夫莽汉。歌舞与你相佐美色与你为伴。催诗情万丈壮文人斗胆，有人借你发疯有人借你夺权。
       有时你只是一个道具，烘托一下谈判桌上的氛围。有时你更像一种暗器，把贪杯的对手麻翻。
       你呀！既入朱门豪宅又进村舍陋院，既流溢皇室的金樽又盛满农家的粗碗。愁也要你喜也要你，洞房花烛夜、他乡遇故知、金榜题名时、迁徙流放的囚犯、
       落魄的文人骚客、得志的朝廷大员都是你的知己。你的伙伴甚至即将上路的死囚都要你为之饯别，因为你耽误了多少大事，因为你弄出了多少冤案。
       因为你鲜活了多少逸事趣闻，因为你催生了多少佳作名篇。更因为你造就了多少人的肝癌而魂归天堂。真的是成也有你败也有你，生也有你死也有你。
       你这浇愁愁更愁的琼浆啊！穷也有你富也有你。千家万户还都离不开你。</div>
   <!-- 05影藏盒子超出内容、生y轴滚动条(注:英文无法自动换行) -->

   <br/><br/><br/><br/><br/><br/><br/><br/>
   <style>
       .display {}
   </style>
   <div class="display">06隐藏元素</div>
   <!-- 06转化块元素、转化行内元素、转化行内块、隐藏元素(block显示) -->

   <br/><br/>
   <style>
       .af::before {}
       
       .af::after {}
   </style>
   <div class="af">07伪类</div>
   <!-- 07使用伪类器在盒子前面和后面添加清楚浮动 --> <!--content、display、clear必写-->

   <br/><br/>
   <style>
       .clear {}
   </style>
   <div class="clear">08解决盒子高度塌陷的几种方法</div>
   <!-- 08解决高度塌陷的几种方法 -->

   <br/><br/>
   <style>
       .mayi {}
   </style>
   <div class="mayi">09蚂蚁线</div>
   <!-- 09上线、中线、下线、不线 -->

   <br/><br/>
   <style>
       .bacgroud {}
   </style>
   <div class="bacgroud" style="width: 100px;height: 100px;">10背景设置</div>
   <!-- 10背景图、平铺方式(默认，不平铺，横向平铺) 图片尺寸 扣取精灵图 背景半透明-->


   <br/><br/>
   <style>
       .boder {}
   </style>
   <div class="boder" style="width: 200px; height: 200px;">11边框设置</div>
   <!-- 11在前面添加一条绿色粗线 设置线型号 设置颜色 设置下边框宽 左上角画圆弧 画圆(想一下长方形画圆px和%区别) -->

   <br/><br/>
   <style>
       .max {}
   </style>
   <div class="max">12屏幕适配宽</div>
   <!-- 12屏幕适配 最大宽最小宽 -->

   <br/><br/>
   <style>
       .sizing {}
   </style>
   <div class="sizing">13装箱尺寸</div>
   <!-- 13标准盒子模型、IE盒子模型 -->

   <br/><br/>
   <style>
       
   </style>
   <a class="a">14鼠标形状</a>
   <!-- 14未访问状态、悬停、点击时、点击过 -->

   <br/><br/>
   <style>
      
   </style>
   <div class="openg">15选择器</div>
   <!-- 15选择偶数、选择奇数、选择第一个、选择最后一个。(当父级内部，元素不统一时选择器失效) -->

   <br/><br/>
   <style>
       .text {}
       /* ul>li */
   </style>
   <div class="text" style="background-color: aqua;width: 300px;height: 20px;line-height: 20px;">16图片裁剪</div>
   <!--16图片裁剪 -->

    <br/><br/>
   <style>
       .flex {}
   </style>
   <div class="flex" style="width: 200px;height: 200px;border: 1px solid;">18Flex布局</div>
   <!-- 18设置为弹性盒子 靠右分布 居中 两端分布 靠下 垂直居中 靠上 不被压缩 自增长 换行-->

   <br/><br/>
   <style>
       .transform {}
   </style>
   <div class="transform">20变换</div>
   <!-- 20设置元素基点位置 设置三维结构 原位置位移 旋转 放大 -->

   <br/><br/>
   <style>
       .transition {}
   </style>
   <div class="transition">21过度</div>
   <!-- 21过度3秒 匀速 缓冲 步数 延时2秒 停留最后位置 -->  <!--让图形动起来-->
   
   <br/><br/>
   <style>
       .animation {}
   </style>
   <div class="animation"></div>
   <!-- 22动画帧的语法 -->
</body>