css基本概念

css中的几点重要概念
1.元素类型
HTML的元素可分为几种类型
块级元素与内联元素
两者区别
1.块级元素会单独占一行,除非修改display属性,而内联元素可以在一行显示
2.块级元素可以设置高度,宽度等,而内联元素设置无效
3.块级元素的width默认为100%
4.最常见的块级元素是div,而内联元素为span,a,img
5.内联元素想要设置宽高,可以设置属性为display:block
6.元素想在一行呈块级元素,设置属性为display:inline-block
2.绝对定位
position:relative,相对定位,可以通过相对元素的正常位置来进行定位
position:abosulute,绝对定位是通过元素的父级元素来进行定位的,元素在页面中并不占据位置
而且把元素置为绝对定位或者position:fixed时,会发生三件事情:
1.该元素往前移了一层,元素脱离了文档流,不再占据原来的位置,还会覆盖下面的元素
2.该元素变为块级元素,相当于设置了display:block
3.如果该元素为块级元素,元素的宽度由100%变为了auto
4.当元素设置position:abosulute 或者position:fixed时,就没有必要设置display:block

3.float:浮动
1.只有左右浮动,没有上下浮动
2.元素设置浮动后,他就会脱离文档流,不再占据原来的空间,还会覆盖下一层的空间
3.浮动不会对该元素的上一个兄弟元素有任何影响
4.浮动之后,该元素的下一个兄弟元素会紧贴到该元素之前没有设置float的元素之后,因为这个元素已经脱离文档流,如果该元素的下一个元素也设置了浮动,会在后 面依次显示,该元素将变为块级元素

4.清除浮动
1.clear:both
2.在设置浮动的元素的父级元素设置overflow:hidden

猜你喜欢

转载自blog.csdn.net/weixin_42355871/article/details/82143672