首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中垂直居中对齐 )

一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定位置...top: 0; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于容器 比例 , 也就是浏览器 ; /* 将固定定位盒子在页面中居中对齐...先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于容器 也就是浏览器 */ left: 50%; 最后 , 整个盒子模型向左走自身宽度一半 , 此处还要配置兼容老版本浏览器样式...左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定位置 与父容器或其它容器无关 *.../ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位盒子在页面中居中对齐 先将盒子左侧设置到中心位置

28820

HTML & CSS页面布局之定位

绝对定位偏移量是相对于其有定位属性第一个祖先元素。 d) fixed 固定定位,固定定位和绝对定位相似,但它偏移量固定相对于浏览器窗口。...在使用绝对定位时有两个注意点:第一个是如果网页高较大时(大于浏览器可视区高),并且元素最终相对于body定位了,实际上它只是相对浏览器首屏高进行偏移,而不是整个网页高。...div{ position:fixed; top:100px; left:50px; } 固定定位元素相对于浏览器视口偏移,和绝对定位元素一样,它会脱离标准文档流,并且浏览器把他们一致视作块级元素。...两列布局 左侧右侧自适应宽度两列布局常用方式有下面几种: 1,左边脱离标准流,右边使用margin属性使其偏移 .left{ width:200px; float:left;...圣杯布局和双飞翼布局区别:除了HTML代码结构不同外,圣杯布局center宽度即为内容宽度,left和right靠在其两边。双飞翼布局center宽度等于内容宽度加left和right宽度

5.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

CSS实用技巧(中)

,具有以下特性: 计算BFC高度时,浮动元素也参与计算 属于同一BFC容器元素垂直方向margin会合并 BFC容器是独立容器,不会影响外部元素布局 利用BFC特性,我们可以实现以下功能: 清除浮动...div class="blue"> red inner 自适应布局 左侧固定...left/top/right/bottom都有值定位 当对立位置(left与right,top与bottom)都设置值且元素没用固定高 此时元素高是根据元素位置决定,张鑫旭大佬在《CSS世界》...style> 这种行为特性对于我们做自适应布局非常有用,而且兼容性非常好,比如我们要做左侧固定宽度...这个时候你会发现,元素高时以width/height为准,上述说格式化宽度、高度并没有生效。

1.4K40

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

, 搜索栏还需要保持 不管如何进行滚动 , 始终悬浮在最上方 ; 搜索栏 必须是同 固定定位 , 才能实现上述效果 ; 搜索栏 父容器 样式如下 : /* 下面是搜索栏样式 */ .search-wrap.../* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block...nth-child(2) img { /* 在 10% 宽度 Logo 盒子中 图片宽度是 30 像素 高度没有给出 但是 高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定标签元素内部 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位

1.7K20

【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

: auto; 样式方式 令盒子水平居中 ; 举例说明 : 绝对定位 元素 需要居中对齐地方很多 , 如下图所示 , 右侧 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中 五个小圆点...容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单方法就是 使用标尺测量父容器高 , 通过设置四个边边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移方式设置居中就会出现问题 ; 先设置 50% 宽度 / 高度 偏移量 , 然后再往回退...盒子一半 宽度 / 高度 偏移量 ; 以 水平居中为例 : 200 x 200 大小盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素左侧 移动到 父容器水平中心位置...; left: 50%; 然后 , 设置 负数 左外边距 , 令 子元素 向左移动 自身 宽度一半 , 需要提前测量 子元素宽度 ; margin-left: -100px; 三、绝对定位元素

1.7K40

css基础样式2

positionx = (容器宽度-图片宽度)*percentx positiony = (容器高度-图片高度)*percenty [left center right] [top center bottom...参数 fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 local 此关键字表示背景相对于元素内容固定。...scroll 此关键字表示背景相对于元素本身固定, 而不是随着它内容滚动(对元素边框是有效)。...二,display:inline-block 1.即呈现出inline特性(不占据一整行,宽度内容决定) 2.又呈现出block特性(可以设置高,内外边距) 3.还有缝隙问题 两个行内元素并排放时...必须使用vertical-align: top;才能让inlineblock元素垂直方向能对齐 基线对齐内容,比较复杂。

1.4K40

17个场景,带你入门CSS布局

又如这样布局:两个元素在一行,左侧元素固定200px,右侧元素撑满剩余空间。固定200px,撑满剩余空间是大小。两个元素在一行是位置。 下面,我们从大小和位置两个方面,结合场景来看CSS布局。...场景01 元素高是固定值 给元素设置固定高,只需设置。如: width: 100px; height: 100px; 注意:给行内元素设置高值不会生效。...场景03 撑满父元素剩余可用宽度 撑满父元素剩余可用宽度常见具体场景是:页面左右结构,左侧固定宽度菜单导航,右侧是撑满剩余部分主题内容。如下图: ? 下面列举2种实现方法。...绝对定位元素水平居中时,距定位元素左侧值为 50%*定位元素宽度 - 50%*元素宽度。...多个元素占一行(或列)或多行(或列),居中对齐,居右对齐,弹性宽度或高度。都可以用Flex布局来实现。 元素相对父元素定位或相对页面定位。可以用Position来实现。 实现高和设备宽度有关。

2.5K20

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

, 如果 拉长浏览器宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩效果 : HTML 标签结构如下 : 最外层容器容器内部两个半圆形容器 ; 中间部分可自动伸缩容器盒子 半圆子容器...390 x 44 像素 , 该父容器高度是 44 像素 ; 由于设备宽度不同 , 这里不设置宽度 , 让宽度自适应即可 ; css 样式实例 : .search-btn { /* 左侧按钮布局...垂直居中 */ line-height: 44px; } 5、搜索栏盒子 搜索栏盒子 高度是 44 像素 , 宽度一定不要设置 , 让该盒子自适应自动缩放宽度 ; 该容器中 , 只需要利用中间部分内容即可.../* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位 */ position: relative; /* 搜索框高度 30 像素.../* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block

2K30

【移动端网页布局】流式布局案例 ⑤ ( 连续排列链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

/* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block.../ 设备宽度 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度 Logo 盒子中 图片宽度是 30 像素 高度没有给出 但是 高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定标签元素内部 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位

3.5K20

Web-CSS

text-align 并不控制块元素自己对齐,只控制它行内内容对齐。...:相对于包含块宽度,以百分比值为外边距。...content-box:是默认值,设置border和padding均会增加元素高。 border-box:设置border和padding不会改变元素高,而是挤占内容区域。...取值: flex-start:元素向主轴起点对齐。 flex-end:元素向主轴终点对齐。 center:元素在侧轴居中。 stretch:弹性元素被在侧轴方向被拉伸到与容器相同高度或宽度。...center:所有行朝向容器中心填充。每行互相紧挨,相对于容器居中对齐容器垂直轴起点边和第一行距离相等于容器垂直轴终点边和最后一行距离。 stretch:拉伸所有行来填满剩余空间。

8.5K20

冷门布局方法 tabel-cell 可行性研究

,虽然它们在不同容器中,且不用管当前列容器设置 padding 是多少,它们在水平方向上是绝对对齐。...两栏自适应布局 即左侧宽度固定,右侧自动分配剩余空间:        * {            box-sizing: border-box;        }        ...             左侧宽度固定,右侧宽度自适应。...下面说一说关于百分比结论:1. 高度设置百分比无效,只与内容实际高度有关 2. 宽度设置百分比分两种情况, * 一种是父容器设置 display:table;,这种情况下分两种情况 1....在其前面有其他元素时,其宽度可以按照 display:inline-block 元素来计算,也就是宽度会小于等于其百分比计算值宽度 * 在父容器未设置 table时,width 百分比值可以理解为内容宽度加上

36020

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

/* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block.../ 设备宽度 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度 Logo 盒子中 图片宽度是 30 像素 高度没有给出 但是 高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定标签元素内部 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位

3.2K40

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定位置 与父容器或其它容器无关 *.../ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位盒子在页面中居中对齐 先将盒子左侧设置到中心位置...注意 : 这个 50% 是相对于容器 也就是浏览器 */ left: 50%; /* 兼容老版本浏览器 */ -webkit-transform: translateX...(-50%); /* 向左走盒子自身宽度一半 */ transform: translateX(-50%); /* 固定盒子模型必须设置宽度 */ width: 100%.../* 设置该搜索框占据除右侧固定大小按钮之外剩余父容器空间 */ flex: 1; /* 设置文字大小和颜色 */ font-size: 12px; color: #666

42520

【移动端网页布局】流式布局案例 ⑦ ( 水平排列图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

/* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content: ""; display: block.../ 设备宽度 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮图像宽度 该图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度 Logo 盒子中 图片宽度是 30 像素 高度没有给出 但是 高等比例缩放 高度也是 30 像素 */...44px; } .search-btn::before { /* 在 指定标签元素内部 前面 插入内容 */ /* 左侧按钮盒子中 插入 三 图片 */ content:...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器容器需要绝对定位 因此父容器设置为相对定位

2.3K40

Css学习总结

布局相关知识 1 盒子模型 外盒子 在计算高时要算外边距。 内盒子在计算高时不计算内边距。 块级元素在普通文档流中独占一行,可设置宽度默认是父级100%,内外边距,可容纳其他元素。...行内元素在普通文档流中不独占一行,不可设置高,宽度高度默认是内部元素宽度,水平方向可设置内外边距,可容纳文本或者其他行内元素 a标签特殊 行内块在普通文档流中不独占一行,可设置高,内外边距,可容纳其他元素但是相邻元素之间会有缝隙...绝对定位:相对于最近以定位(绝对|固定|相对)父级元素进行定位,父亲元素都没有定位则相对与document文档定位。...如果设置了margin那新width值是容器宽度加上margin值。就会发现加了  margin相对应边就会多出设置空白。...而且会多出横向滚动条因为宽度已经超出了屏幕范围,(这条相对于容器是body)。 2、width:auto包含margin-left/margin-right属性值。

93800

clientWidth、offsetWidth等介绍

大家好,又见面了,我是你们朋友栈君。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX...window.screen.height 屏幕分辨率: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度

52920
领券