怪异盒模型
- 标准盒模型:box-sizing:content-box
- 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右
- 怪异盒模型:box-sizing:border-box ie8以下不支持
- 盒子宽度 = 内容区的width + margin的左右
弹性盒布局(flex)
- 父元素
- 形成弹性盒 display:flex;
- 主轴对齐方式 justify-content
- flex-start 默认值 主轴起点
- flex-end 主轴终点
- center 主轴中心
- space-between 两端对齐
- space-around 中间空隙是两边的2倍
- space-evenly 平均分配
- 交叉轴 align-items
- stretch 默认值拉伸 (主轴是横向的话,看到该效果需要去掉子元素的高度,子元素的高会拉伸到和父元素一样高,主轴是纵向的话,看到该效果需要去掉子元素的度,子元素的宽会拉伸到和父元素一样宽)
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- 主轴的方向 flex-direction
- row 默认值 横向从左向右
- row-reverse 横向从右向左
- column 纵向从上到下
- column-reverse 纵向从下到上
- 换行 flex-wrap
- nowrap 默认值 不换行
- wrap 换行
- 多行之间的对齐方式 align-content
- stretch 拉伸
- flex-start 整个盒子的起始
- flex-end 整个盒子的终点
- center 主轴中心
- space-between 多行内容两端对齐
- space-around 多行内容中间空隙是两边的2倍
- space-evenly 多行内容平均分配
- 子元素
- 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
- stretch 拉伸
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心
- 排列顺序 order
- 数值 值越大,越在后面排,可以为负数
- 放大比例 flex-grow
- 0 不放大
- 数值
- 压缩 flex-shrink
- 1 默认值 压缩
- 0 不压缩
- 滚动导航的实现
- 设置子项不压缩 flex-shrink:0;
- 给父元素设置溢出显示滚动条 overflow-x:auto;
- 子项的宽度 flex-basic:数值+px
- 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
- flex:1; 子项占满整个剩余控件
- 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
利用弹性盒对盒子进行水平垂直居中
父元素{
display:flex;
justify-content:center;
align-items:center;
}
css3新增的属性
- 盒子阴影 box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
- eg: box-shadow: 10px 10px 20px 10px green inset;
- 文字阴影 text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色
- eg: text-shadow: 10px 10px 10px blue;
- 圆角 border-radius:
- 一个值 四周
- 两个值 对角
- 三个值 左上 对角 右下
- 四个值 顺时针
- 背景图的大小 background-size: 宽度 高度
- 百分比 可能会变形
- 像素
- 关键字
- cover 背景图会不断放大 直到充满整个盒子,可能会出现裁切的情况
- contain 背景图会不断的放大 碰到边缘后就停止放大,可能会出现留白
背景图的固定
- background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动
元素类型
- 置换元素:浏览器会根据标签以及标签内的属性值来显示不同的内容
input的type类型
img的src
textarea的内容在变
select中的option内容会变 - 非置换元素:除了置换元素
- 为啥img或者input有的标签可以设置宽高??因为标签属于置换元素
字体图标的使用
- 普通字体图标的使用
- 搜索对应的图片,点击加入购物车
- 完成后点击 添加至项目
- 下载项目到本地站点,解压文件,不要删除任何文件
- 在使用图标的文件地方 用link引入iconfont.css文件
<link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
- 使用,必须加 iconfont的名字,其次添加所需图片的class名
<span class="iconfont icon-jipiao">哈哈哈</span>
- 彩色图标的使用
- 引入js文件
<script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>
- 添加通用样式
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
- 使用 只需要改id名就行
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tubiaov-daochushangchuan-"></use> </svg>
- 引入js文件
con" aria-hidden=“true”>
```