设为首页收藏本站

切换到窄版

鱼C论坛»论坛 › 萌新训练营 › 萌新交流区 › CSS关于行内/块模式转换的小小小例子

发新帖

查看: 2863|回复: 0

[作品展示] CSS关于行内/块模式转换的小小小例子

发表于 2021-4-26 15:57:24 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由肖-肖于 2021-4-26 17:42 编辑

实现效果

简单分析

知识点清单

<!-- 3.26
a标签的模式转换,将它原本的行内模式转换为行内块模式，即可设置宽高和在同一行上
连接伪类选择器实现鼠标放上去更换背景图片的效果。注意的是不要设置a的:hover,因为那样的话
会将所有的都改为1个图片不是吗？
-->

复制代码

源代码

五彩导航.zip (37.24 KB, 下载次数: 0, 售价: 1 鱼币)
我还是觉得这么个小案例太小了,再加一个小案例-》padding应用的小案例

效果图如下:

知识点清单

<!--
因为鼠标放上去是一片区域变化且可点击超链接，所以要设置a的宽高，设置宽高就要
改变原有的模式。但是因为文字长度不一样所以不方便给a宽度。所以高度可以给，但是宽度不要给
而是用padding值挤开就可以了。
padding不好的地方如下:
padding-left等等的使用会影响父盒子的宽度或高度。比如你原先的父盒子为230px,但是你设置它内部子盒子的属性为padding-left
那么父盒子的宽度会为260px.
-->

复制代码

源代码

padding应用-新浪导航.zip (1.54 KB, 下载次数: 0, 售价: 1 鱼币)
现边在说下怎么克服padding带来的不好滴影响!

代码如下:

<!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>padding不影响盒子大小的情况</title>
<style>
h1{
/* 再来假设加了width属性 padding会不会影响宽度会出现水平滚动条*/
/* width: 100%; *//*所以不写了呗*/
/* 只知定高度而不指定宽度，如果你给一个盒子不指定宽度则默认是根它的父亲是一样宽的 h1的父亲是body
body就是浏览器的宽度所以h1适合浏览器一样宽的 */
height: 200px;
background-color: pink;
/* 下边给padding值来测试 */
padding:30px;/*发现宽度没有变化高度变大了变成了260px 因为你上边和下边各有30px嘛*/
}
div{
width: 300px;
height: 100px;
background-color: purple;
}
div p{
/* 加上宽度则会超出60px 超出父亲的宽度 */
/* width: 100%; */
padding:30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1>
</h1>
<div>
<p>
<!-- 按道理来说p是块级元素和父亲是一样宽的现在没有指定宽度在使用padding值同样道理不会撑大盒子
它的父亲是300px如果在指定p的padding:30px会不会影响宽度变为360px? -->
</p>
</div>
</body>
</html>

复制代码

效果图/结论图如下:

完

评分

参与人数 1	荣誉 +5	鱼币 +5	贡献 +3	收起理由
昨非	+ 5	+ 5	+ 3	鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com

回复

使用道具举报

发新帖

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-25 22:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表