一、主流浏览器与其内核
浏览器 | 内核 |
---|---|
IE | trident |
Firefox | Gecko |
Google chrome | Webkit/blink |
Safari | webkit |
Opera | presto |
二、CSS权重
选择器 | 权重值 |
---|---|
!important | Infinity正无穷 |
行间样式 | 1000 |
id | 100 |
class/属性/伪类(:link :hover) | 10 |
标签/伪元素(::before ::after) | 1 |
通配符* | 0 |
三、复合属性
padding:两个值:上下,左右
三个值:上,左右,下
border: 1px solid #f00;
相当于:
border-width: 1px;
border-style: solid;
border-color: #f00;
background:#FFFFFF url(1.png) no-repeat center top;
相当于:
background-color:#FFFFFF;
background-image:url(1.png);
background-repeat:no-repeat;
background-position:center top
四、盒子模型
盒子三大组成部分:盒子壁 padding
内边距 border
盒子内容 width + height
注意:margin不能算盒子的宽高(谨慎计算题)
- 标准盒模型
总宽度=border(左右)+width+padding(左右)
总高度=border(上下)+height+padding(上下)- 怪异盒模型:box-sizing: border-box;
总宽度=width
总高度=height
五、选择器
1、简单选择器
id选择器:#号
class选择器:点号
元素选择器:
属性选择器:
2、复杂选择器
分组选择器:逗号,#a,b{…………} 一个id叫a和一个标签是b的样式,作用简化代码
后代选择器:空格,#a b{…………} 一个id叫a下面的一个标签是b的样式,也叫父子选择器,派生选择器,包含选择器
伪类选择器:冒号,#a:b{…………} 一个id叫a的伪类b,例如:a:hover或.className:link
伪元素选择器:双冒号,#a::b{…………} 例如:a::before或.className::after,可以当元素来使用,但是没有元素结构;默认是inline;必须设置content:"";
并列选择器:没有分割, #a.b{…………} 一个id叫a的下面的class叫b的样式
直接子元素选择器:大于号
相邻兄弟选择器:+号
六、display
行级元素/内联元素:inline,span/strong/input/i/a,特点:内容决定大小
不可以通过css改变宽高
块级元素:block,div/p/ul li/form/h1,特点:独占一行
可以通过css改变宽高
行级块元素:inline-block,img,特点:内容决定大小
可以通过css改变宽高
隐藏元素:none,不占据dom空间
块级表格:table-cell,前后没有换行符;table前后带有换行符
弹性盒模型:flex,IE10以上才兼容
总结:凡是带有inline的元素,都有文本类特性(换行中的img有边距)
七、position定位
absolute绝对定位:脱离原来位置进行定位
相对于最近的、有定位的父级进行定位,如果没有那么相对于文档进行定位
relative相对定位:保留原来位置进行定位,
相对于自己原来的位置进行定位
fixed固定定位:广告定位,鼠标滚动它不动
总结:一般relative作为参照物,absolute做定位
一般配合top、left/right来使用
八、float浮动
浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到他们
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
清除浮动流clear: both;
九、其它
1、解决margin塌陷问题,触发一个盒子的bfc
方法1、position: absolute;
方法2、display: inline-block;
方法3、float: left/right;
方法4、 overflow: hidden;
2、margin合并问题,不解决,在父元素里设置值=父+子
3、SEO搜索引擎
h1:标题,一个html只能出现一次,淘宝的logo
h2:副标题,主题市场
h3:板块标题,有好货/爱逛街
h4:
4、单行显示,溢出容器,打点展示,三件套
white-space: nowrap;/* 不换行*/
overflow: hidden;/* 溢出隐藏*/
text-overflow: ellipsis;/* 省略号*/
5、结构样式行为分离
结构 样式 行为
html css js
6、经验性的总结
网页常用字体和字体大小:arial,12/14号
transparent透明色
p标签里不能套块级元素,如果套了F12可以看到p标签被劈成了2个p标签
a标签里不能套a标签