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

结构化标签

• 表示头部
• 表示底部
• 表示板块
• 表示文章类的内容
• 表示导航

音频和视频

• 表示视频

  • 您的浏览器版本不支持

• 表示音频

  您的浏览器版本不支持
  

栅格

3

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

4

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

定位

相对定位position：relative

• 没有脱标 标准流 从自己原来的坑开始算

绝对定位position：absolute

• 参考点

  • 绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角

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

  • 如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角

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

固定定位position：fixed

子绝父相

• 父元素相对定位，子元素绝对定位，子元素从父元素的角开始算

居中

• 子绝父相居中

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

• 绝对定位居中

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

堆叠顺序z-index

• 只对三个定位有用，数值越大越靠上

伸缩布局

display:flsx;

主轴对齐

justify-content

• flex-start
  起始点对齐
• flex-end
  终止点对齐
• center
  居中对齐
• space-around
  四周环绕
• space-between
  两端对齐

align-items

侧轴对齐

• flex-start
  侧轴起始点对齐
• flex-end
  侧轴终止点对齐
• center
  侧轴居中对齐
• stretch
  拉伸占满

flex-direction: column;

改变主轴侧轴的方向

CSS3

选择器

• 属性选择器：input[type=“checkbox”]
• 结构性伪类选择器
  ul li:nth-child(2)
  ul li:first-child
  ul li:last-child

边框

• border-radius: 10px 20px 30px 40px;
  代表左上角，右上角，右下角，左下角
• border-radius:50%;代表正圆

边框阴影

• box-shadow: 10px 10px 5px #888888;
  横向移动距离、纵向移动距离、模糊程度、颜色

2D转换

• translate(x,y);

  • x表示图形在x方向上移动的距离，默认单位是px。当x为正时，图形向x轴正方向移动；当x为负时，图形向x轴反方向移动。
  • y表示图形在y方向上移动的距离，默认单位是px。当y为正时，图形向y轴正方向移动；当y为负时，图形向y轴反方向移动。
  • 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

• rotate()

  • 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  • 值 rotate(30deg) 把元素顺时针旋转 30 度。

• scale()

  • 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
  • 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

过渡

• transition：
  transition-property 属性
  transition-duration 时长
  transition-timing-function 动画曲线
  transition-delay；延迟
• 比如：transition: width 2s linear 1s;

3D转换

• rotateX()

  • transform: rotateX(45deg)
    – 沿着 x 轴正方向旋转 45 度7by7

• rotateY()

  • transform: rotateY(45deg)
    – 沿着 y 轴正方向旋转 45 度

• rotateZ()

  • transform: rotateZ(45deg)
    – 沿着 z 轴正方向旋转 45 度

背景色渐变

background-image:linear-gradient

• (0deg, blue, red);
  从下到上，蓝色渐变到红色
• (45deg, blue, red)
  从左下到右上
• (to left top, blue, red)
  从右下到左上、从蓝色渐变到红色
• (to left top,red 30%,yellow 70%)
  从右下到左上，红色占30%，黄色占70%