盒子模型（CSS重点）

一.css三大模块，盒子模型，浮动，定位
1.所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
2.文字相当于牛奶，把它放进容器，也就我们的盒子。
3.万物皆是盒子
二.看透网页布局的本质
CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。
三.盒子模型（Box Model）
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
四.盒子边框（border）
*盒子应用于ie6以上，ie5的略过
语法：
border : border-width || border-style || border-color
border: 1px solid red;
边框样式用于定义页面中边框的风格，常用属性值如下：solid(实线) || dashed(虚线)
边框设置顺序：border: 1px 2px 3px 3px 上右下左
五.圆角边框(CSS3)
之前的世界只有矩形，学了这个就不只矩形
border-radius(半径): 左上右上右下左下
两个数值时：左上右下，右上左下
六.内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。
1.padding-top:上内边距
2.padding-right:右内边距
3.padding-bottom:下内边距
4.padding-left:左内边距
一个数值时：上下左右（全部）
两个数值时：上下，左右
三个数值：上，左右，下
四个数值：上右下左（单个）
七.外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
1.margin-top:上外边距
2.margin-right:右外边距
3.margin-bottom:下外边距
4.margin-left:上外边距
5.margin:上外边距右外边距下外边距左外边
取值顺序跟内边距相同。
1.外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素。
2. 盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
2.文字盒子居中图片和背景区别
1.文字水平居中是 text-align: center
3. 盒子水平居中左右margin 改为 auto
4. 插入图片我们用的最多比如产品展示类
5. 背景图片我们一般用于小图标背景或者超大背景图片
background-position: center center;
3.外边距合并
外边距塌陷：
当上下相邻的两个块级元素相遇时，他们之间的垂直间距不是top，bottom的和，而是两者的较大者，相邻块元素的垂直外边距的合并
解决方案：把较大值改成期望的值（无直接解决办法）
嵌套块级元素垂直外边距的合并
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，需要清除元素的默认内外边距：
八.content宽度和高度
1.使用宽度属性width和高度属性height可以对盒子的大小进行控制。
2.width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
3.符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
外盒尺寸计算（元素空间尺寸）
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
内盒尺寸计算（元素实际大小）
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
注：
1.宽高值用于块级元素，对行内无效
2.计算盒子模型总高度，还应考虑外边距塌陷问题
3.如果一个盒子没有给定宽度高度，padding不会影响盒子大小
九.盒子模型布局稳定性
什么用外边距，什么时候用内边距。他们可以混用，那个方便用哪个按照稳定性来分：
width>padding>margin
1.margin由外边距合并的问题，还有ie6margin 加倍，所以最后使用
6. padding 会影响盒子大小，需要计算盒子大小，其次使用
7. widtn稳定性最高，宽度剩余法，高度剩余法（内容放到盒子的一边，将另一边留空）

十.CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
1.content-box: Element Width = content width + padding + border （Width为内容宽度）
2.border-box: Element Width = content width（Width为内容宽度）(padding和border包含进width)
面试常考：
content-box：优先保证内部内容所占区域不变，盒子的大小发生改变
border-box：优先保证自己盒子所占的大小不变，对内容进行压缩
十一.盒子阴影类似文字阴影
语法格式：box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；
1.前两个属性必须写，后面的可以省略
2.外阴影(outset)默认值, 内阴影 inset

盒子模型（CSS重点）相关推荐

Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...
php盒子模型,CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
CSS——CSS盒子模型（重点※）
是你的温柔盒子综合训练链接导论看透网页布局的本质盒子模型(Box Model) 盒子边框(border) 盒子边框写法总结表表格的细线边框圆角边框(CSS3) 内边距(padding) 外 ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
php盒子模型,CSS的盒子模型介绍
一.margin与padding的区别: 当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图: 这里单独地把一个盒子拿出来,就会发现由外边距.边框.内边距和内容四部分构成 ...
深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子. 哪些因素控制了这些 ...
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
css层叠样式表盒子模型,CSS层叠样式表-盒子模型
盒子模型作用:实现网页布局,在网页中画盒子组成: 边框 border 内边距 padding 外边距 margin 1.边框 .test{ width: 300px; height: 300px; ...
三、CSS重要的盒子模型知识总结（中篇）
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型文章目录边框属性什么边框? 边框属性的格式连写(分别设置四条边的边框) 内边距什么是内 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...

盒子模型（CSS重点）

盒子模型（CSS重点）相关推荐

最新文章

热门文章