一阶段html&css简答
1.引入CSS的目的
1).弥补html语言的不足
2).缩减页面代码，提高访问速度;
3).代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好
4).结构清晰，有利于seo优化
5).有利于搜索引擎优化
6).缩短改版时间
7).对网站的重构有很好的支持
2.精灵图/雪碧图
主要结合属性：background-position
优点：
（1）减少浏览器的请求次数
（2）减少图片大小
3.margin的传递
解决方法
(1) 用padding替代
(2) 给外层元素加一个边框
(3) 给该元素或者父元素加浮动
(4) 给父元素加overflow:hidden(溢出隐藏)
4.不同元素类型的居中
margin: auto; 对有宽度的块级元素设置居中对齐
text-align: center; 为了让内联元素或内联块元素居中，给父元素设置text-align: center;，相当于内联元素是其块级父元素的文本内容
5.全屏页面
给该元素设置heigt:100%;width:100%;
给body和html都设置height:100%; body,html{height: 100%;}
6.单行文本溢出显示省略号
1). 设置不换行 white-space:nowrap
2). 设置溢出隐藏 overflow:hidden
3). 设置文本溢出显示省略号 text-overflow: ellipsis;
7.高度塌陷
条件(1) 父元素不设置高度 (2) 给子元素设置浮动
解决
1). 给父元素设置 overflow:hidden;
弊端: 如果父元素外面有其他元素,设置完后,会被隐藏掉
2). (1) 在浮动元素的后面添加一个块级元素 (2) 给该块级元素设置 clear:left/right/both; 清除浮动
(1)只对块级元素才生效 (2)清除前面浮动元素带给后面正常元素的一个影响
弊端: 页面中会出现很多空的div,造成代码冗余(多余)
3). 完美清除法(通过伪元素的方式)
高度塌陷的元素::after{
content: "嘿嘿";
clear: both; 清除浮动元素带来的影响
display: block; clear只对块生效
height: 0; 如果不小心在content写了内容的特殊处理
overflow: hidden; 超出高度为0的部分直接隐藏
visibility:hidden; 溢不出溢出都隐藏
}
8.表格跨行跨列
9.属性继承
可以继承 ：
字体类：font-size/font-weight/font-style/font-family
文本类: color/text-align/text-indent/line-height
列表类: list-style
不可以继承：
text-decoration
width/height/padding/margin/border/display
10.样式表
link和@import的区别
1). 加载顺序，对于link来说，结构和样式是同时加载，对于@import，先加载结构，再加载样式，如果网络差的情况下，
只显示显示结构，对用户体验不好
2). link来说除了可以引入css文件之外，还可以引入其他文件，@import来说只能引入css
(1)抠网页图标：在.com或者.cn后面输入 /favicon.ico 回车后图标出现，保存至本地，不要更改名字，因为一般网页
图标都叫favicon.ico的名字
(2) 通过link引入
rel: 值为icon 代表关联的是图标文件类型
type: 值images/x-icon 代表当前类型是图片类型
href: 值为图标的路径
3) .link可以支持所有的浏览器，@import低版本的ie不支持
4). js可以控制通过link引入进来元素的样式，但是不能控制@import引入进来的样式
11.定位实现元素水平垂直居中
子绝父相： 一般给绝对定位形成参考物的祖先元素，加相对定位给其形成，因为其他定位属性会脱离文档流，导致一些问题
1). 该元素设置position:absolute;
2). 该元素设置left:50%; 移动到参考物宽度中心的右侧,margin-left: -该元素宽度的一半;(这里不要使用百分数，因为百分数参考的是父元素)
3). 该元素设置top:50%; 移动到参考物高度中心的下侧,margin-top: -该元素高度的一半;(这里不要使用百分数，因为百分数参考的是父元素)
1). 给该元素设置绝对定位
2). 设置四个方向为0 left: 0;right: 0;top: 0;bottom: 0;
3). 该元素设置margin:auto; 水平垂直居中
元素{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);向左和向上拉取当前元素宽高的一半
}
弹性盒也可以
12.BFC: 块级格式化上下文，独立渲染的区域
触发条件
1. overflow:hidden/scroll/auto;
2. float: left/right；
3. position: absolute/fixed
4. display: inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
特性
- 在BFC的区域内，浮动元素的高度会计算在内--》 解决高度塌陷
- BFC的区域不会和浮动元素重叠--》解决浮动给后面元素带来的影响
- BFC区域内的元素不会影响到外面的元素 --》解决margin的重叠
13.浏览器前缀
浏览器的前缀
谷歌浏览器 -webkit-
欧鹏浏览器 -o-
火狐 -moz-
ie浏览器 -ms- ie10及上才支持c3属性
14.代码写三角形
- 宽度和高度都设置为0 width:0;height:0
- 四周的边框都设置透明 border:30px solid transparent;
- 留下对方向的边框，设置具体的边框颜色
15.盒模型
- 标准盒模型(w3c盒模型)：
box-sizing:content-box;
总宽 = 内容区width+padding左右+border左右+margin左右
- 怪异盒模型(ie盒模型)：
box-sizing:border-box;
总宽 = width+margin左右
ie低版本缺失文档声明,也会触发怪异盒模型
16.盒子阴影顺序不能变
box-shadow:阴影水平偏移 阴影垂直偏移 阴影模糊程度 阴影大小(可选) 阴影颜色 阴影位置(可选，在里面就是inset)
17.背景图大小 background-size:宽度 高度;
值
数值px
数值%(可能会使背景图拉变形)
关键字cover:背景图不断拉伸，直到充满整个盒子才停止拉伸，所以可能会导致背景图被裁切，但是不会变形
contain:背景图不断拉伸，直到碰到盒子边缘，才停止拉伸，可能会导致盒子出现留白的情况，背景图不会变形
18.变形位移占位置
transform: translate(x位移,y位移) 只写一个值代表x轴位移
transform: translate3d(x,y,z)
实现元素的水平垂直的居中：
优点：
- 子元素宽高改变可以自适应变化
- 子元素不设置宽高也可以拿到宽高的一半
元素{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);向左和向上拉取当前元素宽高的一半
}
transform:scale(x,y) 一个值代表x和y的缩放
3d里面没有倾斜
19.H5新增标签
ie8以上才支持
头部 header
文章 article
导航 nav
板块 section
重要内容 main
侧边栏 aside
标题组 hgroup
时间 time ->内联元素
标记 mark ->内联元素
底部 footer
音频标签 audio
controls 显示控件
loop 循环
autoplay 自动播放 ie允许，谷歌禁止了
muted 静音
视频 video
controls 显示控件
loop 循环
autoplay 自动播放 ie允许，谷歌禁止了（设置静音可以自动播放）
muted 静音
poster 视频没播放之前显示在上面的图片
type="email" 限制用户必须输入email类型
type="url" 限制用户必须输入url类型
type="range" 产生一个滑动条表单
type="number" 数字
type="search" 产生一个搜索意义的表单
type="color" 生成一个颜色选择的表单
type="time" 限制用户必须输入时间类型
type="month" 限制用户必须输入月类型
type="week" 限制用户必须输入周类型
type="datetime-local " 选取本地时间
type="date"
required 必填
min 最小 在number类型用
max 最大 在number类型用
autocomplete 是否自动提示信息(显示输入的历史记录) 属性值 on off
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能有一个。
pattern 后面的属性值是一个正则表达式。 pattern="[A-z]"
novalidate 取消表单内的验证 加在form身上
multiple 选择（上传）多个 文件上传
20.媒体查询
@media 关键字
设备类型：all(所有设备)/screen(显示器、笔记本、移动端设备)
and 连接符 and两侧有空格
媒体特性 max-width/min-width
(1)px后面不要加封号
(2)多个媒体特性用and连接
21.透明度
rgba() a->opacity(0-1) 0: 隐藏 1:不透明 值越小越透明,只透明背景，不影响内容
opacity(0-1) 0: 隐藏 1:不透明 值越小越透明，元素背景和内容都会透明
专门针对ie的兼容写法：
filter: alpha(opacity=value); value的取值是 1-100 1相当于0 100相当于1 取值是整10的取 比如10 20
22.内联或者内联块之间的间距的解决
(1)将代码写同一行
(2)给该元素加浮动
(3)给元素加一个父元素，给父元素设置font-size:0;子元素设置正常的字体大小
23.浏览器内核(渲染机制)
ie浏览器 -> Trident
火狐浏览器Mozilla-> Gecko
苹果 & 谷歌旧版本 -> webkit
谷歌新版 & 欧鹏 -> Blink
24.网页头部优化
(1)定义网页标题
(2)定义网页关键字
(3)定义网页描述内容
(4)定义网页的作者
25.解决图片自带底部留白
- img
- img
- img
- 给图片的父元素设置font-size:0;
浙公网安备 33010602011771号