前端开发语言-html-Web
2020-03-09 13:48:38 0 举报AI智能生成
html
作者其他创作
大纲/内容
html
转义字符
  空格
&le <=
<
<
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（行）
th
td
colspan
横跨两列
rowspan
横跨两行
cellpadding
内边距 文字与边框
cellspacing
两个单元格之间间距
boder（边框）
常用元素
a（链接href）
text-decoration:none
去除下方横线
target(在何处打开链接)
_self（当前页面）
_search(新页面)
_blank
_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
#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
效果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相反
row-reverse：与row相反
column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴
column-reverse：与column相反
2.flex-wrap
用于指定Flex子项是否换行
用于指定Flex子项是否换行
nowrap：默认值，表示不换行，Flex子项可能会溢出
wrap：表示换行，溢出的Flex子项会被放到下一行
wrap-reverse：表示反方向换行
wrap：表示换行，溢出的Flex子项会被放到下一行
wrap-reverse：表示反方向换行
换行以后两行之间产生了很大的间距，这个问题，
在 align-content 属性中可以得到很好的解决.
在 align-content 属性中可以得到很好的解决.
4.justify-content
指定水平方向上Flex子项的对齐方式
指定水平方向上Flex子项的对齐方式
flex-start：默认值，表示与行的起始位置对齐
flex-end：表示与行的结束位置对齐
center：表示与行中间对其
space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start
space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center
flex-end：表示与行的结束位置对齐
center：表示与行中间对其
space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start
space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center
5.align-items
指定垂直方向上Flex子项的对齐方式
指定垂直方向上Flex子项的对齐方式
flex-start：表示与侧轴开始位置对齐
flex-end：表示与侧轴的结束位置对齐
center：表示与侧轴中间对齐
flex-end：表示与侧轴的结束位置对齐
center：表示与侧轴中间对齐
6.align-content
只作用于多行的情况下，用于多行的对齐方式
只作用于多行的情况下，用于多行的对齐方式
stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
center：表示各行与侧轴中间对齐
再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。
flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
center：表示各行与侧轴中间对齐
再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。
Flex子属性 order(元素顺序)
order值越小越靠前
0 条评论
下一页
