首页  思维导图  详情

前端开发语言-html-Web

2020-03-09 13:48:38   0  举报





AI智能生成

html

css

前端开发

作者其他创作

大纲/内容

html

转义字符

&nbsp  空格

&le  <=

&lt

List

ul（无序列表）

list-style:none

去黑点

width、height

text-align：center

文字水平居中

font-size

文字大小

line-height

文字垂直居中

transition

过度效果

float:left

浮动

hover（伪类）

color

。字体颜色

background-color

背景颜色

cursor:pointer

鼠标形状

ol（有序列表）

table

tr（行）

colspan

横跨两列

rowspan

横跨两行

cellpadding

内边距  文字与边框

cellspacing

两个单元格之间间距

boder（边框）

常用元素

a（链接href）

text-decoration:none

去除下方横线

target(在何处打开链接)

_self（当前页面）

_search(新页面) _blank

伪类

link

未点击

visited

点击过

hover

鼠标放置

p（段落）

br（换行）

h1~h6（标题）

<h1 align="center"> 文本居中

b（定义粗体）

sup（上标文字）sub（下标）

alt（为图像显示替换文本）

dotted

实线

两部件之间有间隔

font-size: 0px;

link rel="stylesheet"（引入外文件）

overflow: hidden

隐藏溢出内容

text-indent: 15px;

文本缩进15

注：登陆框里前面的图片

表单

css

css选择器

tag（标签）

class

.class{}

#id{}

后代

#secul li{}

组合

nth

tr：nth-child9（）{}

文字

font_size

文字大小

color

font-weight

字体粗细

text-shadow

字体阴影

1px  1px  10px  color

font-family

字体格式

text-align：center

文本对齐方式

大小写转换

text-transform: uppercase/大写  lowercase/小写

颜色

rgb

rgba

#xxyyzz

color-name

渐变色

backgroud-image

radial-gradient

linear-gradient

圆角

boder-radius

box-shadow

0   0   10   color  inset

向里的阴影

盒子模型

尺寸

margin-left/maegin-right 左右间距

margin-top

border

1px    solid   black

*padding-left

盒子会加宽

display

display：block

display：inline

display：inline-block

图片

居中

paading-top/left

table中

img居中

align=middle

背景图片填充

background-size：cover

背景图片位置

background-position: right

右对齐

alt

提示信息（如：图片加载失败）

margin-top：3%

距顶部3%

text-align: right;

图片向右对齐

定位

相对定位

relative

保留原位置

固定值

fixed

与绝对差别不大

绝对定位

absolute

不保留原位置

z-index

元素的堆叠顺序

vertical-align

设置元素垂直对齐方式

浮动

opacity: 0.2;

透明度

float

图文环绕

外大里小

clear: both;

清除浮动

高度塌陷

当两个div浮动后， 清除浮动然后 第三个就认为那两个没有浮动

圆角工具

transform: rotate(180deg);

旋转

border-radius

设置圆角

转换

超出部分隐藏

overflow: hidden;

转动角度

transform: rotate(45deg);

默认Z轴

rotatex

x轴

rotatey

y轴

转换属性

transition: all 1s;

transition: all 2s ease-in-out 2s;

全部转换 效果2s完成 原路返回 停顿2s

动画

@keyframes name

0% ——100%

必须绑定到某个元素上

animation：name 5s

anmation-name

animation-duration

动画时间

animation-delay

延迟时间

animation-iteration-cuount：infinite

显示次数（循环显示）

anmation-direction：alternate

按原路返回

有路径时需要定位

position：relative

Flax弹性盒子

flex布局

dispaly：flex

弹性伸缩盒，块级

dispaly：inline-flex

行内元素

flex属性

1.flex-direction 确定排列方式

用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置

row：默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴 row-reverse：与row相反 column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴 column-reverse：与column相反

2.flex-wrap 用于指定Flex子项是否换行

nowrap：默认值，表示不换行，Flex子项可能会溢出 wrap：表示换行，溢出的Flex子项会被放到下一行 wrap-reverse：表示反方向换行

换行以后两行之间产生了很大的间距，这个问题， 在 align-content 属性中可以得到很好的解决.

4.justify-content 指定水平方向上Flex子项的对齐方式

flex-start：默认值，表示与行的起始位置对齐 flex-end：表示与行的结束位置对齐 center：表示与行中间对其 space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center

5.align-items 指定垂直方向上Flex子项的对齐方式

flex-start：表示与侧轴开始位置对齐 flex-end：表示与侧轴的结束位置对齐 center：表示与侧轴中间对齐

6.align-content 只作用于多行的情况下，用于多行的对齐方式

stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。 flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行 flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行 center：表示各行与侧轴中间对齐 再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。

Flex子属性 order(元素顺序)

order值越小越靠前