

首页  思维导图  详情



css

2022-05-03 14:53:46   0  举报





AI智能生成

CSS初中高知识点梳理，一直更新

前端技术

学习笔记

前端基础总结

CSS

模版推荐

作者其他创作

大纲/内容

背景

background-attachment固定

scroll

fixed

local

background-size 属性

length

percentage

cover

contain

background-origin 属性

padding-box

border-box

content-box

background-position

left top left center left bottom right top right center right bottom center top center center center bottom

x% y%

background-color

color

transparent

background-repeat

repeat

repeat-x

repeat-y

no-repeat

background-image

background-image: url(flower.gif), url(paper.gif)

文本格式

line-height

text-align

left

right

center

justify

text-decoration

none

text-indent

length

text-shadow

h-shadow

v-shadow

blur

color

vertical-align

列表

无序列表 ul

有序列表 ol

边框border

border-style

border-width

border-color

单独边 

border-radius

内边距

padding

padding-top

padding-right

padding-bottom

padding-left

盒模型

标准

怪异

display

none

inline

定位

relative

absolute

static

fixed

z-index

inline-block

组合器

后代选择器 (空格)

子选择器 (>)

相邻兄弟选择器 (+)

通用兄弟选择器 (~)

导航栏

水平

垂直

特异性

渐变

background-image

linear-gradient

radial-gradient

文本效果

text-overflow

word-wrap

word-break

writing-mode

动画

@keyframes

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

animation

过渡

transition-delay

transition-duration

transition-property

transition-timing-function

cursor: pointer;

用户界面

resize

resize: horizontal;

resize: vertical;

resize: both;

textarea {   resize: none; }

outline-offset

媒体查询

CSS3 媒体类型

all

screen

speech

响应式设计

图片

使用 width 属性

使用 max-width 属性

背景图像

background-size

contain

background-size：100% 100%

background-size: cover;

为不同设备准备不同图像

视频

width

max-width

在实例网页中添加视频

选择器

简单选择器

属性选择器

伪类选择器

伪元素选择器

组合选择器

字体

font-family

如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"

多个字体系列是用一个逗号分隔指明：

案例：p{font-family:"Times New Roman", Times, serif;}

font-size

字体大小的值可以是绝对或相对的大小

绝对大小

相对大小：

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素

font-style

font-weight

定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。

链接

a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面

a:link

a:visited

a:hover

a:active

列表table

border

text-align

border-collapse

vertical-align

padding

border-spacing

caption-side

border-collapse

响应式表格

外边距

margin

auto

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

有父子关系的两个元素，同时使用margin-top或其他会出现塌陷情况，可以给父元素添加一个overflow:hidden

高度与宽度

witdh

max-width

min-witdh

height

max-height

min-height

轮廓

outline

outline-style

outline-width

outline-color

outline-offset

溢出

overflow

visible

hidden

scroll

auto

浮动

left

right

none

clear

对齐

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;

居中对齐文本

居中对齐图像

左和右对齐

position: absolute;

float

垂直对齐

padding

line-height

使用 position 和 transform

Flexbox

不透明度

opacity

精灵图

圆角 border-radius

四个值

三个值

两个值

一个值

阴影

text-shadow

box-shadow

2D转换

translate

rotate

transfrom-origin

scale

3D转换

translate3d(x,y,z)

perspective

rotate3d

transform-style

object-fit

cover

contain

scale-down

none

fill

多列

column-count

column-gap

column-rule-style

column-rule-width

column-rule-color

column-rule

column-span

column-width

变量

var() 函数的语法

局部变量

flex

display: flex;

flex-direction

column

column-reverse

row

row-reverse

flex-wrap

wrap;

nowrap

wrap-reverse

justify-content

center

flex-start

flex-end

space-around

space-between

align-items

center

flex-start

flex-end

stretch

baseline

align-content

space-between

space-around

stretch

center

flex-start

flex-end

flex子元素

order

flex-grow

flex-shrink

flex-basis

align-self

 Collect

Get Started

CSS

 Collect

Get Started

CSS

 Collect

Get Started

CSS

 Collect

Get Started

CSS





0 条评论

下一页