html/css基础知识（新手合适）

Posted 兜里有糖0831

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html/css基础知识（新手合适）相关的知识，希望对你有一定的参考价值。

html

标签

块级元素

  • div，ul，li，dl，dt，dd，p，h1-h6，ol
  • 独占一行，可以设置宽高
  • 转行内：display：inline；

行内元素

  • a，b，span，img，input，strong，select，label，button，textarea
  • 一行可以显示多个，不可以直接设置宽高，只能容纳文本或其他的行内元素
  • 转块：display：block；

行内块

  • 一行可以显示多个，可以控制宽高
  • display：inline-block；

浮动float

三个浮动

  • none
  • left
  • right

清除浮动

  • 伪元素清除浮动（推荐）

    • .clear::after
      content: ‘’;
      display: block;
      clear: both;

      • 在div里边直接加上after

  • 隔墙法

    • 在末尾添加

      • 添加无意义的标签 不好用

  • 给父级添加overflow

    • 会导致内容被隐藏

css背景background

背景颜色color

  • transparent 透明的

背景图片image

  • none无背景图
  • url指定背景图

背景平铺repeat

  • repeat在纵向和横向平铺
  • no-repeat不平铺
  • repeat-x横向平铺
  • repeat-y纵向平铺

背景位置position

  • top/center/bottom上下的方位名词
  • left/center/right左右的方位名词
  • length可以写数字

背景附着

  • scroll

    • 背景图像是随着对象内容滚动

  • fixed

    • 背景图像固定

背景透明

  • background：rgba（0,0,0,0.3）；

字体相关属性

font-size字体大小

font-family字体样式

font-weight字体粗细

  • normal默认样式等同于400
  • bold等同于700
  • 最多到900

font-style字体风格

  • italic斜体

font综合属性

  • style weight size/line-height family

    • 空格隔开
    • size和family缺一不可

水平对齐和行高

text-align水平对齐

  • left左对齐
  • center居中
  • right右对齐

line-height行高 垂直对齐

text-indent首行缩进

  • 1em是一个字

text-decoration文本装饰

  • none取消下划线
  • underline加上下划线

选择器

后代选择器

  • 用空格隔开 会选中第一个标签后的所有的后代
  • .class h3

子元素选择器

  • 用大于号 只会选中选择的后代
  • .class>h3

交集选择器

  • 两个标签不能有空格 会选中两个标签都有的部分
  • h3.class

并集选择器

  • 用逗号隔开，会选中一个或多个标签
  • .class,h3

链接伪类选择器

  • a:link

    • 没有点击这个链接

  • a:visited

    • 访问过这个链接

  • a:hover

    • 鼠标悬停样式

  • a:active

    • 点击但是不松手

css三大特性

css层叠性

  • 就是css样式叠加
  • 就近原则

css继承性

  • 子元素会继承父元素的某些东西
  • text-，font-，line-以及color属性都可以继承

css优先级

  • id选择器>类选择器>标签选择器>继承
    id选择器权重=100
    标签选择器权重=10
    标签选择器=1
  • ！important无穷大

盒子

盒子

  • 边框border
  • 内边距padding
  • 外边距margin

边框border

  • border-width定义边框粗细

  • border-style边框的样式

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lotso9Yz-1617364692319)(C:\\Users\\Lenovo\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210402195551551.png)]

  • border-color边框颜色

  • 表格细线边框

    • border-collapse：collapse合并相邻边框

  • 综合属性

    • border：1px solid #000；

内边距padding

  • 属性

    • 上内边距padding-top
    • 下内边距padding-bottom
    • 左内边距padding-left
    • 右内边距padding-right

  • 值

    • 一个值：上下左右
    • 两个值：上下，左右
    • 三个值：上，左右，下
    • 四个值：上右下左

外边距margin

  • 同内边距

盒子阴影

  • box-shadow:
    水平阴影 垂直阴影(前两个必写) 模糊距离 阴影尺寸 阴影颜色 内/外阴影
  • 5px 5px 3px 4px rgba（0,0,0，.4）

HTML5

结构化标签