固定宽度 div 在调整浏览器窗口大小时失去其背景颜色 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

HTML、CSS、JavaScript学习总结

framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位） bordercolor：可设置边框线颜色。 scrolling：设置框架是否显示滚动条。...调整行高——line-height 转换英文大小写——text-transform 颜色和背景设置颜色——color 设置背景颜色——background-color 插入背景图片——background-image...是浏览器的默认值。 Ø fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。...• 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。...;”>块元素2div> CSS+Div 应用实例布局 • 流体浮动布局 • 固定浮动布局 • 固定定位布局 JavaScript • Javascript是一种由Netscape

4.6K2 0

前端入门4-CSS属性样式表声明正文-CSS属性样式表

background-attachment 设置背景图片是否固定，属性值： fixed 背景固定住，不会被滚动条滚走 scroll 默认属性，背景跟随滚动条滑动 background-clip...，比如某张图片本来居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时就可结合 max-width 来实现。...第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。颜色值是阴影的基本颜色（base color）。...但对于块级元素，浏览器会强制让其霸占一整行，也就是这一行内，只能有这个块级元素存在，其他元素不能与其并排。如果没有设置宽度，那么就是充满整行。...然后它继续处理 div2 元素，因为之前处理的 div1 元素是浮动元素，不占用文档流，所以此时仍旧是在第一行左边绘制 div2 元素，发现它是一个块级元素，所以让其霸占一整行。

2.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

WEB入门.七 CSS布局模型

可以设置其width 和 height属性，即使是行内元素。块状元素设置浮动后则失去“独占一行”的特征。...">右列div> div> 图3.1.16 单行两列（1）浮动布局实现设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。...有时在实际布局中需固定单列宽度，另一列宽度自适应，此时仅需固定浮动列的宽度，而定义另一列为自适应流动环绕分布。...如图 3.1.33 所示 3.4.16设置框架滚动条显示——scrolling 在默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以方便用户浏览。...在该文件中，设置了上面的框架窗口页面为导航页面，命名为 navig，同时设置其默认打开的页面名为 navig.html 文件。同时还设置该页面窗口不显示滚动条，而且不允许调整窗口大小。

7421 0

实战 HTML & CSS：如何快速搭建一个响应式博客首页

；固定位置，永远在浏览器页面的最顶上； nav{ background-color: cornflowerblue; /* 导航栏背景颜色设置为淡玉米花蓝 */...; } .sidebar img{ /* 调整侧边栏内图片的宽度为80% */ width: 80%; /* 调整侧边栏内图片的高度为70%...完善样式参考预期的效果，关于核心内容目前还缺少的样式如下：右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上；右侧广告栏的内容居中展示；各种边框阴影效果等； .content.../* 背景颜色 */ width: 100%; /* 宽度为100% */ border-radius: 10px; /* 圆角边框，半径为10像素 */ } .item {.../* 设置侧边栏的背景颜色为绿色 */ background-color: green; /* 背景颜色 */ /* 设置侧边栏的宽度为240像素 */ width: 240px

1.9K1 0

css笔记

，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。...一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。...相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位静态定位(static) 静态定位是所有元素的默认定位方式...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。

9.3K5 0

Web前端温故知新-CSS基础

CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。　　...其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负数值，建议使用em作为设置单位。　　...七、深入布局 7.1 布局基础　　（1）版心与布局流程　　版心是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px,980px,1000px等。　　...（6）固定定位　　固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。　　...当对元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

4.1K4 0

Web前端温故知新-CSS基础

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负数值，建议使用em作为设置单位。　　...常用的属性值如下：七、深入布局 7.1 布局基础　　（1）版心与布局流程　　版心是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px,980px,1000px等。...如下图所示，这就是一个绝对定位的效果展示：　　（6）固定定位　　固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。　　当对元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。　　比如网页中常见的回到顶部按钮，就是一个典型固定定位案例： <!

2.9K2 0

Css详细介绍

2）em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。...使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。...（2）fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。（3）relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。...2）fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 3）relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。...rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。

1.1K1 0

WEB入门.七 CSS布局模型

可以设置其width 和 height属性，即使是行内元素。块状元素设置浮动后则失去“独占一行”的特征。...">右列div> div> 图3.1.16 单行两列（1）浮动布局实现设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。...有时在实际布局中需固定单列宽度，另一列宽度自适应，此时仅需固定浮动列的宽度，而定义另一列为自适应流动环绕分布。...如图 3.1.33 所示 3.4.16设置框架滚动条显示——scrolling 在默认情况下，当页面的内容超出浏览器窗口的大小时，页面会自动添加滚动条以方便用户浏览。...在该文件中，设置了上面的框架窗口页面为导航页面，命名为 navig，同时设置其默认打开的页面名为 navig.html 文件。同时还设置该页面窗口不显示滚动条，而且不允许调整窗口大小。

5521 0

CSS 实用手册

负值 ④. auto 自动 ,由浏览器计算外边距的值应该是多少，默认情况下，auto 只对左右有效，上下无效，为块级元素设置宽度后，再设置其左右外边距为 auto，该元素能水平居中显示。 ⑤....背景 (1). background-color 背景颜色语法:background-color：颜色值或 transparent 注意:背景颜色从边框位置处开始绘制 (2). background-image...:value ①. scroll 滚动，默认值 ②. fixed 固定，让背景图一直在可视化区域中 (6). background-position 背景图片定位语法: background-position...语法:table-layout:value (1). auto 自动，即自动表格布局为默认值，列的宽度高度是由内容来决定 (2). fixed 固定，即固定表格布局，列的宽度和高度由设定的值决定 (3...自动表格布局 VS 固定表格布局 ①. 自动表格布局 A. 单元格的大小会适应内容 B. 表格复杂时，加载速度较慢(缺点) C. 适用于不确定每列大小时使用 D. 特别灵活(优点) ②.

4.1K1 0

CSS入门？一篇就够了！

、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。...相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位静态定位(static) 静态定位是所有元素的默认定位方式...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。...在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

6.3K2 0

CSS笔记

两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。...边框颜色外边框 outline-color: 颜色 outline-style: 轮廓样式 outline-width: 宽度隐藏元素 display:none 隐藏的元素不会占用任何空间 visibility...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...sticky(粘性定位)，基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像position:relative;它的表现就像 position:fixed;，它会固定在目标位置。...元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） Overflow visible 默认值。

2.7K2 0

前端复习：CSS专题3

但是前端开发工程师在大量的实线中，发现不写link、visited浏览器也挺兼容，所以把a标签简化了。 a:link、a:visited都是可以省略的，简写在a标签里面。...4.2 不脱标，老家留坑，形影分离相对定位不脱离标准流，其真实的位置还是在老家里，只不过影子出去了，可以到处飘。 4.3 相对定位用途相对定位有坑，所以一般不用于做“压盖”效果。...如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：面试题：用bottom定位的时候，参考的是浏览器首屏大小对应的页面左下角： 5.3 以盒子为参考点一个绝对定位的元素...可以使用如下设置使其水平居中： left:50%; margin-left:负的宽度的一半 6 固定定位固定定位，就是相对于浏览器窗口的定位。无论页面如何滚动，这个盒子显示的位置不变。...固定定位脱标。 7 z-index 1、z-index值表示谁压着谁。数值大的盖住数值小的。 2、只有定位了的元素，才能够有z-index值。

1.1K2 0

面试官：CSS 面试题集锦

- repeat”，“background-position”的组合进行背景定位优点减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；减少图片的字节...display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...它可以自动识别屏幕宽度、并做出相应调整的网页设计、布局和展示的内容可能会有所改变。...1.允许网页宽度自动调整所有主流浏览器都支持这个设置。

4.4K3 0

CSS

选择器的优先级　　　　我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？　　　　...，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/ /*背景位置*/ background-position...效果：　　　　还可在调试窗口调整颜色来测试（调试窗口：页面上右键--检查，或者f12）　　　　调整好之后，把调整后的值复制到我们的css属性里面就行了　　　　还可以通过hover来设置鼠标移动上去变颜色...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。　　　　　　示例代码：大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index

2.3K1 0

css负边距之详解

比如有一列宽度100%，另一列有固定的宽度，比如说100px。...#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。如果负边距和宽度一样大的话，它就会被完全覆盖掉。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。...假如你把第十个div插入到9个其他的div中，不知道什么原因没有正确的排列，使用负边距来调整这个div就不需要改变其他9个div了，很方便。...解决bug 文本和链接问题在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：让链接不可点击文本变得很难选择失去焦点的时候按tab键失效解决方法：只要添加position:

2.9K4 0

css负边距之详解

比如有一列宽度100%，另一列有固定的宽度，比如说100px。...#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。如果负边距和宽度一样大的话，它就会被完全覆盖掉。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦简单的两列布局负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。...假如你把第十个div插入到9个其他的div中，不知道什么原因没有正确的排列，使用负边距来调整这个div就不需要改变其他9个div了，很方便。...解决bug 文本和链接问题在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：让链接不可点击文本变得很难选择失去焦点的时候按tab键失效解决方法：只要添加position:

2.6K8 0

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。...下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。...将scrollbar-track的背景颜色设置为蓝色将scrollbar-thumb的背景颜色设置为绿色将滚动条的宽度（厚度）设置为12px将scrollbar-track和scrollbar-thumb...在本练习中，我们将重用以前的样式，但将使用高度来设置滚动条的厚度，如下所述：将scrollbar-track的背景颜色设置为蓝色将scrollbar-thumb的背景颜色设置为绿色将滚动条的高度（厚度）

6.1K0 0

第124天：移动web端-Bootstrap轮播图插件使用

> 二、轮播图使用中的问题 1、由于轮播图片超宽造成的影响　　- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度　　- 而且Bootstrap...length 　　+ 如 background-size: 100px 100px，将背景图固定到多大尺寸　　- percentage 　　+ 如 background-size: 90% 90%...="大图路径"）　　　　+ 通过JS的方式获取屏幕的宽度；　　　　+ 判断屏幕宽度是否小于一定的值（如：768）　　　　+ 根据判断情况决定使用具体的大图还是小图三、javascript...("' + imgSrc + '")'); 13 }); 2、window resize事件由于上一步我们实现的过程是指在页面加载完成判断一次， - 当用户手动调整页面宽度过后没有及时发生变化， -...('resize', 窗口变化后执行的函数名).trigger('resize'); 3、小图片不需要使用背景的方式　　- 小图如果还是使用背景的方式，当屏幕特别小时，效果很差　　- 所以当使用小图时

7.3K4 0

前端面试宝典（四）

1）要求容器在宽度自由伸缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。...重绘当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。...PX特点 IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 em的值并不是固定的； em会继承父级元素的字体大小。...区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

1.1K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭