慕课首页

–遇到的问题及关于水哥分享的总结；

一.并排显示div的使用：

方式1

浮动: 子元素 float + 父元素::after{display:block;clear:both;}

1) 父元素 清除浮动
2) 父元素 加宽 18 px           1152px + 18px
3) 父元素 左边距  -18px

4) 子元素 浮动
5) 子元素 设置 左边距  18px   下边距 12px

方式2

弹性:

父元素 {
	display: flex;
	flex-wrap: wrap;  // 超出自动换行
	justify-content: space-between;  // 两端顶头对齐,中间平均空白
	align-content: flex-start;   // 行与行之间紧挨,可以再用 margin 调整
}
子元素 {
	没有过多设置
}

好处: 不用清除浮动, 不用设置边距

二.垂直居中

尝试1: line-height: 一般为父元素高度

尝试2: 转为块元素，margin-top 向下顶 or margin-bottom 向上顶, 负值也可以尝试

尝试3: 定位 position:relative; top=xxx; left=xxx; 调整

尝试4: 在 box-sizing:border-box; 情况下, 用 padding-top 或 padding-bottom调整

尝试5: 行内元素, 有填充高度 ＝> vertical-align: 像素或百分比;

尝试6: 弹性

父元素 {
		display: flex;
		align-items: center;   
}
子元素  重直居中    无要求

三.轮播图

swiper

1.官网 https://www.swiper.com.cn/

2.使用简介 查看 在线演示 查看网页源代码, 而不是 Elements

3.审查元素, 尝试修改重写局部样式(重点);

Bootstrap

1.使用Bootstrap 3的轮播图效果，

2.要看好具体控制的类名；

3.使用类选择器前要加标签；

四.box-sizing 宽高问题

box-sizing: border-box; 设置 width = content + padding + border

box-sizing: content-box; 设置 width = content

标准规范值: width 只包含 内容(content)区域

Bootstrap: width 包含 内容 + 填充 + 边框