首页 > 其他分享 >盒子模型的 内边框 padding border

盒子模型的 内边框 padding border

时间:2023-03-05 22:31:53浏览次数:32  
标签:知识点 盒子 边框 padding 内边 大小 border

知识点一:边框影响盒子实际大小

边框会额外增加盒子的实际大小,所以有两种解决方案,

第一:测量盒子大小的时候,不加边框;

第二:如果测量了边框,需要用width/height减去边框的大小,就是盒子实际的大小。

知识点二: 内边距的设定   padding-left

如果不设置内边距,那么是紧挨着边框的。

内边距是边框和内容之间的距离,

padding-left     -right     -bottom      -top

知识点三:padding的复合写法(简写)

盒子模型的  内边框    padding  border_内边距

知识点四:padding会影响盒子的实际大小,会撑开盒子。

计算width/height时,减去padding的大小,才能与原来保持一致。

知识点五:新浪导航栏设置

盒子模型的  内边框    padding  border_解决方案_02

新浪导航栏设置成品:

盒子模型的  内边框    padding  border_解决方案_03

盒子模型的  内边框    padding  border_解决方案_04

标签:知识点,盒子,边框,padding,内边,大小,border
From: https://blog.51cto.com/u_15987796/6101748

相关文章

  • CSS鼠标hover给元素加边框后发生移动
    CSS鼠标划过给元素加边框后发生晃动解决方法:默认给所有元素加上边框鼠标hover时改变div的width和height只需减去边框大小使用box-sizing属性改变div盒子模型的规则=》具体......
  • 权重复习、盒子模型的边框
    知识点 1:css继承的权重是“0”,权重越高,会优先执行。例:  .nav.pink 权重是  20     .navli    权重是  11想要展示出自己喜欢的效果,就要......
  • 边框家变色
    .home_dqjx_table_khlx{padding:08px;height:20px;border:1pxsolidtransparent;border-radius:2px;background-clip:padding-box,border-box;......
  • android studio 打包发布 Cause: failed to decrypt safe contents entry: javax.cryp
    androidstudio打包发布错误:Cause:failedtodecryptsafecontentsentry:javax.crypto.BadPaddingException:Givenfinalblocknotproperlypadded.Suchissues......
  • CSS 边框属性
    CSS边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。在四边都有边框红色底部边框圆角边框左侧边框带宽度,颜色为蓝色边框样式边框样式属性指......
  • 边框宽度
    边框宽度您可以通过border-width属性为边框指定宽度。为边框指定宽度有两种方法:可以指定长度值,比如2px或0.1em(单位为px,pt,cm,em等),或者使用3个关键字之一,......
  • border-style 值
    border-style值:none:默认无边框dotted:定义一个点线边框dashed:定义一个虚线边框solid:定义实线边框double:定义两个边框。两个边框的宽度和border-widt......
  • 解决IE8下不支持border-radius的问题
    最近做了一个项目,是让兼容IE8浏览器的,遇到了IE8不支持border-radius和box-shadow的问题,在网上找了解决方案,主要是借助于PIE.htc,具体的过程,发一个写的比较好的文章(看连接文......
  • border出现虚边问题解决
    当我们只给元素设置了border-top,没有设置其他边框的时候,如果我们使用了border-radius会出现虚边的情况,如下所示:css代码:div{width:100px;height:100px;border-top:2pxsoli......
  • 直播平台源代码,CSS 修改滚动条样式、信封边框样式
    直播平台源代码,CSS修改滚动条样式、信封边框样式CSS全局修改滚动条样式  ::-webkit-scrollbar{ /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条......