框模型&背景&渐变
1 框模型
1.1 框模型
块级元素:独立成行,可以设置宽高,margin上下有效
行内元素:与行内元素和行内块共用一行,宽高无效,margin上下无效
行内块元素:与行内元素和行内块共用一行,可以设置宽高,margin上下有效;行内块元素一经调整会影响整行元素
框模型Box Model定义元素框处理元素内容、内边距和外边距的方式
width和height指定内容区域的宽度和高度;增加内边距、边框和外边距不会影响内容区域尺寸,只会增加元素框的总尺寸。
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
box-sizing指定框模型的计算方式,取值:
默认值content-box,对象宽度计算方式为上述方式,设置的width/height是内容区域的大小;
border-box设置的width/height是内容区域+左右内边距+左右边框大小;
元素占地宽度=左右外边距+width;
元素占地高度=上下外边距+height;
1.2 外边距
-
外边距定义:围绕在元素边框周围的空白区域是外边距;透明的外边距会在元素外创建额外的空白。
-
外边距margin:与下一个元素之间空间量 margin:value;
单边设置:margin-top/left/right/bottom:value;
外边距的属性值可能为px(像素)、百分比(%)、或自动(auto)和负值
auto自动计算块级元素的外边距,margin:0 auto控制块级元素在水平方向居中;margin:100px auto上下100px,左右居中对齐;margin: auto等于margin: 0 auto垂直外边距将变为0 -
默认以下块级元素存在外边距:body、h#、p、ol、ul、dl、pre;使用样式重写*{}margin:0;padding: 0;}重置具备外边距的元素默认样式。
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,
hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} -
margin取值为autoÿ