两列布局实现
- float + margin 属性实现;
- float + overflow 属性实现;
- display 属性的 table 相关值实现;
- 使用绝对定位实现;
- 使用 flex 实现;
- 使用 Grid 实现;
三列布局
- 左右绝对定位,中间加左右的padding
- 左右浮动,中间会顶上去
- flex实现
先去除所有margin padding
总体加flex,左右加宽
中间加 flex:1
设置以下order值定义排列顺序
CSS优先级
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
H5和CSS3的新特性
- HTML5
- 新增语义化标签:
<header> <nav> <section> <footer>
- 新增多媒体标签:
<audio> <video>
- 新增Input类型:
<input type= >
- 新增表单属性
- 新增语义化标签:
- CSS3
- 属性选择器:
input[type]{}
- 结构伪类选择器:
:frist-child :nth-child(4) :last-child
- 伪元素选择器:
::before ::after
- 新增盒子模型
box-sizing:content-box
盒子所占位置大小为width+padding+border(默认的)
box-sizing:border-box
盒子所占位置大小为width,padding和border就不会撑大盒子了 - 新增过渡属性:
transition
- 属性选择器:
img标签
img标签是行内快元素,属于可替换元素(<input> <select>),这些元素往往没有实际的内容
img是特殊的可替换元素,同时具有行内元素、行内块、块级元素的特性