padding内边距撑开盒子应用-新浪导航栏

最新推荐文章于 2022-09-08 07:00:00 发布
最新推荐文章于 2022-09-08 07:00:00 发布
阅读量295 收藏 1
点赞数 1
分类专栏： html-css练手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soraru/article/details/117306970
版权

 

图裂
内边距撑开盒子合理运用场景-原理 
<!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>新浪weibo-导航栏-盒子模型初级练习</title>
    <style>
        /* 案例核心
            ·字数不同，盒子大小不同，无法设置盒子固定大小
            ·内边距相同
            ·利用内边距padding撑开盒子
            ·<a>行转行内块inline-block，一行多个，有宽、高
            ·text-align：水平居中
             line-height：垂直居中（h=盒子h）
         */

        .nav {
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 41px;
        }

        .nav a {
            text-decoration: none;
            color: #4c4c4c;
            display: inline-block;
            padding: 0px 20px;
            line-height: 41px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

</html>

 

souuuuuux
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
padding不会撑开盒子的情况
weixin_43862765的博客
09-09 6051
注意： 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外） 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况 如果一个盒子没有给定宽度/高度，就会用其父类的属性，这时padding不会影响盒子的大小 课堂实例： <!DOCTYPE html> <html lang="zh"> <head&g...
盒子模型——padding
学而不思则忘
08-27 749
内边距的特点 1. padding可以撑大元素的尺寸 padding可以撑开盒子的尺寸，但是设置的高度和宽度并不包含padding，所以，如果测量的时候包含了padding，在设置宽高的时候需要减去padding的数值 2. 背景可以延伸到padding区域 综上： 盒子本身有宽度，当给盒子设置一个内边距，内边距会撑开盒子，多出来的宽度或高度恰好为padding的数值 背景会延伸到padding区域 ...
内边距、边框撑大盒子问题
weixin_63712639的博客
11-26 1973
解决内边距撑大盒子模型的问题
盒子的padding不影响总的大小css代码
weixin_33935505的博客
09-24 1098
-moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-sizing: border-box; /*Opera9.6*/-ms-box-sizing: border-box; /*IE8*/box-sizing: bor...
【Web前端】CSS-盒子模型
亮点菌
09-08 5396
网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容
padding 把 盒子撑开的解决方案
大尧酱的博客
11-11 2705
在盒子中添加box-sizing: border-box; 就可以解决了 注意： 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外） 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况 如果一个盒子没有给定宽度/高度，就会用其父类的属性，这时padding不会影响盒子的大小 原因： 因为Div添加了内边距属性，Div的实际宽度=Div的初始固定值+边距值（高度同理） 例如Div设定为宽度为100px，添加5px的上下左右内边距..
padding盒子内部文字跟盒子之间的距离
09-25
如果说margin是盒子与盒子之间的距离，那么padding就是盒子内部文字跟盒子之间的，本例就来为大家详细介绍下，对此概念不是特别清楚的朋友可以参考下
微信小程序----导航栏透明渐变一
12-20
/* 为内容区域添加与导航栏同等的内边距，避免被遮挡 */ } ``` 然后，我们需要监听页面的滚动事件，根据滚动位置动态更新导航栏的`opacity`值。这可以通过在`Page`对象的`onScroll`生命周期函数中实现： ```...
Bootstrap实现渐变顶部固定自适应导航栏
11-29
具体代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" />...
Qt 自定义导航栏
02-18
在Qt开发中，自定义导航栏是一项常见的任务，它能够为应用程序提供更加直观且具有特色的用户界面。本文将深入探讨如何在Qt中实现自定义导航栏，并分享一个使用案例，帮助开发者创建美观、易用的树形导航结构。 首先...
padding撑大盒子解决方案
GGBond的博客
05-22 8071
1.通过计算把width和height减去padding的值 2.设置box-sizing的值为border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style...
css给父盒子加display:inline实现子盒子自动撑开 实现子盒子和父盒子都浮动
延宾的博客
05-05 3440
无标题文档 .box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;} .div{ width:200px;height:200px;background:red;float:left;} /*     清浮动     1.给父级也加浮动     2.给父级加display:inlin
css 利用定位撑开盒子
chen1042246612的博客
04-06 1403
我们可以同时给元素设置top值和bottom值，这样的话就能撑开盒子给盒子设置高度值，并且该高度是自适应的。 如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> ...
css背景图撑开盒子高度
chauncywu的博客
12-07 8339
本文原地址 需求： 给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px 问题： 背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用i...
html的样式及常见问题解决（有边距撑大盒子，盒子塌陷等）
weixin_44253162的博客
12-05 2458
样式什么是样式选择器优先级常用样式浮动 什么是样式 样式就是通过各种属性对标签的视觉效果进行修改，一般指大小、颜色、动画等 那么怎么使用它的，这里有几种方式 一个是在标签内写，也就是行内样式例如： < p style=“height=50px”>< /p>这里的style就是行内样式，一般来讲很少这么用，因为这会显得代码很凌乱，而且，修改起来很麻烦 第二种在head标签中写入< style type=“text/css”>< /style>把这个写在title
100CSS效果：背景撑开盒子
weixin_30723433的博客
06-03 183
1、背景撑开盒子：盒子里只放一张图片，盒子的宽度固定，盒子的高度由图片决定，图片铺满盒子且不变形、不裁切、不重复。2、伪类问题：div:before,在div元素内部的开始增加一个元素div:after,在div元素内部的结束增加一个元素```html:run<!DOCTYPE html><html lang="en"><head> <meta ch...
实现盒子高度撑开，而且以最高的为高
wangzhenyu66的博客
08-23 1153
DOM结构代码如下                                         aaa                 aaa                 aaa                 aaa                                                         bbb      
内边距撑大盒子的问题
qq_69761234的博客
05-17 991
当设置遇盒子内间距和边框后，会将盒子撑大盒，然而我们又不想盒子被撑大，因为这会影响我们的布局。 盒子模型的宽高=内容区（自己设置的宽高）+内边距+边框 所以当我们设置盒子内间距边框等属性的时候就盒子宽高就会发生变化,想解决这个问题有两种办法. 第一种就是自己手动减去对应的宽高,这样就可以获得我们想要的盒子大小，但时候这种太麻烦 第二种 使用 box-sizing:border-box;这样就会自动给我们计算减去宽度高度，不需要我们手动计算。 <!DOCTYPE html> <h
盒子模型的内边距——padding
weixin_44004120的博客
01-16 2989
文章目录盒子模型的内边距——paddingpadding的基础属性padding复合属性padding会影响盒子实际大小如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 盒子模型的内边距——padding 盒子由border（边框）、content（内容）、padding（
<!-- 设置导航栏元素HTML-->
最新发布
05-29
/* 设置内边距 */ text-decoration: none; /* 去除下划线 */ } .navbar li a:hover { background-color: #111; /* 鼠标悬停时设置背景颜色 */ } ``` 这样就可以创建一个简单的导航栏了。当然，具体的样式和布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值