文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

寒假提升 ｜ Day10 CSS 第八部分

浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮） 如果水平方向剩余的空间不够显示浮动元素...clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面; clear的常用取值 left:要求元素的顶部低于之前生成的所有左浮动元素的底部 right:要求元素的顶部低于之前生成的所有右浮动元素的底部...inline-level 形式存在 flex布局的模型 2.3. flex container中的属性 flex-direction flex items 默认都是沿着 main axis(主轴)从...size为 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和 flex items 收缩后的最终 size 不能小于...双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。 第二个值必须为以下之一: ✓ 一个无单位数:它会被当作的值。

1.2K20

CSS 基础系列：常见布局方式

有三种常用方式可以达到两列自适应布局 float + BFC： 左元素在没有固定宽度的情况下设置浮动，因此宽度由内容撑开；右元素激活 BFC（这里采用 overflow:hidden）后，可以防止被浮动元素盖住...，且正是为了防止被盖住，右元素宽度才会由默认的撑满屏幕变为撑满剩余部分。...200px; background-color: red; flex: 0 1 100px; } 3.3.2 实现步骤： 只说几个注意的点 在不优先加载主列的情况下，dom 结构可以按照左中右顺序书写...div class="container table"> div class="containerInner tableRow"> /* 左列 */ div class="...此时弹性子元素的 align-items 属性默认值是 stretch，也就是在 y 轴上将所有子元素拉伸为同一高度，从而达到等高布局。

1.8K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS布局(一)

    如： .w { width: 1000px; margin: 0 auto; } div class="...content w">div> 如果不需要 header、 footer铺满整个屏幕，那么只需要将 header、 footer的宽设置为主内容的宽度，并居中即可...双栏布局 双栏布局是一种非常使用的布局。左边是目录、公告等内容，右边是主内容。 双栏布局的侧边栏部分通常都是放目录、公告等需要稳定表现的内容，所以侧边栏需要固定，然后让主内容自适应。...，不过右盒子设置的 margin-left不再是 100%了，而是自身宽度的负值，因为它们都是浮动的，那么右盒子想要上去，就只需要往左移自己的宽度就行了。...因为当屏幕很小时，圣杯布局就会乱掉，双飞翼布局就是改进了这一点。

    1.3K10

    前端入门5-CSS弹性布局flex声明正文-弹性布局flex

    看看属性值： flex-start：交叉轴方向，从起点开始布局排版 flex-end：交叉轴方向，从末尾开始布局排版 center：交叉轴方向，从中间开始布局排版 stretch：交叉轴方向，如果 items...当 flex 容器空间不够，item 要溢出时，设置次属性可控制 item 按比例进行相应收缩，以便不让 item 溢出，默认 1，值越大收缩倍数越大，最后 item 就越小，0 表示不收缩，负值无效。...换行和收缩都是用于解决 item 在主轴方向上溢出的问题，既然是互斥，且换行优先级高，那么设置了换行，就不会再对 item 进行收缩了。 示例： ?...双值语法: 第一个值必须为一个无单位数，并且它会被当作的值。第二个值必须为以下之一： 一个无单位数：它会被当作的值。...场景2 场景3： 响应式布局，在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。

    1.2K20

    CSS布局(二)

    html代码 div class="left"> 《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。... div> div class="center"> 《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。..."> 《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。...所以主体盒子 main的高度应该为屏幕高度，然后给 footer设置 margin-top为自身高度的负值，让 footer上移到屏幕底部。...以外的部分添加 margin-bottom负值 从上面的例子中，我们可以给 footer添加负 margin-top值来实现，而添加负 margin-top值只是为了让 footer能够让 footer上移到屏幕底部

    98830

    前端面试（1）H5+css

    css 两栏布局、三栏布局 两栏布局，已知左侧宽度，右边自适应 1> 双 inline-block 左右盒子均设置为 display：inline-block; 左盒子设置固定宽高，右盒子使用 calc...(100% - width 左); 2>使用浮动双 float 左盒子浮动，右盒子浮动，右盒子宽度设置用 calc(100% - width 左)可以无缝衔接不会有被覆盖的内容。...3>使用定位双定位 在左右盒子外侧设置一个大盒子，不必设置大盒子的宽高，直接设置 position:relative;左盒子设置 position:absolute;固定宽高，右盒子设置 position...5>使用 flex 布局 外侧盒子 display:flex;align-items:flex-start/center;左盒子设置宽高即可，右盒子 flex:1 1 auto;右盒子设置为放大缩小均为...，左盒子固定宽高，右盒子固定宽高并设置right: 0px;使右盒子靠右，中间盒子设置width: calc(100% - width左-width右相加);即可。

    1.3K20

    CSS进阶04-块格式化上下文BFC

    在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文...3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文...内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。...盒的宽高其实是有着很复杂的计算方法，这一点我们在CSS进阶系列后面的文章中详细说明。这里我们来看一个例子： <!...4.1-1 我们发现outer的盒高度竟然没有其所包含的float-left的盒高度高，产生了高度塌陷。这是什么原因呢？

    60530

    CSS基本知识(慕课网)

    当border:的时候是给边框四条线都设置样式 　　　　　　如果给规定的一边的边框设置: div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边(上、右、左...填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 顺序一定不要搞混。...30px; } 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px，左右一样为20px，可以这么写： div{padding:10px...边界也是可分为上、右、下、左。...具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法

    2.2K60

    从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。...常用属性： column-count: 属性设置列的具体个数 column-width: 属性控制列的宽度 column-gap: 两列之间的缝隙间隔 column-rule: 规定列之间的宽度、样式和颜色...这时子元素与子元素之间的间距是最左边和最右边子元素与父元素间距的2倍。 注意： 当所有子元素的宽度之和大于父盒子的宽度时，所有子元素的宽度会平均收缩，变窄，以适应父盒子的宽度。...如果将 flex-shrink 的值设置为 0 的话，父盒子宽度不够时，子元素不收缩，会溢出。...align-self: flex-start; 6、案例：宽高自适应盒子 需求：改变最外边父盒子的大小，里面所有子盒子宽高自适应。 <!

    4K10

    CSS学习

    但有一些css样式是不具有继承性的，如边框 特殊性 有时候我们为同一个元素设置了不同的css样式代码，那么元素会启用哪一个css样式？浏览器根据权值来判断使用哪种css样式，使用权值高的css样式。...因此一个元素（盒子）实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。...盒模型–填充 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也分为上右下左（顺时针）。...:10px 20px;} 盒模型–边界 元素与其他元素之间的距离可以使用边界（margin）来设置，边界也分为上右下左（顺时针）。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终定位于浏览器窗口内视图的某个位置，不会受文档流动影响

    1.2K40

    35+，如果面试让我写红黑树！那我走吗？

    raw=true" width="400px">div>若任意节点的左子树不空，则左子树上所有节点的值均小于它的根节点的值；若任意节点的右子树不空，则右子树上所有节点的值均大于它的根节点的值；任意节点的左...raw=true" width="400px">div>待删除节点64，含有双子节点，则需要根据第一个右子节点查找最小左子节点。从89到72，如果有比72还小的左子节点，继续排查。...通过节点4拿到父节点2和右子节点5，把父节点2和右子节点5建立关联节点5的左子节点，相当于是大于4小于4的那么一个值，只不过这里不体现。那么这个节点4的左子节点，应该被迁移到节点3的右子节点上。...通过节点3拿到父节点4和左子节点2，把父节点7和左子节点2建立关联节点2的右子节点，相当于是大于2小于3的那么一个值，只不过这里不体现。那么这个节点2的右子节点，应该被迁移到节点3的左子节点上。...右旋之所以会有左旋 + 右旋，是因为一次右旋操作没法平衡树高，而这种树的不平衡节点的左子节点的右子节点过长，所以要把不平衡节点的左子节点向左旋转一次，之后再进行右旋操作。

    35510

    CSS入门指南-4：页面布局

    这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。...，中栏变窄，左栏和右栏宽度不变。...包围左栏和中栏的两栏外包装上210像素的负右外边距，会把右栏拉回article元素右外边距（在两栏外包装内部右侧）创造的空间内。...中栏aticle元素的宽度是auto，因此它仍然会力求占据浮动左栏剩余的所有空间。可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。...你需要设置每一列的宽度 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙 特别是第三条，如果我们不做任何修改，两个 block 之间会存在空格，像这样： ?

    2.2K10

    前端学习(13)~css学习(七)：浮动

    从HTML的角度来讲，标签分为： 文本级标签：p、span、a、b、i、u、em。 容器级标签：div、h系列、li、dt、dd。 PS：为甚么说p是文本级标签呢？...性质4：收缩 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。...iv本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩 浮动的补充（做网站时注意） ? 上图所示，将para1和para2设置为浮动，它们是div的儿子。...也让浮动之间，互不影响呢？ 这个时候，我们可以使用clear:both;这个属性。如下： ? clear:both; clear就是清除，both指的是左浮动、右浮动都要清除。...顺便普及一下知识，text-align还有： text-align:left; //没啥用，因为默认居左 text-align:right; //文本居右 善于使用父亲的padding，而不是儿子的

    91710

    CSS

    margin：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 　　...摄像，当我们上下排列一系列规则的块级元素（如段　　　　落P）时，那么块集元素之间应为外边距重叠的存在，段落之间就不会产生双倍的距离。...这里的靠左、靠右是说页面的左、右边缘。 如果我们把div2采用右浮动，会是如下效果： ?...由于是左浮动，左边靠近页面边缘，所以左边是前，因此div2在最左边。 假如把div2、div3、div4都设置成右浮动，效果如下： ? 道理和左浮动基本一样，只不过需要注意一下前后对应关系。...由于是右浮动，因此右边靠近页面边缘，所以右边是前，因此div2在最右边。 假如我们把div2、div4左浮动，效果图如下： ?

    2K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券