html-Web
2020-03-09 13:48:38 0 举报
AI智能生成
登录查看完整内容
为你推荐
查看更多
html
作者其他创作
大纲/内容
Web
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
伪类
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
font-weight
字体粗细
text-shadow
字体阴影
1px 1px 10px color
font-family
字体格式
文本对齐方式
大小写转换
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值越小越靠前
0 条评论
回复 删除
下一页