css布局

作者: 飞过的沙 | 来源:发表于2019-02-22 17:39 被阅读0次

相关属性

display

属性 属性值
inherit 元素从父元素继承 display 属性值
none 元素不显示
block 元素为块级元素
inline 元素为行内元素
inline-block 元素为行内块元素
flex 元素为弹性布局
  • 块级元素

    • 没有设置宽度时,它的宽度是其容器的 100%
    • 可以给块级元素设置宽高、内边距、外边距等盒模型属性
    • 块级元素可以包含块级元素和行内元素
  • 行内元素

    • 行内元素不会独占一行,只会占领自身宽高所需要的空间
    • 给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用
    • 行内元素一般不可以包含块级元素,只能包含行内元素和文本
  • 行内块元素

    • 既有行内元素的特性又有块级元素的特性

position

属性 属性值
relative 相对定位,相对于元素的正常位置进行定位
absolute 绝对定位,相对于除 static 定位以外的元素进行定位
fixed 固定定位,相对于浏览器窗口进行定位,网站中的固定 header 和 footer 就是用固定定位来实现的
inherit 继承父元素的 position 属性值
static 默认值,没有定位属性,元素正常出现在文档流中

float

属性 属性值
left 向左浮动
right 向右浮动

清除浮动的方法

  • 通过添加额外的标签,利用 clear 属性来清除浮动
  • 使用 br 标签(不推荐使用),会存在结构样式行为分离的问题
  • 给父元素设置 overflow:hidden; zoom:1(兼容IE6,IE7)
  • 使用 after 伪元素
    转载地址

相关文章

网友评论

      本文标题:css布局

      本文链接:https://www.haomeiwen.com/subject/nqzeyqtx.html