CSS的属性(一) | 零基础学HTML(十一)

112 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第17天,点击查看活动详情

文本属性:

  • 水平对齐text-align

    • 作用:设置文本水平方向的对齐;在盒子中,不论文本是单行还是多行,都会对应方向对齐

    • 属性值:三个方向的单词(lef、center、right、justify:两端对齐)

  • 文本修饰text-decoration

    • 作用:设置文本整体是否有线条的修饰效果

    • 属性值:none、overline(上划线)、line-through(中划线或叫删除线,<del>标签的默认值)、underline(下划线,<a>标签的默认值)

  • 文本缩进text-indent

    • 作用:设置段落首行是否进行缩进

    • 属性值:px单位、em单位(首行缩进几个中文字符的位置)、百分比(表示缩进文字所在标签的父级标签的width属性值的百分比)

    • 注意:实际工作中,最常用em为单位的属性值;属性值区分正负,正数表示向右缩进,负数表示向左缩进

  • 盒模型又叫框模型,包含五个用来描述盒子位置、尺寸的属性,分别是width(宽度)、height(高度)、padding(内边距)、border(边框)、margin(外边距) image.png

  • 盒模型的属性中,根据不同属性的效果,可以划分区域:

    • 书写元素内容区域:width+height

    • 盒子可以实体化的区域:width+height+padding+border

    • 盒子实际占位的位置:width+height+padding+border+margin

  • padding的简写:可以有1-4个值,根据padding的属性值个数不同,区分四种表示法:

    • 四值法:padding: 10px 20px 30px 40px;(顺序:上、右、下、左)

    • 三值法:padding: 10px 20px 30px;(顺序:上、左右、下)

    • 二值法:padding: 10px 20px;(顺序:上下、左右)

    • 单值法:padding: 10px;(四个放下都有)

  • 案例:制作三边内边距相同,一边不同:

    • 方法一:使用四值法、三值法进行属性值设置

    • 方法二:利用综合属性和单一属性之间的层叠,对综合属性设置单值法,将四边内边距设置相同,在后面使用单一属性写法,再次定义某个方向的属性值不同,可以实现单一属性层叠综合属性的一部分 image.png