盒子模型-笔记

最新推荐文章于 2024-03-14 13:06:58 发布
原创 最新推荐文章于 2024-03-14 13:06:58 发布 · 223 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xudun

=========================

    2017-3-1

=========================

网站

            项目

                       images

                       css

                                  base.css
          layout.css
           index.css

           

浮动

脱离文档流
宽度不够会掉下来
行内元素支持宽高
块元素会根据内容撑开宽高
文本环绕


***用到浮动必须清浮动


不要用inline-block，用浮动


定位

相对定位
根据自己定位
不会脱离文档流
绝对定位
脱离文档流
根据父级定位（父级没有定位，找父级的父级，一直找到body）
行内元素会变成块
块元素宽高会根据内容撑开


层级

后写的元素变先写的元素层级高
只对定位元素生效
最大值2的32次方
别用负值




嵌套规则

行内
i b strong em span a


只能嵌套行内元素（自己相同的标签除外）
a可以嵌套所有标签
块
div p ul li ol dl dt dd h1 - h6


可以嵌套所有标签
p只可以嵌套行内


XHTML规范 严格的HTML
img标签必须有alt
双标签必须有结束标签
单标签必须合理闭合<img />
标签名属性名必须小写
引号都是双引号
所有符号必须英文 

盒子模型学习-尚硅谷HTML源代码
weixin_58264104的博客
06-30 3701
盒子模型学习-尚硅谷HTML源代码
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2533
行内元素
CSS---盒子模型笔记
qq_43766304的博客
03-06 206
写给自己：笔记在代码注释中，把上面的图案记下来，才能学好盒子模型。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
盒子模型（CSS笔记）
qq_38350708的博客
04-09 249
在这里插入代码片
HTML 盒子模型（基础笔记）
weixin_46685628的博客
04-23 343
-内容区（content） 内边距（padding） 边框（border） 外边框（margin） 内容区主要用 width /height 设置背景颜色background-color:"#bfa"; 设置边框 设置边框必须指定三个样式 border-width(边框的宽度) berder-color（边框的颜色） berder-style（边框的样式） *可以后面跟四个值（上右下左）三个值（上...
笔记盒模型 dom
shy_manOvO的博客
06-30 125
#盒模型每一个标签都是一个矩形，像一个盒子，所以html页面的布局可以理解为多个盒子组合嵌套排列而成。盒模型 widthheghtpadding 内边距 1. 1到4个值 2. 顺时针赋值，从上面开始 （上 右 下 左） 3. 增加盒模型面积border 边框 1.复合属性{ boder-width border-style （solid，dashed， dotted，double） border-color margin 外边距 1. 1到4个值 2. 顺时针赋值 3.注意 叠压现象： 常态下，兄弟标签
盒子模型笔记
qq_41426442的博客
07-13 215
1 、盒子模型的组成：border、content、padding、margin border 边框（边框宽度 样式 颜色） border-width：50px; border-style ：solid ; (solid:实线边框 dashed：虚线边框 dotted：点线边框、框 重点记忆这三个即可 ) border-color：red; *** 边框的复合写法：border：50px solid red ; *** 边框分开写法：top /bottom/left/right..
Css盒子模型，笔记资料，可以查看页面效果
08-09
笔记资料
前端开发_CSS_盒子模型_学习笔记_1741874152.zip
03-16
前端开发_CSS_盒子模型_学习笔记文件名表明，这是对盒子模型学习的详细记录，可能包含了理论知识、实例代码和常见问题解答等。而Blog-master表明这是一个博客或网站的主目录，可能包含了关于CSS盒子模型的文章或讨论...
超详细的学习笔记：CSS盒子模型（附代码示例）
lbcbjtlhmjq的博客
07-11 2776
盒子的概念1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局2.浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子盒子模型CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域 (padding) 、边框区域(border) 、外边距区域(margin)构成，这就是盒子模型记忆:可以联想现实中的包装盒。
CSS盒子模型
m0_59030524的博客
11-17 300
1.网页本质 网页布局过程： 准备网页元素，网页元素基本都是盒子 box 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里放东西。 本质：利用 CSS 摆盒子。 2. 盒子模型（Box Model）组成 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框（border）、外边距（margin）、内边距（padding）和实际内容（content）。 2.1 边框（border） border 可以设置元素边框。边框有三个组成：border-wid...
CSS盒子模型笔记
weixin_46376309的博客
04-09 297
五、盒子模型 1、简介 盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性： ·width 宽度 ·height 高度 ·border 边框 ·padding 内边距 ·margin 外边距 2.盒子模型 2.1 border 表示盒子的边框 分为四个方向： 上top、右right、下bottom、左left border-top、border-right、bord...
盒子模型（自学笔记）
zmhxuexi的博客
07-28 247
看透网页布局的本质 把网页元素比如图片文字等等，放入盒子，然后利用css摆盒子的过程，就是网页布局 盒子模型 盒子边框（border） 属性 作用 值 border-width 边框粗细 像素值 border-style 边框样式 solid(实线)；dashed（虚线）；dotted(点线) border-color 边框颜色 red;blue等 连写一般按照以下顺序书写： border:width style color; 在border后加入方位就可以指定单边的边框样式如
盒子模型笔记整理
m0_74359055的博客
08-09 288
​ 如图，盒子模型包括中间黄色区域的内容，内边距（padding），边框（border），外边距（margin）。
盒子模型-学习笔记
weixin_33970449的博客
01-17 143
内容区 width和height这两个属性可以指定盒子内容区的高度和宽度。 width和height这两个属性是针对内容区而言，并不包括padding部分。 深入border “border: 0”和“border: none”的区别： ①性能性： “border: 0”表示把border定义为0px。虽然0px看不见，但是浏览器依然会对border进行 渲染，渲染之后，实际上是一个像...
CSS+DIV布局 盒子模型（笔记）
学习笔记
09-08 914
盒子模型组成部分 一个盒子可以分成几个部分 - 内容去 content - 内边距 padding - 边框 border - 外边距 margin 盒子的大小=内容区+内边距+边框 高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的 - 也就是子元素多高，父元素就多高， - 但是为子元素设置浮动以后。子元素会万千脱离文档流， - 此时将会导致子元素无法撑起父元素的高度，导致父...
CSS盒子模型（学习笔记）
m0_68637281的博客
03-14 617
1）全局选择器 *{}2）元素选择器 div{}3）类选择器 .className{}4）ID选择器 #idName{}
css盒子模型笔记
最新发布
05-29
### CSS 盒子模型学习笔记 CSS 盒子模型（Box Model）是 CSS 中的核心概念之一，用于描述 HTML 元素的布局和结构[^1]。每个 HTML 元素都被视为一个矩形盒子，这个盒子由内容区域（content）、内边距（padding）、边框（border）以及外边距（margin）组成[^2]。 #### 盒子模型的基本组成部分 1. **Content（内容区域）** 这是盒子中实际显示内容的部分，例如文本或图片。它的尺寸可以通过 `width` 和 `height` 属性来设置[^1]。 2. **Padding（内边距）** 内边距位于内容区域和边框之间，用于控制内容与边框之间的间距。可以通过 `padding` 属性进行设置[^2]。 3. **Border（边框）** 边框围绕在内边距之外，用于定义盒子的边界。可以通过 `border` 属性设置边框的宽度、样式和颜色[^1]。 4. **Margin（外边距）** 外边距位于边框之外，用于控制当前盒子与其他盒子之间的间距。可以通过 `margin` 属性进行设置。 #### 盒子模型的两种类型 - **标准盒子模型（W3C 盒子模型）** 在标准盒子模型中，元素的总宽度等于 `content width + padding + border + margin`[^1]。 - **IE 盒子模型（怪异盒子模型）** 在 IE 盒子模型中，`padding` 和 `border` 被包含在 `width` 和 `height` 的值内。这种模型在早期版本的 Internet Explorer 中使用。 #### 如何切换盒子模型 通过设置 `box-sizing` 属性，可以切换盒子模型的计算方式。默认情况下，元素使用标准盒子模型，而通过设置 `box-sizing: border-box;`，可以让元素使用 IE 盒子模型。 ```css /* 示例代码：使用 border-box 模型 */ * { box-sizing: border-box; } ``` #### 学习资源推荐 为了更好地理解 CSS 盒子模型，以下是一些推荐的学习资源： 1. MDN Web Docs - [CSS 盒子模型](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) 2. W3Schools - [CSS 盒子模型教程](https://www.w3schools.com/css/css_boxmodel.asp) #### 注意事项 在实际开发中，不同浏览器可能会对盒子模型的实现存在差异。因此，建议始终为项目添加全局样式重置，并统一设置 `box-sizing` 属性以避免兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值