

首页  思维导图  详情



CSS 思维导图

2018-09-13 20:52:26   6  举报





AI智能生成

CSS思维导图

模版推荐

作者其他创作

大纲/内容

box-sizing

设置Border的边框的宽度加载哪里

尺寸属性

长

height

宽

width

最小宽

min-width

最大宽

max-width

最大长

max-height

最小长

min-height

选择器

id选择器

class选择器

多选选择器

后代选择器

元素名选择器

子元素选择器

边框

border

边框颜色

border-color

边框样式

border-style

边框尺寸

Border-width

省略写法

border

用图片来作为边框

border-image-source

border-image-width

规定图片变宽的尺寸

添加圆角

border-radius

box-shadow

为边框添加阴影

三种写法

写在CSS里面.html中需要用link标签来引用

写在.html中的<style>标签中

写在正文标签的<style>属性之中

定位

相对定位

relative

绝对定位

absolute

fliexd

跟随屏幕随动

static

默认定位

定位时重叠堆叠

Z-index

轮廓

outline

伪类选择器

:link

链接未被访问时的状态

:visited

链接未被访问时的状态

:hover

当鼠标处于当前位置时的活动状态

:active

当鼠标点击时,目标的活动状态

:focus

获得焦点时的状态

：before

在每个 <p> 元素的内容之前插入内容.

：after

在每个<p>元素的内容之后插入内容

透明度

opacity

透明度（取值范围0-1）

列表

list-style-type

一般设置为没有前面none

list-style-img

列表图像尺寸

list-style-position

设置列表图像放置位置。

表格属性

table

border-collapse

规定是否合并表格边框

border-spacing

规定相邻单元格边框之间的距离

caption-side

规定表格标题的位置。

empty-cells

规定是否显示表格中的空单元格上的边框和背景

弹性布局

flex(设置为弹性布局)

弹性容器

flex-direction(设置弹性盒子主轴方向)

row(主轴水平方向从左向右)

column从上到下1字排列)

row-reverse(主轴水平方向从右向左)(即反转)

column-reverse(主轴垂直方向从下到上)(即反转)

flex-warp(设置换行的方式)

nowarp(不换行)

warp(正常换行)

wrap-reverse(换行第一排在下面)

flex-flow

diedirection 和warp的简写形式

简写先写dir在写warp

justify-conetent

水平对齐方式

flex-start

左对齐

flex-end

右对齐

center

居中对齐

space-bettwen

两端对齐

space-around

均匀分布(有间距子元素间的间距是边距的两倍)

align-items

交叉轴对齐方式

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

baseline

项目的第一行文字的基线对齐

stretch

如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

多线轴对齐方式

flex-start

与交叉轴的起点对齐

与交叉轴的终点对齐

center

与交叉轴的中点对齐

space-between

与交叉轴两端对齐，轴线之间的间隔平均分布

space-around

每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

stretch

轴线占满整个交叉轴

子元素设置

order <br>

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis

性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

语法

优先级

1.通过同一种选择器来选择，后面覆盖前面

2.同种写法中id选择器>class选择器>标签选择器 <br>

3.三种写法的优先级

框模型

块级元素

block

内联元素

inline

行内块元素

inline-block

行内块元素添加掉落属于Bug 用浮动来代替 CSS3中有弹性设置

背景

背景平铺

background-repeat

背景尺寸

background-size

背景颜色

background-color

背景图片

background-image

简写形式

background

背景图像开始的地方

内边距

padding

外边距

margin

浮动

float

浮动到父元素最上方

元素浮动后不再占有父元素的高度

注意浮动方向

卡住问题

清除浮动

clear

清除浮动清除周围元素浮动带来的影响 <br>

box属性(溢出处理)

overflow

overflow-x

内容溢出对内容的上下进行处理

overflow-style

内容溢出选择处理方式

overflow-y

内容溢出对内容的上下进行处理

字体系列

font

font-style

规定文本样式

font-width

规定文本字体宽度

font-family

规定文本字体

font-size

文本字体大小

定位

定义光标类型

cursor

规定元素应该生成的框的类型

display

文本属性

color

设置文本颜色

direction

设置文本书写方向

letter-spacing

设置文本中字符的间距

line-height

设置行高

text-align

规定文本的对齐方式

text-decoration

规定添加到文本的修饰效果

text-indent

规定文本块的首行缩进

text-shadow

添加文本的阴影

text-transfrom

控制文本的大小写

white-space

处理元素内的空白

word-spacing

设置单词间的间距

text-overflow

设置文本溢出

 Collect

Get Started

医共体思维导图

 Collect

Get Started

《秘密》（吸引力法则）超详细思维导图孟大侠营销

 Collect

Get Started

人工智能概论-思维导图

 Collect

Get Started

眼镜思维导图





0 条评论

下一页