CSS进阶（3）- 布局

最新推荐文章于 2024-06-19 16:19:47 发布
最新推荐文章于 2024-06-19 16:19:47 发布
阅读量233 收藏 1
点赞数
分类专栏： web前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_43416592/article/details/126472760
版权

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

文章目录

布局

多栏布局

两栏布局

<!-- 
侧边栏浮动
1.主区域定宽 主区域使用float
2.主区域不定宽 主区域使用overflow:hidden; -->

三栏布局

<!-- 
两边的侧边栏浮动，写完后再写主区域 -->

等高布局

  1. css3的弹性盒
  2. JS控制
  3. 伪等高

元素书写顺序

先写浮动元素，再写主区域

后台页面的布局

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码
Brisa56
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css background-attachment属性进阶
09-24
### 3. `local` 使用`background-attachment: local`时，背景图像将相对于元素的内容固定。这意味着如果元素有滚动条，背景图像会随内容滚动。这种情况常用于内嵌可滚动区域，比如滚动列表或对话框，背景图会随着...
CSS进阶书籍 网上基本没有书签，我的有
11-16
3. 综合实践 我们与“CSS禅意花园”的创建者Dave Shea取得了联系，获得了使用禅意花园作品的授权。本书会结合禅意花园网站中的一些精彩案例，给出分析和说明。最后将综合前面所学，从创意、拍摄素材到实际完成的全...
css 的页面布局
健康平安的活着的专栏
05-23 1503
一 页面布局 1.1 页面布局 1 <div>块元素在没有任何布局属性作用时，默认排列方式是换行排列。 2.<span>: 内联元素的默认排列：在没有任何布局属性作用时，默认排列方式是在同行排列。 3.浮动元素：即float取3个值： auto、left、right，使用浮动之后，原本需要换行显示的块元素，实现了并排列的效果。 4.在css中，可以用text-decoration属性来控制文字的修饰样式。 5.在css中，定义页面中内容显示方式，display属性和vis
CSS基础（10）- 常规流
m0_43416592的博客
08-21 998
本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。
学习HTML和CSS的扩展部分
weixin_50948265的博客
03-03 253
扩展部分浮动补充body背景行高的取值参考线-深入理解字体文字font-size行高vertical-align可替换元素和行块盒的基线svg怎么使用书写svg代码矩形：rect圆形：circle椭圆：ellipse线条：line折线：polyline多边形：polygon路径：path例子，画太极数据链接如何书写意义base64 浮动补充 浮动盒子的顶边不得高于上一个盒子的顶边 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动 body背景 画布 c
【html+css】袁进 渡一
daban2008的专栏
10-23 457
元素增加了css属性，使显示代码中的空格样式 3. 元素的包含关系 以前，块元素可以包含行级元素，行级元素不能包含块级元素（a元素除外）现在，元素的包含关系由元素的内容类别决定相对于父元素的字体大小，每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，则使用基准字号ID选择器（#）元素选择器（元素名）类选择器（.）通配符选择器（*）属性选择器（[href]或[href=“”]，包含某个属性或某个属性值等于多少）伪类选择器（a:link{}，a:visited{}，a:hover
浏览器事件循环
ccleidei的博客
03-21 165
Chrome 事件循环
CSS进阶3---盒模型
乱世刀疤
02-27 829
说实话时隔十几年再来写这些简单的东西，感觉有点太弱鸡。这里只是分享给初学者最底层最基础的知识点，所有的高大上都是由基础一点点堆积起来的。同时作为一个全栈工程师，应该是什么都精通才行。 废话不多说，直接上代码，仅用于演示一个盒子，所以特别简单。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
css3 box-shadow阴影(外阴影与外发光)图示讲解
09-27
CSS3的`box-shadow`属性是一个非常强大的工具，用于为元素添加阴影效果，包括外阴影和内阴影。这个属性能够显著提升网页设计的视觉吸引力，同时保持代码的简洁性。以下是对`box-shadow`属性的详细说明： **基础概念...
【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
03-03
其中头部对整个mobile的设计至关重要，而且坑也很多：①一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多②在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview...
CSS-Notes:CSS相关综合专栏。 计划包含四个方面： ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧
05-09
CSS进阶 专题总结-兼容性问题 专题总结-居中问题 专题总结-常用布局 专题总结-回流重绘 技巧总结-幽灵空白节点 专题总结-移动端1px问题 技巧总结-检测浏览器对CSS属性的支持 CSS面试[更新中] 这个分类中只会写一些...
CSS：定位
雷爷的博客
09-03 181
定位 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动：float 定位：position 定位：手动控制元素在包含块中的精准位置 涉及的CSS属性：position position属性 默认值：static，静态定位（不定位） relative：相对定位 absolute：绝对定位 fixed：固定定位 一个元素，只要position的取值不是static，认为该元...
CSS 修改鼠标图标样式
JiuYux的博客
06-18 286
自定义的鼠标图标，推荐使用ico或cur格式，png也可以。
CSS选择器
Joy_Huu的博客
06-18 336
CSS选择器是用于在HTML文档中定位并应用样式的强大工具。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 686
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
有路网轮播图css实战
最新发布
douyh的专栏
06-19 247
有路网轮播图css实战
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
一起coding，一起嗨。
06-15 480
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
css记录：三维变换之transition
计算机图形学
06-19 391
在CSS中，transition属性用于在元素从一个样式状态过渡到另一个样式状态时添加动画效果。当用于三维变化（即与transform属性结合使用时），transition可以创建平滑且吸引人的3D动画。
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值