html复习

1.px 就是一个基本的单位 像素
2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字(案例01.html),如果父级没有就继承上一个父级直到body,如果body没有就默认为16px。
3.rem 也是一个单位,只跟根节点<html>的字体大小有关(案例02.html) 默认值16px。
line-height 行高 line-height:2;行高值 是当前数字2乘以元素字体大小(案例02.html)
二、浏览器
浏览器和浏览器之间是有差距的,这个差距是由浏览器自身内核决定的
每个浏览器都有自己的前缀,主要解决css3中的兼容问题。
Chrome(谷歌)的前缀-webkit Firefox(火狐)的前缀-moz-
le的前缀-ms- Opera(欧朋)-o-
国内的浏览器的内后都是谷歌。
三、布局
1.流式布局 float+margin
2.定位
3.双飞翼
4.圣杯
5.弹性盒子布局 移动端布局
全称叫弹性盒模型:是由父级的弹性容器和子级的弹性子元素两者结构,
display:flex;这个属性决定谁是弹性容器,它里面的子元素就是弹性子元素(案例03.html)
flex 是弹性子元素在弹性容器中所占的份数,属性值是数字
6.表格布局(04.html)
7.box-sizing 这个属性 让元素的实际宽度就等于设置的width 即便有了padding和border 只会向内挤压,元素的可利用空间变小。(05.html)

下拉列表(案例01html)

改变元素的性质的三种方式:position display float
行级元素和行级块元素的margin的上下不起作用了,左右还行
占位:针对标准流来说
元素添加float position 元素不会占位(脱离标准流)

浏览器的差距
浏览器默认字体是16px,谷歌最小字体是12px,其它的都是10px
ie ie7 ie8
hack
hack是针对不同的浏览器去写不同的html,css样式,从而让各浏览器能达到一直的渲染效果
hack两种写法
html的hack:写在html标签中
css的hack:写在css的样式中
&it < &ite<= &gt> &gte>=
css hack
(1)选择器hack 特殊符号写在选择器上
(2)值hack 特殊号写在 属性前面
值 hack
le6 专用符号是-和_短横和下划线
le6和le7 同时专有的的hack 属性前面加!和 + 等
le8专有的hack属性值后分号前加\0/
ie 6 7 8 9 10同时专有的是 属性值后号后面加\9
选择器
渲染: 渲染是浏览器的一种能力,将图片文字,样式等展现出来
向下兼容:新属性值在高版本浏览器出,向低版本处理的方法

posted @ 2018-10-15 10:15  wed初学者  阅读(184)  评论(0编辑  收藏  举报