![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css布局
夏末_前端有意思
这个作者很懒,什么都没留下…
展开
-
两边宽度固定,中间宽度自适应的几种布局方法
我们在用css设置页面布局的时,归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应,两边固定的布局方法。一、flex弹性盒布局:核心:将父元素设置为弹性盒布局:display:flex;html代码:<div id="father"> <div id="son1"><h3>宽度固定</h3></div&g...原创 2019-04-24 10:41:04 · 3511 阅读 · 0 评论 -
页面缩放时溢出的文字内容隐藏为省略号,应该如何实现?
当我们拉伸网页的时候,如果设置了div宽度自适应,并且希望被挤压的部分内容布局不变的同时,宽度不够的话会被隐藏起来,类似于这种:实现这一效果的css代码:(关键在于 #sidebar_left{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;})这部分内容ht...原创 2019-05-08 09:35:24 · 1282 阅读 · 1 评论 -
块状元素、内联元素、内联-块状元素的区别
块状元素块状元素最大的特点是可以独占一行。div是html中典型的块状元素。我们可以给块状元素设置宽度(width)、高度(height)、外间距(margin)、内间距(padding)。我们在一个html文件里写入块状元素、内联元素、内联-块状元素,并给它们分别设置样式来看一看效果:<!DOCTYPE html><html><head> <...原创 2019-05-06 10:31:09 · 1939 阅读 · 0 评论 -
行内元素和块状元素的水平居中设置
我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。在这个前提下,我们应该怎么设置元素在水平方向上的居中呢?行内元素的水平居中设置行内元素的水平居中有一个通用的方法:通过在其父元素中设置text-align:center来实现:我们给出一个html文件,写入一个div块状元素,包裹一个span内联元素:&l...原创 2019-05-06 11:49:39 · 1243 阅读 · 0 评论 -
【CSS学习总结】两边宽度固定,中间宽度自适应的布局方法
一、圣杯布局中间列的三栏float布局,中间栏放在文档流前面保证最先加载。关键在于如何使中间列的内容不被遮挡。<!DOCTYPE html><html><head> <title>圣杯布局-双飞翼布局</title> <meta charset="utf-8"> <link rel="stylesheet"...原创 2019-05-22 17:26:05 · 622 阅读 · 0 评论