关于HTML的盒子的一些小问题

最近在开发的时候发现一个小问题，<DIV>我们很熟悉的一个盒子元素

关于他的描述

1.按照我们正常人的思维逻辑

编写好一个DIV盒子，然后再在盒子里面添加边框border、内边距padding、内容，这是我们的思维逻辑

但是DIV的编写会随着你添加的边框border+内边距padding 的增加而不断增加

例如以下：第一个是什么也没有加的，第二个盒子是加了内边距，第三个盒子是加了边框，总结出来的规律就是DIV在普通属性下，是按照逆向思维执行，从内到外进行添加，这样往往会破坏实际的逻辑结构，因此我们需要引入一个属性来控制DIV，这个CSS属性是box-sizing: border-box;

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中，就例如上面所示

当我们不希望自己的盒子被撑大，就需要box-sizing: border-box; 的属性控制盒子的大小，让盒子固定宽高，再在此基础上添加内边距和内容和边框

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。（转）

box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐

文字或者内容垂直居中只需要设置行高 line-height 等于父空间高度就行

文字或者内容水平居中需要设置 text-align:center 即可

看到选项卡导航条就用ul和li 搭配float使用去除一些固定的属性再来个定位即可

input的快捷输入是 input+：+字母

有时候一些盒子放不下其实不是盒子的问题检查一下是否有默认空格的情况出现这时候只需要合并一下即可

在企业开发中想让多个盒子的顶部对齐，我们可以让多个盒子同时浮动

使用绝对定位去控制位置的时候，很多标准都会失效例如控制居中 margin:0 auto就是失效

用span作标签的时候，要注意这是一个行内元素设置宽高的时候要设置属性display:inline-block变成行内块级元素才可以

开发中，看到某一元素覆盖在另一元素上面的时候就要想到定位定位的时候就要想到子绝父相，同时用了绝对定位后，由于脱离标准流，行内块级以及行内元素的改变属性就会消失

行高可以撑起盒子高度例如有了line-hight后就可以把height删除

想要水平排版只需要float:left就可以

删除样式可以用list-style:none

超出部分需要用overfloat:hidden 让导航条不拖动超过的部分

关于HTML的盒子的一些小问题相关推荐

echarts 图标高度自适应_echarts图表盒子大小变化后，图表无法自适应
如题: 项目基于bootstrap的栅格系统做的响应式这是盒子宽度变小后图表右边明显超出盒子范围: 盒子还原后,图表正常显示左边是一个侧边栏,有两个状态的切换,切换后,图表盒子大小会改变,问题就在 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
三、CSS重要的盒子模型知识总结（中篇）
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型文章目录边框属性什么边框? 边框属性的格式连写(分别设置四条边的边框) 内边距什么是内 ...
前端怎么画三角形_前端小技巧：边框写三角形
边框写三角形,这个技能从事前端的小伙伴应该都不陌生,不过大多数都是知其然而不知其所以然,今天我们就来探究一下这里面的原理. 随意的在页面上给一个盒子,然后给一个边框来看看. 这样的一段代码,给到盒子的 ...
怎么用纸做圆形的盒子_如何培养孩子逻辑思维能力？抓住0-8岁关键期，聪明的家长这样做...
最近和朋友聊天,他特别苦恼和纳闷:我的孩子幼儿园和刚进入小学时成绩总是名列前茅,怎么越往后成绩越差,这是为什么呢? 这种现象还是挺经常出现的,幼儿园和小学1-3年级阶段,孩子努力用功是可以取得好成绩的 ...
幼儿抽象逻辑思维举例_孩子逻辑思维能力有多重要？巧用生活小游戏，培养好了娃受益终身...
最近和朋友聊天,他特别苦恼和纳闷:我的孩子幼儿园和刚进入小学时成绩总是名列前茅,怎么越往后成绩越差,这是为什么呢? 这种现象还是挺经常出现的,幼儿园和小学1-3年级阶段,孩子努力用功是可以取得好成绩的 ...
【盒子居中常用的四种方法】
案例分析: 1.H5结构:两个盒子,大盒子包着小盒子, 2.CSS样式:大盒子pink,小盒子skyblue 3.实现方法:margin外边距法:table-cell布局法:弹性布局法:定位法,其中定 ...
CSS小游戏2048—简单小游戏编程有手就行~会玩？你会写吗？
简单实现2048小游戏想实现2048游戏书写代码时可以分为三个步骤一.HTML部分先书写HTML把游戏结构搭建出来 <!DOCTYPE html> <html lang=&qu ...
2022年618机顶盒哪款好？当贝盒子功能最全性价比更优
随着科技的发展,电视盒子的需求也在逐渐的升高,618很快就要到了,有选购电视盒子的小伙伴可以先看看这篇攻略了,很多品牌的电视盒子因没有创新都被淘汰了,目前主流盒子中就包括当贝.小米.华为等几个重大厂商 ...

关于HTML的盒子的一些小问题

关于HTML的盒子的一些小问题相关推荐

最新文章

热门文章