CSS文字的居中盒子模型

垂直居中：

文字本身具有行高，并且是居中的强行改变文字的行高字体仍然是在居中状态的，当行高变大时候font-size 并没有变化，所以就是居中的。

CSS的选择器的优先级：

行内（样式style）选择器--->ID选择器#--->类选择器----->元素选择器div{}

类选择器的就近原则。

CSS盒子模型：

盒子模型分为标准盒模型和怪异盒模型；

内外边距 padding + margin

padding top

padding right

padding bottom

padding left

padding ； 10px 20px 20px 10 px 上右下左的顺序

margin是控制元素块移动的；

下面；

①嵌套的div中，外部div设定了标签box-sizing:border-box，其不随内部div的padding（内边距）变化而变化；

② margin（外边距）控制着元素块的位置和移动，指定margin-top：50px,测了下是正确的；

附上代码；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内外边距</title><style type="text/css">/*当内边距增大后，会把盒子撑大，若不想让盒子变大设置box-sizing:border-box*/.father {width: 150px;height: 150px;background-color: hotpink;padding: 10px 20px 20px 30px; /*中间不需逗号*/box-sizing: border-box;}.son {width: 150px;height: 150px;background-color: pink;}/*外边距控制着 元素块的移动*/.margin {width: 200px;height: 200px;background-color: green;margin-top: 50px;/* 和下面一行可以更改为  margin：50px auto  *//*margin: 0 auto;*/ /*水平居中*/}</style>
</head>
<body>
<!--内边距 padding -->
<div class="father"><div class="son"></div>
</div>
<!--外边距 margin 中特殊取值 margin:0 auto 让一个固定大小的元素块水平居中 -->
<div class="margin"></div></body>
</html>

CSS文字的居中盒子模型相关推荐

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

CSS文字的居中盒子模型

CSS文字的居中盒子模型相关推荐

最新文章

热门文章

CSS文字的居中 盒子模型

CSS文字的居中 盒子模型相关推荐

最新文章

热门文章

CSS文字的居中盒子模型

CSS文字的居中盒子模型相关推荐