行间容器html,Html及CSS知识点概括
html4.0
web 标准
结构(html),行为(js),表现(css)
html概念
超文本标记语言
h5文档声明及其作用
告知浏览器使用哪种html或xhtml规范
html元素
块元素
h1-h6,p,div,ul,ol,li,dl,dt,dd,form,table,tr,td,th,hr,fieldset
内联元素
a,span,strong,b,em,i,label
超链接如何在新窗口打开 target="_blank"
内联块元素
img,input,textarea,select
alt和title的区别
相对路径的三种写法
可变元素
表格(作用：显示数据)
表格相关html元素
table,tr,td,th,caption
表格行分组：thead,tbody,tfoot
表格相关html属性
合并行：rowspan 合并列：colspan
水平对齐 ：align="left|center|right"
垂直对齐：valign="top|middle|bottom"
表格重要css属性
合并相邻单元格边框 border-collapse:collapse;
表单(作用：搜集用户信息)
表单元素
文本框，密码框，提交按钮，单选按钮，复选按钮
下拉列表(select)，文本域(textarea)
表单重要html属性
checked 选中状态单选或复选
disabled 禁用状态的表单元素
placeholder 添加默认提示信息
required 必填项，不能为空
autofocus 自动聚焦
如何取消h5表单验证
novalidate
h5新增表单type属性值
type="email"
type="url"
type="range"
type="number"
表单字段集及表单字段集标题
fieldset,legend
表单的组成：表单域，表单控件，提示信息(label)
div的作用：主要用来划分板块
iframe如何去掉或隐藏滚动条： scrolling="no"
css
css语法及其特点
层叠样式表
实现了结构与表现相分离
css样式表的创建
内联样式(行内，行间样式)
内部样式(嵌入式样式)
外部样式
使用link引入
使用@import
link和@import引入外部样式的区别
老祖宗区别
加载顺序不同
浏览器支持性不同
对js改变dom不同
样式表的优先级
!important>内联>内部>外部
css2.0选择器
id选择器
#box{color:red;}
class选择器
.box{color:blue;}
元素选择符(类型选择符，标签选择器)
a{text-decoration:none;}
后代选择器
.box a{font-size:12px;}
群组选择器
ul,ol{list-style:none;}
通配符
*{margin:0; padding:0;}
伪类选择器
a:hover
滑过父元素，控制子元素的变化
css选择器权重
内联：1000 id:100 class,伪类，属性： 10 标签选择器，伪元素：1
css层叠的含义
!important>内联>内部>外部
id>class>标签
权重相同时取后面定义的样式
css核心属性
字体类属性
字体类型 font-family:"微软雅黑",Arial;
字体大小 font-size:16px|1em|medium;
字体加粗 font-weight:normal|bold|bolder|100-900;
字体颜色 color:#000|rgb(0,0,0)|black;
文本类属性
水平对齐方式
text-align:left|center|right|justify;
行高
line-height (行高不允许设置负值)
文本修饰
text-decoration:none|underline|line-through|overline;
首行缩进
text-indent 设置为较大负值时会有隐藏效果
垂直对齐方式
vertical-align:baseline|top|middle|bottom;
背景类属性
背景色
background-color
背景图
background-image:url(1.jpg);
背景平铺属性
background-repeat:no-repeat|repeat|repeat-x|repeat-y;
背景图位置
background-position:left|center|right|数值 top|center|right|数值;
背景简写属性
background:#f00 url(1.jpg) repeat-x left bottom;
背景图尺寸
background-size:数值|百分比|cover|contain;
浮动属性
float:none|left|right;
clear:none|left|right|both;
css盒模型
content
width
height
padding
背景可以延伸到padding区域
当需要调整子元素在父元素中位置关系时，给父元素设置padding
padding不允许设置负值
border
border:3px solid|dashed|dotted|double red;
使用border属性实现三角效果
背景可以延伸到border区域，当设置为实线时，会遮挡背景
margin
背景不能延伸到margin区域
margin可以设置负值
当需要调整元素之间的位置关系时，给本元素设置margin
标准盒模型和怪异盒模型的区别和转换
box-sizing:border-box; 标准转为怪异
box-sizing:content-box; 怪异转为标准
标准盒模型
总宽度
width+左右padding+左右border+左右margin
总高度
height+上下padding+上下border+上下margin
怪异盒模型
总宽度
width+左右margin
总高度
height+上下margin
元素类型转换
display
block
inline
inline-block
img,input
none
元素隐藏不可见的两种方式
display:none;
visibility:hidden;
list-item
table
不定宽块元素水平居中
table-cell
不定宽高的子元素在父元素中水平垂直都居中
flex
弹性盒
定位(层模型)position
默认值： static
绝对定位： absolute
具有定位属性的父包含块
相对定位：relative
元素偏移前的位置
固定定位： fixed
浏览器窗口
相对定位和绝对定位的区别
透明度 opacity:0-1; 如何兼容IE6 filter:alpha(opacity=0-100);
定位层叠属性 z-index
锚点链接
目标伪类选择器
溢出
容器溢出
overflow:hidden|scroll|auto|visible;
文本溢出
单行文本省略号设置(四个条件缺一不可)
宽高自适应
宽度自适应
通栏效果
高度自适应
最小高度 min-height 如何IE6
高度塌陷问题解决方案及其优缺点
伪元素
:before
:after
居中
文本，图片等行内元素水平居中
父元素{text-align:center;}
定宽块元素水平居中
左右margin为auto
不定宽高的元素在屏幕窗口水平垂直都居中
固定定位 position:fixed; left:0; top:0; right:0; bottom:0; margin:auto;
html,body{height:100%;} body{display:flex; justify-content:center; align-items:center;}
position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
不定宽高的子元素在父元素中水平垂直都居中
相对定位结合绝对定位
父元素{display:table-cell; text-align:center; vertical-align:middle;}
弹性盒
css3变形
图片整合的概念及优势
css3圆角
border-radius:50%;
常见兼容性问题
双倍浮动bug
display:inline;
表单元素行高不一致
float:left; 或 vertical-align:middle;
图片默认有空隙
display:block;或float:left;
图片添加超链接有边框
border:0;
IE6下不识别高度小于10px的容器
overflow:hidden;
鼠标指针bug
cursor:pointer;
opacity低版本IE浏览器不识别
filter:alpha(opacity=30)
min-height属性IE6不识别
_height:100px;
css hack(过滤器)
下划线属性过滤器
_height:100px;
!important关键词过滤器
height:100px!important;
五大浏览器内核及其代表作品
IE内核
Trident
Mozilla Firefox
Gecko
Safari,Chrome
Webkit
Opera
Presto
联合开发
Blink
seo优化
站内优化
页面主体优化(给网站添加标题)
页面头部优化(添加关键词和描述)
添加网站导航或网站地图
添加友情链接
图片添加alt和title
尽量避免使用flash或图片热点链接，给a添加title属性
站外优化
网站品牌建设，百度推广，网站流量分析
h5新标签
结构性标签
header,footer,nav,section,article,aside,hgroup,figure,figcaption,dialog
其他h5标签
mark,meter,progress
音频
audio 支持的音频格式：mp3,ogg,wav
视频
video 支持的视频格式：mp4,ogg,webm
css3选择器
基本选择器
id,class,*,群组，元素
层次选择器
E F 后代选择器
E > F 子选择器
E + F 相邻兄弟选择器
E～F 通用兄弟选择器
伪类选择器
结构性伪类选择器
:first-child :last-child :nth-child(n)
:first-of-type :last-of-type :nth-of-type(n)
目标伪类选择器
E:target E是指锚点链接连接到那个元素
UI状态伪类选择器(form表单元素)
E:checked 匹配选中状态的单选或复选按钮
E:enabled 匹配启用状态的表单元素
E:disabled 匹配禁用状态的表单元素
属性选择器
li[class="box"]
a[href^="http"]
a[href$="com"]
渐进增强和优雅降级
css3属性针对不同浏览器内核兼容写法
-webkit-
-moz-
弹性布局
flex容器属性
改变主轴方向
flex-direction:row|column;
flex项目换行
flex-wrap:wrap;
主轴对齐方式
justify-content:flex-start|flex-end|center|space-between|space-around;
交叉轴对齐方式
align-items:flex-start|flex-end|center;
flex项目属性
改变某个flex项目的交叉轴对齐方式
align-self:flex-start|flex-end|center;
flex项目不等比例缩小
flex-shrink:0;
flex:1;应用
等比例分配空间
分配剩余空间给某个flex项目
响应式布局
概念
使用一套css样式适配多个终端设备，响应窗口的变化，布局发生变化
核心原理
媒体查询
@media screen and (min-width:640px) and (max-width:960px){body{background:blue;}}
移动端布局
移动端相关概念
屏幕尺寸，屏幕分辨率，ppi(像素密度)，DPR(物理像素与逻辑像素的比值)
移动端常见布局方案及其特点
百分比布局(流式布局)
文字流式，控件弹性，图片等比缩放
等比例缩放布局(rem布局)
混合布局
移动端相关单位
px,em,rem,vw
圣杯布局
顶部和底部固定，剩余空间分配给中间部分，设置flex为1
css3变形基础
四种变形
transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
使用位移实现居中
改变变形元素中心点位置
transform-origin
改变变形元素的类型
transform-style:preserve-3d;
css3动画
transition动画
transition:all 1s;
animation动画
定义动画关键帧
@keyframes hello{0%{ } 100%{
}}
animation:hello 5s linear infinite paused;
transition和animation的区别
文本阴影和盒阴影
文本阴影 text-shadow:0 5px 5px red;
盒阴影 box-shadow:inset 5px -5px 5px gray;
BFC
概念——块级格式化上下文
如何触发BFC
float除none以外的值
overflow除visible以外的值(hidden，auto，scroll)
display为table-cell,inline-block,table-caption
position：absolute|fixed;
BFC的作用
解决上下margin重叠问题
解决高度塌陷问题
实现多栏布局效果