css笔记（一）——文档流和盒子

最新推荐文章于 2025-04-27 23:28:29 发布
最新推荐文章于 2025-04-27 23:28:29 发布
阅读量938 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css 文档流 盒模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kyfxbl/article/details/24436493
本文介绍了HTML文档流的概念，解析了DOM中block盒子与span盒子的区别，并详细解释了盒子模型的组成部分，最后概述了CSS选择器的主要类型。

1、html文档流，默认从上往下，从左往右地解析

2、DOM由各种盒子组成，大致上分为block盒子和span盒子

block默认会把宽度撑满自己的父元素；span盒子正好相反，会尽量把宽度缩紧到刚好够包裹内容

盒子的width由4个部分组成：content，padding，border，margin

3、css选择器，主要有3种，基于文档结构，基于id和class，基于property

CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2543
行内元素
CSS学习笔记六——元素显示类型
weixin_43328954的博客
01-27 825
元素显示类型 一、块元素 1. 块元素在网页中以块的形式显示，即矩形区域显示； 2. 默认情况下，块元素独占一行，且按顺序自上而下排列； 3. 块元素可自定义宽高； 4. 块元素一般作为其他元素的容器，可以容纳其它内联元素和块元素，这种容器也可称为盒子 5. 块元素会默认添加 display：block 属性值，但 li 标签会默认添加 display：list-item 属性值，表示让该元素显示为列表类型，通常该属性值也归类在块元素中； 6. 注意 p 标签中可以放文本，但不能放块元素；
文档流、盒子模型、内边距、外边距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外边距的折叠、行内元素的盒模型（萌新必看，大佬随便）
qq_45623543的博客
11-07 2690
《个人学习笔记十四》 文档流（normal flow） 网页是一个多层的结构，一层摞着一层 通过css可以分别为每一层来设计样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层是文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 对于我们来说文档流主要有两个状态 在文档流中 不在文档流中（脱离文档流） 元素在文档流中有什么特点： 块元素 块元素会在页面独占一行（自上而下垂直排列） 默认宽度是父元素的全度（会把父元素撑满） 默认高度是呗内容撑开的（子元素） 行内元素
让盒子脱离基本文档流的情况（position:absolute和float）
XiaopinOo的博客
11-15 1739
让一个盒子脱离基本文档流有三种情况： position定位取值有五种: absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位 fixed:生成绝对定位的元素，相对于浏览器窗口进行定位 relative:生成相对定位的元素，相对于其真长位置进行定位 static:默认值，没有定位，元素出现在正常的流中 inherit:规定应该从父元素集成position
html 盒子模型基础（文档流，浮动，页面布局）（五）
余正源的博客
02-07 6118
1.文档流： .box1{ margin-top: 500px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; } span{ backgro
对于使用CSS样式使得盒子模型脱离文档流的讲解
luolvzhou的博客
09-26 886
html中有块级元素(display: block)和内联元素(display: inline) 或者说 display: inline-block; 在正常的文档流中，如果说一个父盒子中包含两个div的子盒子，例如： <div class="fath"> <div class="son1"></div> <div class="son2"></div> </div> <style> .fath { w..
html&css学习笔记——CSS2基础
weixin_61182303的博客
11-03 1243
的位置，创建一个子元素（必须用 content 属性指定内容）。3.3选择器的优先级(权重)
CSS学习笔记12——CSS3新增特性
最新发布
green_pine_的博客
04-27 1081
CSS3新增特性
CSS笔记 —— 盒子模型
一纸春秋的博客
11-07 408
本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等。 全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。 以下是视频链接 https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0 W3school官网链接 https://www.w3school.com.cn/css/index.asp 目录问题引入模拟网站的登录块进
CSS3笔记——弹性盒子
weixin_38335055的博客
03-06 710
盒模型的重要性——其功能的强大与否决定了页面布局是否简洁 –>影响HTML结构 –>影响CSS和JS 注：本页中的代码，.wrapper–>父级容器盒子，.content–>盒子内容子项 一、IE6混杂模式(怪异模式)的盒子 一般的盒子（W3C标准盒模型——W3C standard mode）： boxWidth = width + border2 + padding2; ...
CSS学习笔记四——盒子模型
weixin_43328954的博客
01-27 682
一、盒子模型 内边距 padding 属性，设置元素内容与边框之间的距离，即内边距，如：padding: 20px。该属性会改变盒子占用的位置。 取值： （1）1个值，4个方向内边距一致 （2）2个值，上下一致，左右一致 （3）3个值，按照上 左右 下的顺序设值 （4）4个值，按照上 右 下 左的顺序，顺时针设值
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS提供了多种布局方式，包括流体布局（使用百分比定义元素尺寸，自适应屏幕大小）、定位布局（使用`position`属性，如`static`、`relative`、`absolute`和`fixed`）、Flex布局（弹性盒子，适用于一维布局）以及Grid...
CSS3知识点笔记————基础（五星）
斗师——Ace
10-15 731
添加小程序，兑换各种视频教程/数据资源。 1.作用：美化和修饰HTML。又叫层叠样式表，样式表，级联样式表。 2.优点： 2.1可以更好的将格式与结构分离。 2.2可以更好的控制页面的布局。 2.3可以制作体积更小，下载更快的网页。 2.4可以将多个网页同时更新，比以前更快更容易。 3.使用CSS的三种方式： 3.1内联式：...
用CSS实现高度宽度固定比例，宽度不固定
kyfxbl
11-06 6454
今天学到一个很不错的CSS技巧：Zihua Li
用inline-block实现两列布局，在手机浏览器上有兼容性问题
kyfxbl
11-10 2173
下面这个DOM结构
inline-block的1px问题
kyfxbl
10-25 1716
下面这个dom结构：
用CSS实现超长的字符变成省略号
kyfxbl
11-10 1631
xxxxxxxx 通过以下css，可以令div中的超长的字符变成省略号
CSS实现平铺滚动效果
kyfxbl
11-13 1404
效果： 主要就是在父容器上设置
父容器height不确定的情况下，实现子元素垂直方向自适应居中
kyfxbl
11-13 1258
效果图：
Windi CSS快速入门：文档、安装和开发指南
文档网站提供了关于如何安装、配置和使用Windi CSS的详细指南，帮助前端开发者更好地理解和应用这一工具。 开发指南中提到，要开始使用Windi CSS，首先需要安装其依赖项。这可以通过npm命令实现，即运行 'npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值