blog-web/重新认识display.md at cb20865b0906b274fa1b3c419685f5ac1a169425

sookie/blog-web

Fork 0

结发受长生 bf1aee3513 box-sizing

2018-06-19 16:45:25 +08:00

4.9 KiB

Raw Blame History

title

date

list-item

最初设计的display简单只有block和inline两种他们能够表现的效果十分简单

但是在处理项目符号的时候 , 这两种盒子模型都无法满足要求了因为需要一个附加盒子来放置圆点数字这些项目符号所以对于display:list-item来说除了主块级盒子 , 还需要有这样一个标记盒子

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

inline-block

最初对于块级元素和内联元素的定义 , 其实是这些元素的外在表现也就是是否能在一行当中排布 , 还是必须独占一行 inline-block则是更加细化了盒子模型将盒子模型分为 外在盒子以及 内在盒子 当然这么说只是为了方便理解 , 内在盒子官方的称呼应该是容器盒子

所以这个值的意思应该是

外在具备内联元素的特点 , 可以在一行中有多个内在具备块元素的特点 , 可以设置width和height来指定它的大小

那么block其实可以理解为block-block inline可以理解为inline-inline

{% jsfiddle sookie/hLu81xet html,css,result dark %}

width与height

width和height是作用在哪个盒子上的 , 根据上面设置height和width属性的表现可以看出显然是作用在 内在盒子上面的

width的默认值是auto 它至少包含以下不同的宽度表现

充分利用可用空间 : 这种表现之下 , 横向占满父容器 , 见于外在块级元素 , 比如<div>, <p>
收缩与包裹 : 代表是浮动绝对定位 inline-block元素或table元素
收缩到最小 : 容易出现在table-layout为auto的表格中 ( 表现为表格中的文字呈竖排被压缩为一列 )
超出父容器限制 : 内容为很长的连续英文或数字 ( 汉字可以在任意位置截断 ) , 或者内联元素被设置了white-space:nowrap

关于100%

对于display为block的元素 , 它的宽度如果是auto , 那么自然会表现为 充分利用可用空间 但是并不意味着指定width为100%会有同样的表现

比如这种情况

<div class="box">
  <div class="cell">123</div>
  <div class="cell">456</div>
</div>

.box {
  width: 150px;
  height: 100px;
  background: pink;
  
}
.box > .cell {
  background: orange;
  padding: 5px;
  margin: 5px;
  width: 100%;
}

子元素具备padding margin 设置了宽度100% , 反而会溢出父容器之外更好的办法是借助流动性无宽度布局

例外的是textarea和input, 他们都自带border和padding, 并且如果强行清除padding, 内容会顶着边框, 并不美观但是即使设置他们的display是block , 也不会自适应父容器宽度这种情况下是必须用到box-sizing: border-box的

<div class="box">
  <textarea ></textarea>
  <input type="text" />
  <br>
  <textarea class="border"></textarea>
  <input type="text" class="border"/>
</div>

.box {
  width: 300px;
  height: 150px;
  border: 1px solid red;
}
.box > textarea, .box > input {
  display: block;
  width: 100%;
}
.box > textarea.border, .box > input.border {
  box-sizing: border-box;
}

height:auto

与width相比, height就简单许多了, 因为CSS默认的流是水平方向的宽度是稀缺的, 高度是无限的多数情况下都是内部元素高度总和多高, 父元素就有多高 ( 子元素未脱离标准流 ) 需要注意的一点就是 高度的百分比值要想起作用, 父元素必须有可以生效的高度值

自适应性

简单来说就是内容越多 , 宽度越宽如果这个宽度达到了父容器的宽度, 则会自动换行

前提是内容按照当前换行规则可以换行, 否则会溢出父容器

比如要实现内容为单行时居中 , 多行时最后未占满的一行居左 , 可以这样做

<div class="box">
  <div class="content">这是一行文字</div>
  <div class="content">这是很多文字这是很多文字这是很多文字</div>
</div>

.box {
  width:180px;
  border:1px solid red;
  padding:5px;
  text-align:center;
}
.box > .content {
  display:inline-block;
  text-align:left;
  border:1px solid blue;
}

4.9 KiB Raw Blame History