HTML入门第十天之一网打尽所有css属性

css属性

margin:0

外边距

• 10px

  • 上下左右10

• 10px 20px

  • 上下10px 左右20px

• 10px 20px 30px

  • 上10px 左右20px 下30px

• 10px 20px 30px 40px

  • 顺时针

    • 上 右 下 左

padding:0

内补

• 10px 20px 30px

  • 上10px 左右20px 下30px

• 10px 20px

  • 上下10px 左右20px

• 10px

  • 上下左右10

• 10px 20px 30px 40px

  • 顺时针

    • 上 右 下 左

display:inline-block

转换成行内块

inline

• 转换成行内元素

block

• 转换成块元素

none

• 隐藏

文本

text-decoration:none

• 字体下滑线

• none

  • 无

• overline

  • 上滑线

• underline

  • 下滑线

• line-though

  • 中滑线

text-align:center

• 文本居中

• left

  • 左

• right

  • 右

height:60px

• 高度

width:1200px

• 宽度

• line-height:height
  

  • 行高

    • 当行高等于盒子大小时文本垂注居中

vertical-align:middle

• 对齐方式
• 基线

white-space:nowarp

• 强制换行

overflow:hidden

• 内容溢出隐藏

text-overflow:ellipsis

• 文本溢出显示省略

boreder:1px solid red

边框

字体

font-size:16px

• 字体大小

font-weight:normal

• 字体粗细=正常

font-family:仿宋

• 指定字体

color:red

• 前景色

background-color:red

• 背景色

font-style:normal

• italic 斜体
• 字体样式=正常
• oblique 倾斜

text-transform

• 文本大小写转换

  • uppercase 全大写
  • lowercase 全小写
  • capitalize 首字母大写

text-indent

• 首行缩进

letter-spacing

• 字母与字母之间的距离

word-spacing

• 单词与单词之间的距离

列表

list-style-type:列表样式

• =circle 空心圆 lower-alpha小写字母 upper-alpha 大写字母 inherit
• 正方形

列表样式图片

list-style-image

• 图片不能更改大小

list-style:none

• ul ol li去除列表样式就是前面的小点点

list-style-position

• 列表样式位置

  • inside

    • 和内容在一起

  • outside

    • 默认

定位

Position：static 默认

相对定位 position:relative;

• 相对于原来的静态位置发生便宜 占用文档流位置
• （我走了位置还留着）

绝对定位 position:absolute

• 绝对定位脱离了”文档流“
• 使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签
• 如果没有，那么将以浏览器左上角为准来定位
• 特别只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”

相对于窗口的定位 position:fixed;

• 表现为滚动条滚动式，元素位置不变

粘性定位position:sticky;

• 当没有滚动到特殊位置时，跟随滚动条滚动，到达特定位置时位置不再发生变化

其他

z-index 距离眼睛远近越大越靠上

border-radius:50%

• 弧度