盒子模型:box model 四部分组成
margin:外边距 盒子与盒子之间距离
border:边框 指定上下作用边框大小、样式
padding:边框与内容之间距离,内边距
content:内容
padding:边框与内容之间的距离
盒子加了内边距后的影响
1)内容和边框有了距离
2)盒子会变大
内盒尺寸计算
盒子的实际大小:内容宽度和高度+内边距+边框
padding不影响盒子大小情况,如果盒子没有宽度,则padding不会撑开盒子
<div style="width:200px;height:200px;background-color:green;">
<div style="width:310px;height:30px;background-color:red"></div>
</div>
外边距margin
1.块级盒子水平居中
满足:1)盒子本身必须有宽度 2)左右外边距为auto
auto就是充满,没有宽度就会充满整个父亲宽度
2.文字居中和盒子居中
text-align:center ;文字居中 行内元素、行内块元素居中
margin:auto;块级盒子居中
插入图片与背景图片区别
1.插入图片 :产品展示、移动位置只能用和模型 padding margin
2.背景图片:小图标背景、超大图标 通过background-positon
外边距合并
1.垂直外边距合并
当上下相邻两个块元素相遇时,如果上面的元素有下外边距,下面的元素有上外边距,他们之间的距离取两个值中较大者,外边距塌陷
塌陷
2)嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后外边距为两者中的较大者。 左右不会,
解决方案:
1)父亲定义上边框
2)父亲定义内边距
3)父亲添加overflow:hidden
盒子布局稳定性:
优先使用width padding margin
标准流
浮动
定位
为什么需要浮动:多个div合并为一行
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
float用于创建浮动框,将其移动到一边,直到左边缘触及包含块或另一个浮动框的边缘。
浮动特性:
1.浮动元素会脱离标准流,不再保留原先的位置
2.浮动的元素会一行内显示且元素顶部对齐
3.浮动的元素会具有行内块元素的特性
浮动元素具有行内块元素的特征:
如果块级元素没有设置宽度,默认宽度和父级元素一样宽,但是添加浮动后,他的大小根据内容来决定,
浮动元素经常搭配标准流的父元素:
为了约束浮动元素位置我们网页布局一般采用策略是,先用标准流的父元素排列上下位置,之后内部子元素采用浮动排列左右位置,符合网页布局的第一准则
浮动布局注意点:
1)浮动和标准流的父盒子搭配
2)浮动的盒子只会影响浮动盒子后边的标准流不会影响前面的标准流
为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准流盒子。
清除浮动的本质?
清除浮动造成的影响,清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了
清除浮动的策略是?
闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
clear:both
清除浮动方法
1.额外标签法
.clear{ clear:both} 这个额外标签必须是块级元素
2.父级添加overflow
overflow:hidden/auto/scroll
但是无法显示溢出的部分
3.父级添加after伪元素
.clearfix:father{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ *zoom: 1;}
4.父级添加双伪元素
.clearfix:before,.clearfix:after{
content:"",display:table
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
定位导读:
1.某个元素可以在一个盒子内移动位置并且压住其他盒子。
2.当我们滚动窗口的时候,盒子是固定屏幕某个位置的
定位:可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
定位组成:定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置。
定位模式:positon
static:静态定位
relative:相对定位
1)相对定位在移动位置的时候,是相对于它原来的位置来说的。
2)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)
absolute:绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。
三个特点:
1.如果没有祖先元素或者祖先元素没有定位,则已以浏览器为准定位。
2.如果祖先元素有定位(相对/绝对/固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置
fixed:固定定位
固定定位是元素固定于浏览器可视区的位置。主要是用场景:可以在浏览器页面滚动时元素的位置不会改变。
特点:
1.以浏览器的可视窗口为参照点移动元素。
2.不占有原先位置。
固定版心位置:
1.让固定定位的盒子left:50%,走到浏览器可视区的一半位置
2.让固定定位的盒子margin-left:版心宽度的一半距离
边偏移:top/bottom/left/right四个属性。
子绝父相的由来:
1)子级绝对定位,不会占有位置,可以放到父盒子里边的任何一个地方,不会影响其他的兄弟盒子。
2)父盒子需要加定位限制子盒子在父盒子内显示。
总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。
只有定位的盒子才有z-index属性
加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过
left:50%;//父容器宽度的一半
marign-left:负值 自己盒子宽度的一半
显示和隐藏
display:
visible
overflow