菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS基础-陈旭辉-20230418 [打印本页]

作者: 陌殇 时间: 2023-4-18 22:33
标题: CSS基础-陈旭辉-20230418
一、学习内容

盒子模型：就是将HTML页面中的布局元素看做是一个矩形的盒子，盒子的内容包括边框、外边距、内边距和实际内容。
                           border属性可以设置边框样式，属性值由三部分组组成：边框的粗细、边框的样式、边框的颜色（语法：border: border-width border-style border-color;）border-style常用属性：solid（实线、最常用）、dashed（虚线）、dotted（点线）。使用border-collapse:collapse；来设置表格的细线边框，collapse是合并的意思。边框会影响盒子的实际大小，加了边框盒子会变大，我们可以在设置盒子大小的时候将边框的宽度加上，即可。
内边距：padding属性可以控制内边距，就是边框和盒子内容之间的距离（1.padding-left  左内边距2.padding-right 右内边距3.padding-top 上内边距4.padding-bottom 下内边距）。
复合属性：1.padding: 10px;  上下左右内边距都是10px 2.padding: 10px 20px; 上下内边距是10px 左右内边距是20px 3.padding: 10px 20px 30px; 上内边距是10px 左右是20px 下是30px 4.padding: 10px 20px 30px 40px; 上右下左内边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始
内边距的特殊情况：没有宽度的盒子，padding不会撑开盒子的宽度
box-sizing（怪异盒模型）：1.content-box（默认值）：默认的盒子模型的设置，盒子的整个大小是宽度+padding+border
                                                            2.border-box：怪异盒模型，盒子宽度和高度设定好之后不会随着padding和border的变化而变化，前提是padding和border的值不要超过盒子的大小。
外边距：margin属性来控制盒子的外边距，就是盒子和盒子之间的距离（1.margin-left 左外边距2.margin-right 右外边距3.margin-top 上外边距4.margin-bottom 下外边距）
复合属性：1.margin: 10px;  上下左右外边距都是10px 2.margin: 10px 20px; 上下外边距是10px 左右外边距是20px 3.margin: 10px 20px 30px; 上外边距是10px 左右是20px 下是30px 4.margin: 10px 20px 30px 40px; 上右下左外边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始）

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)