<强> 网络前端技术分享 <强> <强> css盒模型
<强> 学习目标
-
<李>
1、认识盒子模型
李
<李>
2盒子模型的组成部分
李
<李>
3,学习盒子模型的相关元素填充
李
<强>
概念:盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
盒模型的组成:边框,边界/边距,补白/填充,内容区。
<强>
-
<李>
-
<李>
<强>
李
<强> 说明：
填充:填充,在设定页面中一个元素内容到元素的边缘(边框)之间的距离。也称补白或填充。
<强> 用法:
1)用来调整子元素在父元素中的位置。
注:填充属性需要添加在父元素上。
2)填充值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的填充属性值
<强> 属性值的4种方式:
四个值:上右下左{填充:0 px 0 px 0 px 40 px;}
三个值:上左右下{填充:10 px 20 px 30 px;}
二个值:上下左右{填充:10 px 20 px;}
一个值:四个方向填充:2 px;/*定义元素四周填充为2 px */
说明:可单独设置一方向填充,如:上方向padding-top: 10 px;右方向padding-right: 10 px;下方向padding-bottom: 10 px;左方向padding-left: 10 px;
-
<李>
-
<李>
<强>
李
<强> 说明：
边界:保证金,在元素外边的空白区域,被称为边距/边界只,,,,,”属性值的用法同上”
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界
<强> 属性值的4种方式 ：
四个值:上右下左
三个值:上左右下
二个值:上下左右
一个值:四个方向保证金:2 px;/*定义元素四边边界为2 px */
定义元素上,下边界为2 px,
说明:可单独设置一方向边界,如:margin-top: 10 px;
注:/*上下边距重叠,左右边距相加*/
<强>
宽=左+右边界左右填充+宽度,
高=上+下边界上下填充+高度,
例如:一个盒子的边界为1 px,填充为10 px,内容的宽为200 px,高为50像素,
宽=边界* * 2 + 2 +填充内容。宽度=1 * 2 + 10 * 2 + 200=262 px,
高=边界* * 2 + 2 +填充内容。身高=1 * 2 + 10 * 2 + 50=112 px,
怪异盒模型/IE盒子模型组成:保证金+内容区
宽:宽度;
高:高;
<强>
<强> ,
一个标记可以设置多个类名
语法:& lt;标记类=懊?,,名称2,,名称3“;祝辞& lt;/标记在
？ 版权(圈C)
