3 CSS3 盒模型
2019-05-10 本文已影响0人
官清岁月
1、网页渲染模式:标准渲染模式、混杂(怪异)渲染模式 ->浏览器都有两种渲染网页模式
IE6混杂模式盒模型:代码区设置的宽/高 = 元素宽/高 + padding + border;//聚焦点"IE6"、“混杂模式” ->IE6标准模式下盒模型也同w3c标准盒模型相同,同时IE浏览器其它版本标准或者混杂模式下盒模型也同w3c没区别;
box-sizing:border-box;/content-box;

resize: none/both/horizontal/vertical/inherit;//常用于textarea元素上,若用于其它元素上,该元素必须设置overflow属性,否则不生效;->resize属性的"拉伸"往往影响后续元素布局(引起重绘、重排),若使用其最好设定"父元素"范围,减低后续布局影响;

2、弹性盒子
(1).display:flex/inline-flex;//部分css属性在弹性盒子中不起作用:float, clear, column,vertical-align等
(2).伸缩容器属性: display:flex;flex-direction;flex-wrap;justify-content;align-items;align-content;

(3).伸缩项目属性: order;align-self;flex-grow;flex-shrink;flex-basis;

demo: 子元素居中显示 -> div{ display: flex; justify-content: center; align-items: center; }
demo: 弹性布局实现三栏布局;