千家信息网

css盒子模型、背景和列表的应用方法

发表于:2024-12-01 作者:千家信息网编辑
千家信息网最后更新 2024年12月01日,这篇文章主要介绍"css盒子模型、背景和列表的应用方法"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"css盒子模型、背景和列表的应用方法"文章能帮助大家解决问
千家信息网最后更新 2024年12月01日css盒子模型、背景和列表的应用方法

这篇文章主要介绍"css盒子模型、背景和列表的应用方法"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"css盒子模型、背景和列表的应用方法"文章能帮助大家解决问题。

  border-style的值:

  none 无

  dotted 点状

  dashed 虚线

  solid 实线

  double 双实线

  margin:

  垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并

  合并高度=两个发生合并的外边距中的较大值

  元素的实际高度=上边框+上内边距+内容高度+下内边距+下边框

  元素在页面中实际所占的高度是:上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

  hover属性实现鼠标悬停时显示子元素:

  

  

  

  

  display属性

  

  

  

  

  

家电

  

      

  • 冰箱
  •   

  • 空调
  •   

  • 洗衣机
  •   

  

  

  

  inline将元素显示为内联元素,元素前后没有换行符

  行内元素无法设置宽和高,外边距只能设置左右的,无法设置上下的

  列表demo:

  

  

  

  

  display属性

  

  

  

  

  

  

前端课程排列

  

  

      

  •   

    HTML+CSS基础课程

      456605人在学

      

  •   

  •   

    HTML+CSS基础课程

      456605人在学

      

  •   

  •   

    HTML+CSS基础课程

      456605人在学

      

  •   

  

  

  

  鼠标悬停显示demo:

  

  

  

  

  display属性

  

  

  

  

  

  

家电

  

      

  • 冰箱
  •   

  • 洗衣机
  •   

  • 空调
  •   

  

  

  

洗护

  

      

  • 洗衣液
  •   

  • 消毒液
  •   

  • 柔顺剂
  •   

  

  

  

衣物

  

      

  • 衬衫
  •   

  • 裤子
  •   

  • 卫衣
  •   

  

  

  

  

  background-color:transparent 透明,是默认值

  背景区包括内容+内边距+边框,不包括外边距

  background-repeat:repeat、no-repeat、repeat-x、repeat-y、inherit

  background-attachment:scroll(默认)/ fixed

  background-position:

  值(x y)(x% y%)(只有一个参数代表第二个默认居中)/top/bottom/left/right/center(水平垂直居中)

  background简写:后面的属性值不分顺序

  有序列表样式:

  list-style-position:inside(嵌入文本中)/outside(在所有文本左侧)

  

  

  

  

  demo

  

  

  

  

      

  • 电视
  •   

  • 冰箱
  •   

  • 洗衣机
  •   

  • 空调
  •   

  

关于"css盒子模型、背景和列表的应用方法"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注行业资讯频道,小编每天都会为大家更新不同的知识点。

0