盒子模型的内边距实现新浪导航栏

所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
文章简介:本文介绍CSS的盒子模型中的边框与内边距。知识学习内容来自b站的 @黑马程序员 的视频

一、网页布局的本质

  • 先准备好相关的网页元素,网页元素基本都是盒子

  • 利用CSS设置好盒子的样式,然后摆放到相应位置

  • 往盒子里面装内容

核心:利用CSS摆盒子

二、盒子模型组成部分

所谓盒子模型就是把html页面中的布局元素看做是一个矩形的盒子,也就是装内容的容器。CSS盒子模型本质上是一个盒子,它包括边框外边距内边距实际内容四个部分。

1.1边框

属性

border-width,边框的粗细

border-style,边框的样式(如实线,点线,虚线等)

border-color,边框的颜色





    
    
    
    Document
    



    

复合写法

border: 1px solid pink; 包括了粗细,样式和颜色,其中三者没有顺序





    
    
    
    Document
    



    

边框分开写法

单独设置某一条边(把上边的设置放在最下面,合理利用层叠性)





    
    
    
    Document
    



    

1.2 表格的细线边框

先看下面的代码效果





    
    
    
    Document
    



    
排名 关键词 趋势 今日搜索 最近七日 相关连接
1 鬼吹灯 345 123 百度
2 盗墓笔记 345 123 百度
3 西游记 345 123 百度
4 东游记 345 123 百度
5 甄嬛传 345 123 百度
6 水浒传 345 123 百度
7 三国演义 345 123 百度
盒子模型的内边距实现新浪导航栏_第1张图片

可以看到由于每个单元格的粗细都为1,加起来就为2,看起来比第一行的单元格要粗。现在有个办法可以让相邻的边框合并

border-collapse属性即可。





    
    
    
    Document
    



    
排名 关键词 趋势 今日搜索 最近七日 相关连接
1 鬼吹灯 345 123 百度
2 盗墓笔记 345 123 百度
3 西游记 345 123 百度
4 东游记 345 123 百度
5 甄嬛传 345 123 百度
6 水浒传 345 123 百度
7 三国演义 345 123 百度
盒子模型的内边距实现新浪导航栏_第2张图片

可以看到相邻边框边细了

1.3 边框会影响盒子的实际大小

边框会影响盒子实际大小,因此有两种解决方案:

  1. 测量盒子大小的时候不量边框

  1. 如果测量的时候包含了边框,则需要盒子的长宽减去边框的宽度





    
    
    
    Document
    



    
盒子模型的内边距实现新浪导航栏_第3张图片

可以看到我设置的盒子大小本来是180*180,加了10的左右边框后,变成了200(这里不太精准199也差不多)

2.1 内边距

padding属性用于设置内边距,即边框与内容之间的距离

包括padding-left、padding-right、padding-top、padding-bottom

复合写法

padding后面跟1个值,表示四个方向都是这个值





    
    
    
    Document
    



    
盒子的内容
盒子模型的内边距实现新浪导航栏_第4张图片

2个值,表示上下为这个第一个值,左右为第二个值





    
    
    
    Document
    



    
盒子的内容
盒子模型的内边距实现新浪导航栏_第5张图片

3个值,表示上为第一个值,左右为第二个值,下位第三个值





    
    
    
    Document
    



    
盒子的内容
盒子模型的内边距实现新浪导航栏_第6张图片

4个值,表示上右下左,按照顺时针顺序





    
    
    
    Document
    



    
盒子的内容
盒子模型的内边距实现新浪导航栏_第7张图片

2.2 内边距会影响盒子的实际大小

可以看到,盒子实际大小由于内边距的添加也发生了改变





    
    
    
    Document
    



    
盒子的内容
盒子模型的内边距实现新浪导航栏_第8张图片

解决方法:在考虑内边距的情况下,用width/height减去添加的内边距大小

2.3 padding实际应用新浪导航栏

可以发现导航栏中每个盒子内的字数不同,所以如果采用给每个盒子一样长宽的方式就不合理,因此需要为每个盒子设置相同的padding来把左右两边撑开一样的距离,高度都设置成一样的即可。

相关取值(后续会告知如何使用测量工具进行测量)

上边框3px,颜色#ff8500
下边框1px,颜色#edeef0
盒子高度为41px,背景颜色为#fcfcfc
文字颜色为#4c4c4c




    
    
    
    Document
    



    


盒子模型的内边距实现新浪导航栏_第9张图片

2.4 内边距不会撑开盒子的情况

如果盒子本身没有指定长宽属性,则此时padding不会撑开盒子大小

下图我指定了30px的padding,但是只指定了height200,所以盒子总高度会变成260,宽度应该与浏览器保持一致。





    
    
    
    Document
    



    

盒子模型的内边距实现新浪导航栏_第10张图片

这里我指定了宽度,那么加上padding的话,宽度应该会超过浏览器,导致滑动条的出现





    
    
    
    Document
    



    

盒子模型的内边距实现新浪导航栏_第11张图片

所以给我们的提示就是有时候不需要写长宽度,防止不必要的撑开。

你可能感兴趣的:(前端只因变凤凰之路,css,css3,盒子模型,内边距,内边距实现导航栏实例)