Article directory
1. Fixed positioning search bar at the top
Requirements: Make the following search bar;
1. The fixed positioning box is centered and aligned
First, set fixed positioning, the fixed positioning box is always displayed at the specified position in the browser , regardless of the parent container or other containers;
/* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
position: fixed;
Then, set the vertical position of the fixed positioning box to be top: 0;close to the top;
/* 固定定位盒子位置紧贴顶部 */
top: 0;
Then, set left: 50%the style , set the left side of the box to the center position, this 50% is relative to the ratio of the parent container, that is, the browser;
/* 将固定定位的盒子在页面中居中对齐
先将盒子左侧设置到中心位置
注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
left: 50%;
Finally, the entire box model moves to the left half of its own width, and a style compatible with older browsers is also configured here;
/* 兼容老版本浏览器 */
-webkit-transform: translateX(-50%);
/* 向左走盒子自身宽度的一半 */
transform: translateX(-50%);
2. Set the maximum width and minimum width
In mobile web pages, it is generally necessary to set a maximum width and a minimum width;
- When the width of the browser exceeds the maximum width, the maximum layout of the webpage is the maximum width, and the webpage will no longer be enlarged with the page if you continue to zoom in;
- When the width of the browser is smaller than the minimum width, the minimum width of the web page layout is the minimum width, and continue to shrink the display layout layout;
/* 设置最大和最小宽度 */
min-width: 320px;
max-width: 640px;
3. Use Flex elastic layout to manage width
In the search box, there is a search bar on the left and a search button on the right;
- The search button on the right is always 44x44 pixels in size;
- The search bar on the left changes with the width of the page layout;
Here, the Flex elastic layout is used to manage the width , the button on the right directly sets a fixed size, and the search box on the left sets flex: 1;the style , that is, it automatically occupies the remaining space;
flexThe style of Flex sub-items is 0 by default, as long as a sub-item is set with flex: 1;a style , then the sub-item will automatically occupy all the remaining space;
4. Double sprite map setting
The magnifying glass image and avatar icon in the figure below are both defined in the sprite image,
Double sprite map setting steps:
- Shrink the sprite: in Firework, shrink the sprite by half;
- Measure coordinates: measure coordinates in the sprite map that has been reduced by half;
- Set the code: reduce the background-size in the code by half, that is, the sprite image is reduced by half;
Inserted magnifying glass sprite:
.search::before {
/* 使用伪元素方式 插入 搜索栏放大镜图片 */
content: "";
/* 绝对布局 */
position: absolute;
/* 令该图片放置在中间偏上位置 */
top: 5px;
left: 5px;
/* 设置图片宽高 */
width: 15px;
height: 15px;
/* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置,
设置背景时将精灵图
向左移动 59 像素
向上移动 279 像素 */
background: url(../images/sprite.png) no-repeat -59px -279px;
/* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
background-size: 104px auto;
}
Inserted avatar sprite:
.user::before {
/* 使用伪元素方式 插入 用户栏头像图片 */
content: "";
/* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
display: block;
/* 设置图标的宽高 */
width: 23px;
height: 23px;
/* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置,
设置背景时将精灵图
向左移动 59 像素
向上移动 194 像素 */
background: url(../images/sprite.png) no-repeat -59px -194px;
/* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
background-size: 104px auto;
/* 设置用户信息按钮外边距 */
margin: 4px auto -2px;
}
5. Vertical center alignment in CSS3 - line height = content height (total height - border height - inner margin height)
In the normal box model, when setting the vertical center alignment, directly set the content height = line height;
Since the CSS3 style is adopted, in this mode, the set height height = content height + border height + inner margin;
If you want to set vertical centering, you can only set the line height = content height, and remove the 2-pixel border;
Therefore, in this CSS3 style, the height is set to 26 pixels, which includes a content height of 24 pixels and a border height of 2 pixels (1 pixel for the upper and lower borders);
/* 设置 高度 = 26 行高 = 24 像素 垂直居中
设置行高 = 26 会偏下
上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
height: 26px;
line-height: 24px;
Complete code example:
.search {
/* 搜索框样式 */
/* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
position: relative;
/* 设置 高度 = 26 行高 = 24 像素 垂直居中
设置行高 = 26 会偏下
上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
height: 26px;
line-height: 24px;
border: 1px solid #ccc;
/* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
flex: 1;
/* 设置文字大小和颜色 */
font-size: 12px;
color: #666;
/* 设置搜索框的内外边距 */
margin: 7px 10px;
padding-left: 25px;
/* 设置搜索框圆角矩形半径 */
border-radius: 5px;
/* 设置盒子模型阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
2. Code example
1. HTML tag structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>Flex 弹性布局案例</title>
</head>
<body>
<!-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 -->
<div class="search-index">
<!-- 搜索栏提示内容 -->
<div class="search">输入搜索信息</div>
<!-- 搜索栏右侧按钮 -->
<a href="#" class="user">我 的</a>
</div>
</body>
</html>
2. CSS styles
body {
/* 网页布局宽度 = 设备宽度 */
width: 100%;
/* 最小宽度 320 像素 */
min-width: 320px;
/* 最大宽度 640 像素 */
max-width: 640px;
/* 居中对齐 */
margin: 0 auto;
/* 字体大小 14 像素 */
font-size: 14px;
/* 如果是苹果就是用苹果默认字体
如果不是苹果手机 就使用后啊面的字体 */
font-family: -apple-system, Helvetica, sans-serif;
/* 字体颜色 */
color: #000;
/* 行高 */
line-height: 1.5;
/* 水平方向超出隐藏 */
overflow-x: hidden;
}
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
* {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {
-webkit-touch-callout: none;
}
a {
color: #000;
/* 取消链接的下划线样式 */
text-decoration: none;
}
ul {
/* 设置列表的默认样式 */
margin: 0;
padding: 0;
/* 去掉小圆点 */
list-style: none;
}
img {
/* 图片与文字对齐样式 默认是与文字基线对齐 */
vertical-align: middle;
}
div {
/* css3 盒子模型 */
box-sizing: border-box;
}
.clearfix:after {
/* 清除浮动样式 */
content: "";
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
/* 上面是 CSS 的默认样式, 每个 CSS 文件都有上述样式, 下面开始就是正式样式 */
/* 顶部固定定位搜索栏样式 */
.search-index {
/* 将其内部设置成 弹性布局
右侧的按钮设置固定大小
左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */
display: flex;
/* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */
position: fixed;
/* 固定定位盒子位置紧贴顶部 */
top: 0;
/* 将固定定位的盒子在页面中居中对齐
先将盒子左侧设置到中心位置
注意 : 这个 50% 是相对于父容器的 也就是浏览器 */
left: 50%;
/* 兼容老版本浏览器 */
-webkit-transform: translateX(-50%);
/* 向左走盒子自身宽度的一半 */
transform: translateX(-50%);
/* 固定的盒子模型必须设置宽度 */
width: 100%;
/* 设置最大和最小宽度 */
min-width: 320px;
max-width: 640px;
/* 设置高度 */
height: 44px;
/* 设置盒子背景颜色 */
background-color: #F6F6F6;
/* 设置上下边框 */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
/* 搜索框样式 */
/* 子绝父相 放大镜图标子元素设置绝对定位 父容器需要设置相对定位 */
position: relative;
/* 设置 高度 = 26 行高 = 24 像素 垂直居中
设置行高 = 26 会偏下
上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型
CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */
height: 26px;
line-height: 24px;
border: 1px solid #ccc;
/* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间 */
flex: 1;
/* 设置文字大小和颜色 */
font-size: 12px;
color: #666;
/* 设置搜索框的内外边距 */
margin: 7px 10px;
padding-left: 25px;
/* 设置搜索框圆角矩形半径 */
border-radius: 5px;
/* 设置盒子模型阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search::before {
/* 使用伪元素方式 插入 搜索栏放大镜图片 */
content: "";
/* 绝对布局 */
position: absolute;
/* 令该图片放置在中间偏上位置 */
top: 5px;
left: 5px;
/* 设置图片宽高 */
width: 15px;
height: 15px;
/* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置,
设置背景时将精灵图
向左移动 59 像素
向上移动 279 像素 */
background: url(../images/sprite.png) no-repeat -59px -279px;
/* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
background-size: 104px auto;
}
.user {
/* 用户栏样式 */
width: 44px;
height: 44px;
/* 设置文字大小为 12 像素 */
font-size: 12px;
/* 设置文本居中 */
text-align: center;
/* 设置文本颜色 */
color: #2eaae0;
}
.user::before {
/* 使用伪元素方式 插入 用户栏头像图片 */
content: "";
/* 设置显示样式 流式布局 块级元素 上方设置按钮 会自动将文字挤到下面显示 */
display: block;
/* 设置图标的宽高 */
width: 23px;
height: 23px;
/* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 194 位置,
设置背景时将精灵图
向左移动 59 像素
向上移动 194 像素 */
background: url(../images/sprite.png) no-repeat -59px -194px;
/* 这里涉及到了精灵图缩放 原图 208 像素 此处设置为 104 像素 */
background-size: 104px auto;
/* 设置用户信息按钮外边距 */
margin: 4px auto -2px;
}
3. Display effect
