line-height: 50px; flex-shrink: 1; } 1. 2. 3. 4. 5. 6. 7. 8. 单独将div1的flex-shrink改为0: .div1{ flex-shrink: 0; background-color: yellow; } 1. 2. 3. 4. 如图,div1没有缩小。 4.flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。 浏览器根据这个...
1、div标签 div标签是一个块级元素,它独占一行,用于对页面进行区域划分。它可以包含其他HTML元素,如文本、图片、链接等。通过CSS样式可以设置div的布局和样式。 示例代码: <!DOCTYPEhtml><html><head><style>.box{width:200px;height:200px;background-color: red; }</style></head><body><div>这是一个div...
1、div标签 div标签是一个块级元素,它独占一行,用于对页面进行区域划分。它可以包含其他HTML元素,如文本、图片、链接等。通过CSS样式可以设置div的布局和样式。 示例代码: <!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 200px; background-color: red; } </style> </head> <bo...
line-height: 200px; text-align: center; } .left{ background-color: orange; float: left; } .right{ background-color: deeppink; float: right; } .center{ background-color: yellow; margin: 0px auto; } </style> </head> <body> <div id="box"> <div class="left">div1</div> <div...
li 标签可以包含 div 标签,因为li 和 div 标签都是装载内容的容器 二、CSS规范 1.命名空间规范(了解) 1.布局:以 g 为命名空间,例如:.g-wrap 、.g-header、.g-content。 2.状态:以 s 为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-selected。 3.**工具:**以 u 为命名空间,表示不...
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;} 2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;} 39、透明度的兼容写法 ...
{ height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 2rem; box-sizing: border-box; } h1 { margin: 0; font-size: 3rem; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } p { margin: 1rem 0; ...
使用绝对定位的方就是将三个容器都定为绝对定位,左右侧 DIV 绝对定位且定宽,中间距离等于左侧宽度和右侧宽度 。 代码语言:txt 复制 .wrapper-1{ position: relative; width: 100%; height: 200px; background-color: antiquewhite; } .wrapper-1 .left-1{ ...
在CSS样式中,我们可以设置`div`元素的`display`属性为`flex`或`grid`。这样,我们就可以使用CSS Grid布局来控制两个`div`元素的排列方式。我们可以通过修改`row`或`column`属性的值来改变它们的排列顺序。 为了实现一个列宽影响另一个列宽的效果,我们需要确保两个`div`元素的高度相同。这可以通过设置`height`属性...
一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度 方案1: .sub { height: calc(100%-100px); } 方案2: .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; } 方案3: .container { display:flex; flex-direction:column; } ....