小李带你玩转html—04

文本

  • text-align文本对齐
  • left——水平左对齐
  • right——水平右对齐
  • center——水平居中对齐
    在这里插入图片描述
    在这里插入图片描述
  • text-indent首行缩进
    设置的是文本的首行缩进
    单位:em px 百分比
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • text-decoration:文本修饰
  • 正常,没有修饰:none;
  • 下划线:underline;
  • 中划线,删除线:line-through;
  • 上划线:overline;
    在这里插入图片描述

盒模型

盒模型,也叫作框模型。
在这里插入图片描述

  • 盒模型
  • margin:外边距
  • border:边框
  • padding:内边距
  • 宽度×高度
    这个宽高规定的是我们能够书写内容的区域,实际内容区域。
    在这里插入图片描述
    图为示例
  • 例子
  • 初始状态
    在这里插入图片描述
  • 加了内边框和边距
    在这里插入图片描述
  • 改了宽和高
    在这里插入图片描述
    内边距padding
    位置在宽和高和边框之间,上下左右都可以设置内边距
    padding-left 左边内边距
    padding-right 右边内边距
    padding-top 上边内边距
    padding-bottom 底部内边距
    单一属性写法
    在这里插入图片描述
    复合属性写法
    四值法:
    在这里插入图片描述
    代表的次序分别是:上,右,下,左

三值法:
在这里插入图片描述
代表的次序分别是:上 左右 下


二值法:
在这里插入图片描述
代表的次序分别是:上下,左右


单值法:
在这里插入图片描述边框border
1.按照样式类型来划分
**线的宽度 border-width
单值法:
在这里插入图片描述


双值法
在这里插入图片描述


三值法:
在这里插入图片描述


四值法:
在这里插入图片描述
单独设置可写为 border-left-width:5px;

**边框颜色 border-color
在这里插入图片描述
当然这个也可以写四值法,三值法,二值法,单值法

**线的样式 border-style
属性值分类:
solid 实线
dashed 虚线
点的虚线
double 双线条
groove 边框凹陷效果
ridge 边框凹出效果
inset 内容区域凹陷效果
outset 内容区域突出效果
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值