From bf1aee35133c5e4071e957737399e2bdf8da0ecf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Tue, 19 Jun 2018 16:45:25 +0800 Subject: [PATCH] box-sizing --- source/_posts/前端杂烩/重新认识display.md | 35 ++++++++++++++++++ source/images/前端杂烩/textarea_and_input.png | Bin 0 -> 5944 bytes 2 files changed, 35 insertions(+) create mode 100644 source/images/前端杂烩/textarea_and_input.png diff --git a/source/_posts/前端杂烩/重新认识display.md b/source/_posts/前端杂烩/重新认识display.md index 4c47299..2da1da2 100644 --- a/source/_posts/前端杂烩/重新认识display.md +++ b/source/_posts/前端杂烩/重新认识display.md @@ -95,6 +95,41 @@ width的默认值是`auto` ![no width layout](/images/前端杂烩/no_width_layout.jpg) 更好的办法是借助流动性无宽度布局 +例外的是`textarea`和`input`, 他们都自带border和padding, 并且如果强行清除padding, 内容会顶着边框, 并不美观 +但是即使设置他们的display是block , 也不会自适应父容器宽度 +这种情况下是 **必须**用到`box-sizing: border-box`的 +```html +
+ + +
+ + +
+``` +```css +.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; +} +``` +![文本域和输入框的自适应](/images/前端杂烩/textarea_and_input.png) + +##### height:auto +与width相比, height就简单许多了, 因为CSS默认的流是水平方向的 +宽度是稀缺的, 高度是无限的 +多数情况下都是内部元素高度总和多高, 父元素就有多高 ( 子元素未脱离标准流 ) +需要注意的一点就是 +**高度的百分比值要想起作用, 父元素必须有可以生效的高度值** + #### 自适应性 简单来说就是内容越多 , 宽度越宽 如果这个宽度达到了父容器的宽度, 则会自动换行 diff --git a/source/images/前端杂烩/textarea_and_input.png b/source/images/前端杂烩/textarea_and_input.png new file mode 100644 index 0000000000000000000000000000000000000000..75344839f912e2f0ded064da9ba99d3677169439 GIT binary patch literal 5944 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 literal 0 HcmV?d00001