盒子模型

一个标签就是一个盒子，网页布局看盒子的摆放位置。

盒子包括什么？

边框（border）内边距（padding)外边距（margin)内容（content）；

边框

border的属性；粗细风格颜色border-width，border-style，border-color

border-style:solid(实线）dashed（虚线）dotted(点线）none（默认值没有边框）

可以简写为：border:width style color;

按方向：border-top:width

合并border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子的实际大小；

边框会额外增加盒子的大小，所以测量盒子的时候不用加上边框。

内边距

padding边框与内容之间的。

            padding-left: 20px;padding-top: 30px;/* 复合属性 *//* 上下左右 */padding: 5px;/* 上下5px左右10px */padding: 5px 10px;/* 上、左右、下、 */padding: 5px 10px 20px;/* 上右下左 顺时针 */padding: 5px 10px 20px 30px;

内边距会影响盒子的实际值。

- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

要想让与效果图保持一致，就让width/height减去内边距。

外边距

margin；保持盒子与盒子之间的距离。

它能让两个块级盒子水平居中：

margin:auto;

margin:0,auto;

margin:20px auto;

margin-left: auto; margin-right: auto;

这是块级元素，行内块元素为text-align:center;

1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

方法：尽量给一个盒子加margin。

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

方法

- 可以为父元素定义上边框。

- 可以为父元素定义上内边距。

- 可以为父元素添加 overflow:hidden。

怎么清除默认的边距？

类似于图上这种。

解决方法

  *{margin: 0;padding: 0;}

css的三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。

解决方法：就近原则，哪个近就选哪个样式。

继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子代可以继承父代的样式。

行高的继承性：

body {font:12px/1.5 Microsoft YaHei；}

- 行高可以跟单位也可以不跟单位

- 如果子元素没有设置行高，则会继承父元素的行高为 1.5

- 此时子元素的行高是：当前子元素的文字大小 * 1.5

- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

- 选择器相同，则执行层叠性

- 选择器不同，则根据选择器权重执行

通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10c, id选择器 100, 行内样式表为 1000, !important 无穷大.

简单来说，范围越小，权重越大。

id选择器>类选择器>基础选择器。

前端日记：

我觉得自己不够厉害，好累，时间不在我手上。

css前端日记之盒子模型-----一起去未来相关推荐

web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
html盒子模型多个盒子,css如何使用不同盒子模型
css如何使用不同盒子模型 css使用不同盒子模型可以通过css属性box-sizing来设置,当它的值为content-box时,是标准的盒子模型:当它的值为border-box时,是IE盒子模型: ...
html如何设置浮动的盒子,CSS的浮动以及盒子模型
原标题:CSS的浮动以及盒子模型 "没错,就是他." 今天我们来了解一下浮动我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动这 ...
CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...

css前端日记之盒子模型-----一起去未来

盒子模型

盒子包括什么？

边框

内边距

外边距

css的三大特性

层叠性

继承性

优先级

css前端日记之盒子模型-----一起去未来相关推荐

最新文章

热门文章