本篇文章需要对css布局技术进行汇总,以达到对布局技术的系统性认知
MDN对css布局的描述:
CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置
css常见布局
css布局知识点
display属性值:
none:该元素不会被显示;
inline:块级元素,前后有换行符;
block:元素为内联元素;
注:css布局方式:普通流,浮动,绝对定位
position属性:
static:默认值,没有定位;
relative:相对定位,相对本身的正常定位进行修改
absolate:绝对定位,相对于static元素外的第一个元素
fixed:绝对定位元素,相对于浏览器窗口进行定位
margin属性(设置元素外边距大小):
auto:浏览器计算外边距,常使用于居中显示;
length:使用具体值计算外边距值;
%:使用百分比进行外边距计算;
padding属性(设置元素内边距):
auto:浏览器计算内边距;
length:使用具体值计算内边距值;
%:使用百分比进行内边距计算;
float属性:
left:元素向左浮动;
right:元素向右浮动;
none:元素不进行浮动;
注意:浮动会自动转化为块级元素