淮安市建设监理协会网站,网站个人建设,wordpress 后台上传,北京网站建设 云智互联巧妙运用margin负值盒模型和怪异盒模型(border padding 包含在内)display: block 能让textarea input 水平尺寸自适应父容器? – 不能
* {box-sizing: border-box; // bs: bb
}textarea/ 是替换元素,尺寸由内部元素决定,不受display水平影响. 当然可以直接设置宽度10…巧妙运用margin负值盒模型和怪异盒模型(border padding 包含在内)display: block 能让textarea input 水平尺寸自适应父容器? – 不能
* {box-sizing: border-box; // bs: bb
}textarea/ 是替换元素,尺寸由内部元素决定,不受display水平影响. 当然可以直接设置宽度100%margin塌陷(合并/重叠)
标准流, 上面的盒子设置 margin-bottom, 下面的设置了margin-top, 这个两个会重叠, 变为较大的一个但是, 如果脱标,比如浮动之后就不会重叠了; 或者两个元素在flex/grid 内,
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 100%;height: 200px;background-color: antiquewhite;margin-bottom: 100px;float: left;}.box2{background-color: aqua;margin-top: 100px;}/style
/head
bodydiv classbox1/divdiv classbox2/div
/body
/htmlmargin margin和padding 用 百分比单位, 参照的是父级的宽度,设置width 也是参照父级的宽度… xxx xxx xxx xxx 2 xxx xxx 2 如何让2 向下延伸, 又不会挤走第三行? padding
inline 元素的padding 其实也影响布局.有两点: 下面的a元素的padding 把上下的遮住了. 导致只能触发 alert(2)padding的出现使contianer产生了滚动条 style.container {width: 200px;height: 100px;margin: 200px auto;overflow: auto;background-color: #f0f3f9;}a {font-size: 12px;padding: 100px 10px;background-color: red;opacity: .7;}
/style
div classcontainerdiv onclickalert(1)11/diva href# onclickalert(2)yogaMiller/adiv onclickalert(2)22/div
/div盒模型 定位 flex/grid 是写页面的基础最初是用来做文字环绕图片的效果的. 后面发展成了一种布局方式可以轻松实现
ul li {float: left;float: right;
}
// 元素浮动后,脱离文档流, 且有了行内块元素的特点. 可设置宽高等.清除浮动
.clearfix::after{content: ;display: block;clear: both;height: 0;visibility: hidden;
}
.clearfix{*zoom: 1; /* ie 6 7 感觉不太需要了*/
}
.box{overflow: hidden; /* overflow-x: auto scroll */
}
