8.22学习笔记
内边距paddiing
设置padding的时候,默认的会把这个元素拉伸。所以
它的实际宽高==设置的宽高+padding值(有两个)+border*2
占用空间 设置的宽高+2*margin+2*padding+2*border
用·box-sizing:border-box可以保证div设置的宽高就是自己设定的值。
background 背景
background:url 填充图片
background-repeat:no-repeat 平铺
background-size:100% 100% 充满整个盒子
background-position:10px 10px; 设置背景在盒子中的位置,向右为正,向下为正。
可以简写成
相对定位 position:relative; 这个属性给需要定位的父级。
绝对定位 position:absoluet; 他有四个值 top left right bottom;
Position的使用其实是将该标签的类型给变了。将块变成了行级块。
页面结构分析
结构层
最外面的一层,这个机构层不能设置太多的样式,一般设置宽,margin。
千万不要设置position,会让内部元素脱离文档流。
布局层
给予内部元素进行排版的。
Position 造成的脱离文档流如何解决???
最简单的就是给父级一个高