行内块元素有
1.包裹性
元素display属性设置为inline-block时，即使元素里内容再多，只要是正常文本，都不会超出容器宽度
2.按钮设置固定宽度时
button标签按钮会自动换行，而input标签按钮不会换行，因为input标签white-space默认为pre(保留空白，不换行)，修改为normal(忽略空白，换行)
3.行内块会识别代码间的空格
解决方法：①父元素加font-size:0
你可能感兴趣的:(inline-block)
- html ul点击删除,用原生实现点击删除点击的li
weixin_39993454
htmlul点击删除
简单的实现方式#button{display:inline-block;}ul{list-style:none;}li{background-color:red;display:inline-block;width:20px;padding:10px;margin-left:3px;color:white;}window.onload=function(){varoBtn1=document.ge
- 用JavaScript写一个简单的9*9乘法表
迷雾yx
javascript开发语言ecmascript
Documentspan{width:80px;padding:5px10px;display:inline-block;/*可以使行内元素表现得像块级元素一样*/text-align:center;/*文本居中*/border:1pxsolidturquoise;margin:2px;/*每个边框之间距离为2px*/border-radius:10px;/*边框圆润*/box-shadow:6p
- 快速回顾-HTML5
code_stream
#HTMLhtml5
HTML5-常用的标签：https://blog.csdn.net/TKOP_/article/details/111395865标签定义关于HTML文档的元数据。元数据是关于数据的数据（信息）。-->快速复习HTML5.inline-block{display:inline-block;}.font-red{color:red;}#abc{color:blue;}标题1标题2标题6这是一个段文本
- Ajax实现一个简单的文件上传进度条
niceLiuSir
ajaxokhttp前端
Ajax实现一个简单的文件上传进度条功能。1.HTML代码文件名：2.CSS样式.progress-div{width:100%;height:20px;background-color:#ffffff;}#progress{height:20px;background-color:#1d9e7d;display:inline-block;}3.JS代码functionsave(){$('#sub
- CSS学习4[重点]
乌鸦不像写字台
css学习css学习前端
标签显示模式一、块级元素（block-level）二、行内元素（inline-level）三、行内块标签（inline-block）四、显示模式转换一、块级元素（block-level）每一个块元素通常会独自占据一行或多行，可以对其设置高度、宽度、对齐等属性。常用的块级元素：div，p，h1，ul，ol特点：从新行开始有宽度、行高宽度默认页面100%可以容纳内联元素和其他元素。二、行内元素（inl
- ant design 表单label固定宽度
花开富贵城
css前端html
labelCol:{style:'width:80px;display:inline-block;vertical-align:inherit;'},wrapperCol:{style:'width:calc(100%-80px);display:inline-block;'},
- css精灵图
码农NoError
cssjavascript前端
Document.star{display:inline-block;width:55px;height:11px;background-color:aqua;background-image:url(./img/ic_rating_s.png);}.star4{background-position:0-22px;}.star2{background-position:0-66px;}.star
- 前端，高度塌陷
沦陷_99999
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷解决高度塌陷BFC父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启BFC设置元素浮动设置元素的绝对定位设置元素为inline-block将元素的overflow设置为一个非visible的值（副作用最小的）.box{border:
- CSS属性 - display
coolchaobing
前端学习小记css前端css3
CSS中有个display属性，能修改元素的显示类型，有4个常用值block：让元素显示为块级元素；inline：让元素显示为行内级元素；inline-block：让元素同时具备行内级、块级元素的特征；none：隐藏元素；特性block元素独占父元素的一行；可以随意设置宽高；高度默认由内容决定；inline-block元素跟其他行内级元素在同一行显示；可以随意设置宽高；可以这样理解；✓对外来说，它
- 浮动和定位
湾里晴空
关于浮动使用场景:需要将大的布局排列成一行，一般使用浮动；对于小的布局排列一般使用inline-block即可；浮动使用后一般需要清除浮动：clear：left/right/both其中第一个的意思是该元素位置在左侧浮动元素的下方，其top在左侧浮动元素bottom元素的下方。浮动可以通过设置margin来达到偏移的效果。如果需要在一列中实现水平平均布局，可以使用flex布局方式浮动除了直接使用c
- 2019-03-28作业
您的名称已被使用
html：zuoye1css：.he{width:45px;height:33px;overflow:hidden;position:relative;margin:50pxauto;}.heimg{/*display:inline-block;*/position:absolute;top:-335px;left:-10px;}.heimg:hover{left:-59px;}.heimg:ac
- css通过calc动态计算宽度
徐同保
css前端javascript
max-width:calc(100%-40px).m-mj-status-drawing-info-data{display:inline-block;margin:10px;min-width:200px;padding:10px;border-radius:10px;background:#ddd;max-width:calc(100%-40px);word-wrap:break-word;
- css 动画效果：水平直线来回运动：animation
CAD GIS开发
css前端
background:url(https://hao2.qhimg.com/t01b958e8662853d1c8.png)no-repeat;background-size:119px30px;color:#fff;display:inline-block;height:30px;width:119px;line-height:27px;position:absolute;left:-115px
- CSS-布局-MDN文档学习笔记
LoveEmiliaForever
MDN前端入门文档学习笔记前端css
CSS布局查看更多学习笔记：GitHub：LoveEmiliaForeverMDN中文官网介绍CSS布局正常布局流简介正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式当你使用css创建一个布局时，你正在离开正常布局流下列布局技术会覆盖默认的布局行为display属性，如block、inline、inline-block、grid、flex浮动，应用float值positio
- icon旋转 让你的 icon转起来
Daniel·M
css3csshtml
.icon-loading1{animation:move1.2slinearinfinite;-webkit-animation:move1.2slinearinfinite;display:inline-block;}@keyframesmove{100%{transform:rotate(360deg);}}让你的icon转起来icon-loading1:这个是你的icon的class类名c
- re:从0开始的CSS之旅 14. 显示模式的切换
扶摇|
从0开始的CSS之旅css前端javascript
1.两个属性display属性可以用于转换元素的显示模式可选值：block转换为块元素inline转换为行内元素inline-block转换为行内块元素none不显示元素，并且不占用元素的位置visibility属性用于设置元素是否显示可选值：visible显示元素（默认值）hidden隐藏元素，但是占用元素的位置示例如下：displaymodelchangingdiv{width:200px;h
- css伪类-小圆点
杨淑璟
项目需求：在每个单元格的前面加一个小圆点，效果图如下：效果图.jpg搜了一大堆文章，加小圆点的方法无非就是设置width、height、border-raduis。可是来来回回试了好多遍，就是样式加不上，汗颜~偶然间看一大神说必须加上display:inline-block;才会生效，我的天呐，不会是真的吧。对，就是这个样子滴，附上完整的代码，可随意ctrlc+v美句子哈哈山有木兮木有枝，心悦君兮
- CSS综合案例导航和五彩导航
浮光跃金.free
csshtml前端
导航/*a显示模式是行内,加宽高默认不生效,转显示模式:行内块*/a{text-decoration:none;width:200px;height:100px;background-color:aqua;display:inline-block;color:#fff;text-align:center;line-height:100px;}a:hover{background-color:ora
- css魔法 真名,CSS魔法（二）
weixin_39641231
css魔法真名
#文档类型#字符集#换行标签#divspan标签后代选择器子代选择器>交集选择器div.one{}并集选择器行内元素和块级元素的区别块级元素：独占一行能设置大小行内元素：不能设置大小display：inline-block可将行内元素转为块级元素行高line-height文字居中div{height:50px;width:200px;background-color:pink;line-heigh
- 自适应图片九宫格 css,CSS实现自适应九宫格布局 大全
我来看看就好1123
自适应图片九宫格css
看到微博和朋友圈都实现了图片九宫格，曾经有次面试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽高，然后进行浮动。今天想折腾一下，实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格，算上inline-block的话就是五种了。首先要注意的是九宫格容器是宽高相等的正方形，并且是自适应的，这里关键是实现宽高相等，有些人想到了相对视口宽度vw，但是它是相对于屏幕可见宽度来设置的，并且会
- 前端常见面试题集合
洪洪呀
web前端vue
web前端面试题大厂小厂均适用盒模型盒模型的组成,有里向外content,padding,border,margin清除浮动的方式使用position:absolute/fixed使用display:inline-block/table使用float元素使用overflow!==visiblecss常用布局方式常见的有div布局css布局flex布局table布局流式布局响应式布局html5的新特
- Websocket前端接收测试工具
灰灰的辉
websocket
本地websocket测试.btn-group{display:inline-block;}连接断开清空发送functionformatDate(now){varyear=now.getFullYear();varmonth=now.getMonth()+1;vardate=now.getDate();varhour=now.getHours();varminute=now.getMinutes(
- 蓝桥杯Web应用开发-display属性
AAA_建筑材料批发叶总
蓝桥杯Web应用开发(大学组)前端css蓝桥杯html5
display属性专栏持续更新中display属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。display属性值的说明如下表所示。属性值说明block元素以块级方式展示。inline元素以内联方式展示。inline-block元素以内联块的方式展示。none隐藏元素。block属性值block属性值可以让行内元素以块级元素的方式显示在页面上。其使用格式如下：display:block;
- css 居中布局的几种常用方式
cesiuming
水平居中1、第一种方案：父元素设置：text-align:center;子元素设置：display:inline-block;优点：浏览器兼容性比较好缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示的,解决方案在子级元素中增加text-align:lfet;子级元素.parent{width:100%;height:300px;background:#ccc;/**cent
- 超宽横向滚动
初晨未凉
笔记css3
Document#inner_box{white-space:nowrap;overflow-x:scroll;/*overflow-y:hidden;*/}.item{width:350px;height:200px;font-size:30px;display:inline-block;}.item:nth-child(odd){background:skyblue;}.item:nth-ch
- PC公共样式
慕中川梨花
不起眼的csscss
body{background:#ebebeb;}/*常用公共样式*/.bd{border:1pxsolid;}.h100pc{height:100%;}.w100pc{width:100%;}.ovh{overflow:hidden;}.ova{overflow:auto;}.inb{display:inline-block;}.dsn{display:none;}.fixed{position
- BFC与浏览器兼容
我不信这样也重名
BFC一、BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。二、如何形成BFCfloat属性不设为noneposition属性设为absolute或fixeddisplay设为inline-block、table-
- 【CSS】外边距折叠（margin 塌陷）
小秀_heo
CSScss前端
外边距折叠(collapsingmargins)毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下:两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素/inline-block元素/绝对定位元素/行内元素的margin不会和垂直方向上的其他元素的margin折叠创建了块级格式化上下文(BFC)的元素，不会和它的子元素发生margin折叠我们可以利用外
- 前端之CSS 布局
出来混要还的
1.显示方式：display设置元素的显示方式display:block|inline|inline-block|none1.1.block块级元素默认宽度为父元素宽度可设置宽高换行显示默认元素：div、p、h1~h6、ul、form..1.2.inline行级元素默认宽度为内容宽度不可设置宽高同行显示默认元素：span、a、label、cite、em....1.3.inline-block默认宽
- 高度塌陷
姓高名旭升
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷解决高度塌陷BFC父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启BFC设置元素浮动设置元素的绝对定位设置元素为inline-block将元素的overflow设置为一个非visible的值（副作用最小的）.box{border:
- Java序列化进阶篇
g21121
java序列化
1.transient 类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
- escape()、encodeURI()、encodeURIComponent()区别详解
aigo
JavaScriptWeb
原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函
- ArcgisEngine实现对地图的放大、缩小和平移
Cb123456
添加矢量数据对地图的放大、缩小和平移Engine
ArcgisEngine实现对地图的放大、缩小和平移: 个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧. 具体实现: 一、引入命名空间 using ESRI.ArcGIS.Geometry; using ESRI.ArcGIS.Controls; 二、代码实现.
- Java集合框架概述
天子之骄
Java集合框架概述
集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。 简单介绍： Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
- 旗正4.0页面跳转传值问题
何必如此
javajsp
跳转和成功提示 a) 成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
- 全网唯一:移动互联网服务器端开发课程
cocos2d-x小菜
web开发移动开发移动端开发移动互联程序员
移动互联网时代来了！ App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
- Log4J通用配置|注意问题 笔记
7454103
DAOapachetomcatlog4jWeb
关于日志的等级 那些去 百度就知道了！ 这几天 要搭个新框架 配置了 日志 记下来 ！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台 和 总日志文件 log4j.logger.DAO=INFO,dao,C
- SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager
darkranger
sqlcwindowsSQL ServerXP
当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP 需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法: C:\WINDOWS\system32目录搜索framedyn.
- [置顶] 做有中国特色的程序员
aijuans
程序员
从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
- document.domain 跨域问题
avords
document
document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
- 关于管理软件的一些思考
houxinyou
管理
工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
- NoSQL数据库之Redis数据库管理(String类型和hash类型)
bijian1013
redis数据库NoSQL
一.Redis的数据类型 1.String类型及操作 String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。 Set方法：设置key对应的值为string类型的value
- Tomcat 一些技巧
征客丶
javatomcatdos
以下操作都是在windows 环境下 一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可； 二、查看Tomcat 版本 在 tomcat 安装目
- 【Spark七十二】Spark的日志配置
bit1129
spark
在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console 在Spark的conf目录下，把log4j.properties.template修改为log4j.p
- Haskell版冒泡排序
bookjovi
冒泡排序haskell
面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。 sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
- java 路径 配置文件读取
bro_feng
java
这几天做一个项目，关于路径做如下笔记，有需要供参考。 取工程内的文件，一般都要用相对路径，这个自然不用多说。 在src统计目录建配置文件目录res,在res中放入配置文件。 读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
- 读《研磨设计模式》-代码笔记-简单工厂模式
bylijinnan
java设计模式
声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
- SVN与JIRA的关联
chenyu19891124
SVN
SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 二、装好JIRA，自己用是jira-4.3.4破解版 三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
- JWFDv0.96 最新设计思路
comsci
数据结构算法工作企业应用公告
随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
- vi 保存复制内容格式粘贴
daizj
vi粘贴复制保存原格式不变形
vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。 在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
- shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法
dongwei_6688
shell脚本
出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
- 高一上学期难记忆单词
dcj3sjt126com
wordenglish
honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share 分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半 native 本国的，本地的，本国
- hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性
frankco
POJOhibernate查询DTO
DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。 简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。 有时候我们需要查询返回DTO对象，因为DTO
- Partition List
hcx2013
partition
Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
- Spring MVC测试框架详解——客户端测试
jinnianshilongnian
上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
- 关于推荐个人观点
liyonghui160com
推荐系统关于推荐个人观点
回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】 第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
- 不间断旋转的动画
pangyulei
动画
CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
- 自定义annotation
sha1064616837
javaenumannotationreflect
对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 下面这个例子 主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
- Spring 源码
up2pu
spring
1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
- 利用word分词来计算文本相似度
yangshangchuan
wordword分词文本相似度余弦相似度简单共有词
word分词提供了多种文本相似度计算方式： 方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =