文档章节

input搜索框+button按钮 之 content-box 和 border-box

boogoogle
 boogoogle
发布于 2016/05/21 00:30
字数 761
阅读 331
收藏 11

恍然大悟又 --可以用CSS3的box-sizing来设置下文中的"正常盒子"和"不正常盒子/怪异盒子"

* 正常盒子   box-sizing:content-box
* 不正常盒子 box-sizing:border-box;

缘由

我们经常要写一个<input type="text"><input type="button">的搜索框,因为已经写习惯了,总是拿来就写,没有注意一些特殊的地方.今日,女神学CSS的时候遇到问题,拿来问我,一开始我觉得就那样写就是了,不那样写肯定出问题,但是细究之下,毛骨悚然...

几个值得注意的地方

  1. 我们知道,两个input之前是有间隙的,所以,如果不想让他俩手拉手,而是肩并肩的挨着的话,你需要这样写两个挨着的input

    	<input type="text"><input type="button">
    	<!--也可以这样-->
    
    	<input type="text"><!--这行注释拉近了他们的距离/笑
    	--><input type="button">
    
  2. input[type = button/reset/submit]这三个家伙是有默认的padding,border,margin值的.但是一般的我们在开始都是清除默认样式,例如最简单的这样

    	*{
    	    padding:0;
    	    margin:0
    	}
    
    • 这里就清除了button三兄弟的默认padding值
    • 三兄弟默认的 border宽度是2px,还有个默认的灰色,所以我们一般会用"自己喜欢的颜色"来重新设置他们的border,顺便重新设置下宽度,例如这样
    	border:1px solid red
    
    • 接下来就是最重要的!!! button三兄弟的盒子模型不是正常的盒子模型,也就是说,button是不正常的盒子

正常盒子和不正常的盒子

两个盒子同样的设置

  • 正常盒子 (非怪异模式) 比如我们设置了一个div,或者input[type=text],我如下写它的CSS样式

    	height:50px;
    	width:50px;
    	border:10px solid red;
    	padding:5px;
    	background:yellow
    

    通过chrome查看它的盒子模型 正常

    我们发现正常的盒子模型:

    1. 其"可视高度" = width(我们手动设置的50px)+padding(5px2)+border(10px2) = 80px

    2. width < padding < border是向外堆叠的,一层一层构成了其"可视高度"

  • 不正常的button盒子

    	height:50px;
    	width:50px;
    	border:10px solid red;
    	padding:5px;
    	background:yellow
    

    不正常

    不正常的盒子:-> 特质button/submit/reset的input

    1. 其"可视高度" = width(我们手动设置的)

    2. width > padding > 内容 是一层层的向里堆叠的.如果手动设置了width和padding,其内容的高度(或者宽度)会被自动压缩

怪异模式与box-sizing

  • 其实一个盒子实际占据的空间(下面叫实际宽度)是由它的"可是宽度"+ margin决定的.

  • 我们一般在开发中会把所有的盒子都改写成border-box模式即 ` *{ box-sizing: border-box }

    `

    1. box-sizing:border-box
      • 实际宽度 = 手动设置的width + margin,(盒子的padding,border会向内挤占,真实"content"的宽度会变小)
    2. box-sizing: content-box
      • 实际宽度 = 手动设置的width + padding + border + margin(盒子内部的"content"宽度就是我们手动设置的width,padding,border会向外挤占盒子的真实宽度)

© 著作权归作者所有

boogoogle
粉丝 11
博文 104
码字总数 27281
作品 0
昌平
前端工程师
私信 提问
css中box-sizing的使用心得

起初遇到的情况是这个样子的: <div class="box-div"><span class="add-on"><i class="icon-search"></span><input type="text" id="search-val" placeholder="搜索" /><button class="btn">搜......

Noin
2013/05/05
214
0
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
79
0
jquery点击弹出登陆窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met......

mdoo
2015/11/26
124
0
stylish插件怎么用?如果用stylish修改网页的样式?

stylish插件是我们对网站进行样式修改时常用的chrome插件。其原理就是修改网页的CSS样式,用户可以通过自己写css代码,来修改网页为自己喜欢的排版和浏览习惯,这个对于文字较多的网页尤其赞...

TheBeauty2016
2017/07/16
0
0
浅析几种网站搜索框的制作

如果自己做的网站内容太多,主要是网站导航栏的内容增多,当用户想寻找一个自己需要的内容时,一个一个查找是一件很累的事情,如果在自己的网站上做一个搜索框,提供网站搜索功能,那就事半功...

crossmix
2015/12/13
387
0

没有更多内容

加载失败,请刷新页面

加载更多

采坑指南——k8s域名解析coredns问题排查过程

正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出)。今天发现域名解析不了。 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一个nginx服务 apiV...

码农实战
30分钟前
3
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第6题

choose three Which three statements are true about indexes and their administration in an Orade database? A) An INVISIBLE index is not maintained when Data Manipulation Language......

oschina_5359
32分钟前
4
0
阿里巴巴开源 Dragonwell JDK 最新版本 8.1.1-GA 发布

导读:新版本主要有三大变化:同步了 OpenJDK 上游社区 jdk8u222-ga 的最新更新;带来了正式的 feature:G1ElasticHeap;发布了用户期待的 Windows 实验版本 Experimental Windows version。...

阿里巴巴云原生
38分钟前
4
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

xiangyunyan
41分钟前
6
0
js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置, 下面给上一段项目代码 JS代码: $.fn.extend({ txtaAutoHeight: function () { return this.each(function () {...

文文1
41分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部