盒子模型
1.盒子模型=网页布局的基石
由4部分组成:边框(border)、外边距(margin)、内边距、(padding)、盒子中的内容(content)。
2. 边框(border)、外边距(margin)、内边距、(padding)是盒子模型的属性,
有四个方向,可以设定属性值。 顺时针方向设置,为上、右、下、左
3.三个值的属性为: a为上、 b为左右、c为下。
两个值的属性为: a为上下、b为左右。
一个值的属性为: a为上下左右。
4.优先级,就近原则, 行内样式> 内部样式> 外部样式
5.边框三个属性:边框的粗细、样式、颜色、每一个属性值都要有一个空格来个开,空格必须在英文输入法状态下输入才可以,三个属性缺一不可。
6.盒子模型的三维模式的包裹层与ps的模型一样,分为五层:
border为第一层、
content+padding为第二层、
background-image为第三层、
background-color为第四层、
marg为第五层。
7.盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
1.float属性的3个属性值:
left-左浮动 right-右浮动 none-不浮动
特点:元素会左移,或右移,直至碰触到容器为止。
2.设置了浮动的元素,仍旧处于标准文档流中,意味着它仍占据标准文档中的空间,会对它周围的元素产生影响。
3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
4.当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特质紧邻后面的元素(DOM结构中的紧邻其后面的元素)。
1.清除浮动的常用方法
clear属性-常用clear:both;
clear:left,或者clear:right; 清除元素左侧或右侧的浮动
同时设置width:100%(或固定宽度)+overflow:hidden;也是可以清除浮动的。一般给受到浮动的元素设定的。
p{100%; overflow:hidden}或p{width:both}
一:横向两列布局的实现:这是网页布局最常见的方式之一 主要应用技能: float属性——使纵向排列的块级元素,
横向排列 margin属性——设置两列之间的间距 二:当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动
。所以设置父的overflow:hidden ☆div块的高度一般不需要设置,这样高度就会随着内容自动扩展。
若设置了高度,又设置了overflow:hidden,当内容超过高度的时候,就无法正常显示了