盒子模型:content padding border margin
水平布局:
width+padding+border+margin<父元素的width
1. width+padding+border+margin都设置了确定值
当小于父元素的width时,多余的部分给margin-right吸收
2.当width不设置或者设置为auto值时,多余的部分有宽度吸收
当margin-left=auto,多余的部分由margin-left吸收
当margin-right=auto,多余的部分由margin-right吸收
总结:当设置了auto就将多余的部分给它,注意能设置auto值的属性:width,margin-left,margin-right
3.有二个属性设置auto时
width与margin-left/width和margin-right同时设置auto值时,对于部分有width吸收,margin-left/margin-right没有值
margin-left和margin-right同时设置为auto时,多余部分平分给左右外边距=》块元素的水平居中
4.设置三个auto
width与margin同时设置auto时,多余部分由宽度吸收
外边距:
margin:设置元素与元素之间距离
<span class="span1">lorem</span>
<span class="span2">lorem</span>
垂直方向
块元素
兄弟: 二个都是正值:谁大听谁的
一正一负:二者相加
二者都是负数:看绝对值大的
父子:出现的问题:外边距重叠问题=》父子元素的外边距开始位置重合在一起
解决思路:使父子外边距开始位置不同
解决方法:
1.给父元素设置边框=》问题:①.会撑开父元素;box-sizing:border-box
②.子元素的margin-top设置的距离是上边框离父元素上底边距离
2.给父元素设置内边距=》问题:会撑开父元素:box-sizing:border-box
3.给父元素开启bfc
bfc(Block Formatting Context,块级格式化环境),是css的隐形属性,将父元素开辟一个单独的空间,
开启bfc方法:
1.overflow的值非visible,但是副作用最小的是hidden
2.设置浮动,后面会说
3.设置绝对定位
4.在html里面添加一个空的table,影响到html结构
5.给父元素设置伪元素::before(注:伪元素选择器是在父元素里面添加一个子元素)添加一个table
行元素:在垂直方向可以设置外边距,但是没有效果
行内块:二者正值:二者相加
水平方向:
行元素&行内块元素:二者都是正值,一正一负:相加 ,
注意行内块元素在默认情况有空白间隙
兄弟 :
<p>lorem1</p>
<p>lorem2</p>
<hr>
父子 :
需求:1.子元素离父元素左边50px
2.子元素离父元素顶边50px