css常见布局(一)

上来就是干!

css左右布局(两栏布局)

使用inline-block实现左右布局,原理:inline无法设置宽高,只占有内容宽高的空间,block可以设置宽高,单,会单独占据一行空间,inline-block介于inline与block之间,可以设置宽高且只占有设置宽高的空间.

代码实现:

代码部分 实际效果

inline-block问题 : 两个inline-block之间会出现间隙,解决方法:可以通过负margin解决或在书写html时让两个元素之间连续书写,没有隔行都可以解决.

---

使用float实现左右布局,原理:float作用于元素,让元素脱离文档流,实现在html中的浮动,它有两个属性,left跟right,简单理解就是可以让元素在左边还是右边,而且左浮找左浮,右浮找右浮,根据这两个属性,就能解决左右布局问题了.

代码部分 实现效果

float进阶: 1.包裹性,浮动元素包含内容都进行浮动  2 . 破坏性,浮动元素不会被父级包裹,就会导致父级的高度塌陷,解决方法就是给父级清除浮动  3. 视觉占位 虽然脱离的文档流,因为是平面展现,在视觉上我们会看到浮动元素遮挡了文档流元素,解决仍是是清除浮动.

---

使用position:absolute+margin左右布局,原理:position：absolute也具有浮动的属性,给元素设置position：absolute,可以让其脱离文档流,但是position：absolute不具有浮动贴靠的特性,因此两个元素position：absolute会导致重合,解决方式:右边的元素负margin为左边元素的宽度.

代码部分 实现效果

css左中右布局(三栏布局)

使用table,父元素添加display:table,子元素均添加display:table-cell,中间部分不给宽.

代码部分 展示效果

---

使用position,左边的元素进行left:0定位,右边的元素进行right:0定位,中间的元素不设置宽,margin负值为左边元素的宽度.

代码部分 展示效果

---

使用float布局,一个元素想做浮动,一个元素向右浮动,中间的元素不给宽,给高即可.

代码部分 展示部分

当然还有其他例如:flex布局,grid布局等等,接下来学习到,在陆续补充...