1、行标签:span 、i 、b、strong、em、font
2、块标签:div、p、h1~h6、有序列表、无序列表、定义列表、form
3、行内块:input、button、select、img
4、display属性拓展 -- 元素之间的转换
1、display:block
2、display:inline-blcok
3、display:inline
5、元素转换为有或者无
1、display:none
2、display:block
6、特殊标签:br、hr、 、@gt;、@lt;
7、添加css的3种方式
style行内样式
link外部引入
内联样式
8、css基础选择器有哪些?
id选择器、class类名选择器、标签选择器、通配选择器*
9、css高级选择器有哪些
父子选择器
后代选择器
相邻选择器
并集选择器
交集选择器
伪类选择器
属性选择器
10、a标签的伪类选择器4个
a:hover
a:link
a:active
a:visited
11、文字样式font系列
font-family 设置字体类型
font-size 设置字体大小,格式为数字+px
font-style 设置字体风格,该属性设置使用斜体、倾斜或正常字体。normal(默认值,显示标准字体样式)、italic(斜体)和oblique
font-weight 设置字体的粗细,bold(加粗)、normal(默认,不加粗)
12、文本样式text系列
color 设置文本颜色,值可以是颜色的英文单词,也可是十六进制的颜色值。 color:#00C;
text-align 设置元素水平对齐方式,left(默认)、right(右对齐)、center(居中对齐) text-align:right;
text-indent 设置首行文本的缩进,数字+px text-indent:20px;
line-height 设置文本的行高,数字+px line-height:25px;
text-decoration 设置文本的装饰,值none(默认标准文本)、underline(文本下的一条线)、overline(文本上的一条线)、line-through说明(从文本中间穿过的一条线) text- decoration:underline;
13、背景属性--添加背景的三种颜色值
rgb(0,0,0)、rgba(0,0,0,1)
#十六进制颜色值
英文颜色单词
14、背景图片
background:url('图片地址') 与左边框的距离 与上边框的距离 no-wrap(不平铺);
background-size:width height/contain/cover
15、伪类选择器和伪元素选择器之间的区别
::是伪元素选择器,:是伪类选择器
16、伪类选择器有哪些?
:before/:after/:hover/:nth-child(n)/:first-child/:last-child/:first-type-of/:last-type-of
16、定义列表、有序列表、无序列表
dl/dd/dt/ol/ul/li
17、清空列表默认样式的方法
ul,ol,li{
list-style:none;
margin:0;
padding:0;
}
18、list-style的属性值有哪些?
list-style:none; - 无
disc -实心圆
circle-空心圆
square - 实心方块
decimal - 序号
19、form表单标签有哪些?
input select-option texarea button
20、input输入框的type类型有哪些?
text/number/password/file.
type="email" 限制用户输入的内容必须是Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须是月份类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户必须输入数字类型 其配合的属性有max(最大值),min(最小值)
type="tel" 限制用户必须输入电话号码类型
type="search" 搜索框
type="color" 生成一个颜色输入框
type="range " 生成一个滚动条的输入框
21、form表单元素有哪些属性?
name="user" 输入框命名
value="默认值" 输入框设置默认值
required="required" 必填项
placeholder="文本提示语" 输入框文本提示语
autofocus= "autofocus" 自动获取焦点
hidden 设置隐藏输入框
22、盒模型的组成
盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)
23、边框样式
border:边框宽度 边框样式 边框颜色
24、ie盒模型和怪异盒模型的区别
1、box-sizing 属性值不同
2、width的属性值相当于什么
3、视图宽高相当于什么
在标准盒模型的情况下,盒子总宽高的值为“width/height(内容宽度)+padding(内边距)+border(边框)+margin(外边距)”,其中内容宽高为content部分的width/height。
在怪异盒模型的情况下,盒子的总宽高的值为“width/height(内容宽度)+margin(外边距)”,其中内容宽高为content部分的width/height+padding(内边距)+border(边框)。
25、设置块元素水平居中的方式
margin:0 auto;
26、改变元素位置的传统方式有哪些?
内外边距、diplay转换元素特点、 浮动、定位
27、浮动的属性值
left/right
28、清除浮动的方式
/* 清除浮动方式一:在浮动元素的父级添加overflow: hidden; */
/* 清除浮动方式二:在浮动元素后添加空的div元素 */
clear{
clear: both;
}
/* 清除浮动方式三:在浮动元素父级添加clearfix类名 */
.clearfix::after{
display: block;
content: '';
clear: both;
}
29、定位的属性及属性值
静态定位:static --- 默认属性
相对定位:relative
绝对定位:absolute
固定定位:fixed
30、定位元素的层级显示
z-index:0(默认值);只作用于定位元素。值越大层级越高
31、相对定位的元素相对于谁发生位移
/* 相对定位:相对于自身原有的位置发生偏移 */
32、绝对定位元素相对于谁发生位移
/* 绝对定位:相对于父级有定位属性的元素发生位移(除static之外),如果父级没有定位属性,就相对于浏览器边框body发生位移 */
33、固定定位元素相对于谁发生位移
/* 固定定位:相对于浏览器发生位移 */
34、常用的浏览器种类:4个
谷歌(Google)、火狐(firfox)、safir(苹果)、IE
35、html5的容器标签有哪些
header:头部标签
nav:导航标签
article:内容标签
section:定义文档某个区域(可以通俗的理解为大号的div)
aside:侧边栏标签
footer:底部版权标签
36、过渡的单词及前四个值
transition:需要过渡的属性 过渡持续的时间 运动曲线 等待过渡的时间
37、平移、旋转、缩放
transform:translate(300px) scale(2) rotate(90deg)
38、img属性选择器的写法
img[src]{} / img[title] /img[alt]
39、动画的属性及属性值
/* 动画:动画名称 动画执行时长 动画执行执行状态 延迟执行 重复执行动画的次数 动画执行方向 结束动画的状态*/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
40、将元素设置为弹性盒子的语法
display:flex;
41、设置弹性盒子子元素的水平对齐方式
justify-content:space-around;
space-between;
space-evenly
center
flex-start
flex-end
42、设置弹性盒子子元素垂直方向对齐方式
align-item:center
space-around;
space-between;
space-evenly
flex-start
flex-end
align-content:center
space-around;
space-between;
space-evenly
flex-start
flex-end
43、设置弹性盒子子元素换行
flex-wrap:wrap;
flex-wrap:no-wrap;
44、设置元素横向排列和纵向排列
flex-direction:column; --- 纵向排列
row;---默认值,横向排列
row-reverse --- 反向横向排列
45、让元素box水平垂直居中的方式
.box{
position:absolute;
top:0;
left:0;
right:0;
buttom:0;
margin: auto;
}
.boxFather{
display:flex;
justify-content:center;
align-items:center;
}
46、!DOCTYPE的作用
<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。