background-size
background-size: 500px 200px;- 只写一个宽度
background-size: 500px ;省略高度 background-size: 50%;百分比是相对于父盒子来说的background-size: cover;要完全覆盖div盒子，图片可能会有部分显示不全backgroung-size: contain宽高任意一个喝盒子的边缘重合即停止
特殊样式
- css3盒子模型
box-sizing: border-box;``-webkit-box-sizing: border-box; - 点击高亮 清除
-webkit-tap-highlight-color: transparent; - 在ios上移动端浏览器默认的外观加上
-webkit-appearance: none;才能给按钮/输入框添加自定义样式 - 禁用长按页面时弹出菜单
img,a {-webkit-touch-callout: none;}
移动端常见布局
流式布局
flex布局
原理
- 任何容器都可指定为flex布局
- 当为父元素指定为flex布局之后，子元素的float,clear,vertical-align都将失效
一.flex布局父项常见属性
1.flex-direction设置主轴方向
主轴为x轴：flex-direction: row;
主轴为y轴：flex-direction: column;
2.justify-content设置主轴上子元素排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | （默认值）从头部开始排列（如果主轴是x轴，就从左到右排列） |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间（重要） |
3.flex-wrap设置子元素是否换行
flex-wrap: nowrap; 不换行（默认值）
flex-wrap: wrap; 换行
4.align-items 设置 侧轴 上的子元素排列方式
（单行）
align-items: flex-start;
align-items: flex-end;
align-items: center;挤在一起居中（垂直居中）
align-items: stretch;拉伸（默认值）
5.align-content 设置 侧轴 上的子元素排列方式
（多行⬅️换行）
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch;
6.flex-flow相当于同时设置flex-direction和flex-wrap
For example: flex-flow: row wrap;
flex-flow: column nowrap;
二.flex布局子项常见属性
1.flex属性
定义子项目分配剩余空间，用flex表示占多少份。
2.align-self属性
控制子项自己在侧轴上的排列方式
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
rem适配布局
一.rem基础
em是相对于 父元素 的字体大小来说的 rem是相对于 html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小
二.媒体查询(Media Query)
可以针对不同的屏幕尺寸设置不同的样式
@media mediatype and/not/only (media feature)
{ CSS-Code;}
@media screen and (max-width: 800px)
{
body {background-color: blue;}
}
媒体查询最好的办法是从小到大
引入资源
针对不同的屏幕尺寸，调用不同的css文件。
less语法
1.less嵌套
- 子元素的样式直接写到父元素里
- 如果有伪类，伪元素选择器，交集选择器，内层选择器之前要加**&**
.nav {
.logo {
color: green;
}
&::before {
content: " ";
}
}
三.rem实际开发适配方案
1.元素大小取值方法
页面元素的rem值= 页面元素值(px)/（屏幕宽度/划分的分数） 屏幕宽度/划分的分数 就是html font-size的大小 页面元素的rem值= 页面元素值(px)/ html font-size的大小
响应式布局(Bootstrap框架）
一.响应式布局容器
响应式需要一个父级作为布局容器，来配合子元素实现变化效果。在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。
尺寸划分：(最常用） 超小屏幕（手机，小于768px）width: 100% 小屏幕（平板，大于等于768px）width: 750px 中等屏幕（桌面显示器，大于等于992px）width: 970px 大屏幕（大桌面显示器，大于等于1200px）width: 1170px
