css学习笔记（二）布局属性

已于 2023-09-26 14:56:42 修改
阅读量61 收藏
点赞数
文章标签： css
于 2023-09-26 10:34:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/txmmy/article/details/133299184
版权

官方文档

文章目录

1.元素类别

  • 内联元素：出现在另一个元素旁边的元素
  • 块元素：出现在另一个元素下面的元素

2.布局属性

flx和float:left有何区别？

2.1display

  • 说明
    英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为元素默认为display:inline。如

  • 元素默认为display:block

  • display:flex（弹性布局）

  • display:grid（Gird布局）

2.2 float
2.3 position
2.4 Multi-column layout(多列布局)
踩坑大王
关注
CSS布局学习笔记
sarsuki的博客
01-11 701
在讨论布局时，对我们来说最重要的两个值是 display:flex 和 display:grid。在CSS中实现页面布局的主要方法是设定 display 属性的值。
CSS学习笔记Padding 属性中参数的定义与使用
10-30
此外，`padding`还可以与其他CSS属性如`box-sizing`一起使用，改变元素尺寸的计算方式，实现更多样化的布局效果。 在实际开发中，`padding`的缩写技巧可以帮助我们减少代码量，提高工作效率。例如，如果所有四边的...
CSS学习笔记
u011259405的博客
09-24 1047
自用CSS学习笔记
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1732
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记（flex 伸缩布局 ）
2401_84411018的博客
04-28 908
flex-flow是flex-direction、flex-wrap的简写形式，适用于伸缩容器。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。方向：默认主轴从左向右，侧轴默认从上到下，主轴和侧轴并不是固定不变的，通过 flex-direction 可以互换。最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。min-width：定义最小宽度 max-width：定义最大宽度。
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1395
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS学习笔记(01)flex布局
chensen99的博客
08-26 490
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap。align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸。align-content:设置侧轴上的子元素的排列方式(多行)justify-content:设置主轴上的子元素排列方式。align-items:设置侧轴上的子元素排列方式(单行)
CSS学习笔记：flex布局（弹性布局）
lbcbjtlhmjq的博客
05-27 655
父元素添加display: flex。
HTML、CSS学习笔记小结
这介绍不了我
11-25 594
HTML、CSS学习笔记小结。HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像某东、某宝、某夕夕等网站有很多网页。CSS 是一门语言，用于控制网页表现。
CSS 学习笔记
weixin_42098295的博客
05-06 1278
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS学习笔记（手写版）
07-26
通过本篇手写版CSS学习笔记，我们深入了解了CSS的基础知识、核心布局技术（如Flexbox和Grid）、响应式设计、动画效果以及常用的CSS框架和工具。无论你是初学者还是有一定经验的开发者，都能从中获得宝贵的知识和技巧...
CSS画出三角形的做法
mingangel的博客
10-01 252
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 299
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
最新发布
m0_74012211的博客
10-02 267
CSS 盒子属性
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 326
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值