一、网页布局本质-365bet线上平台-365bet线上平台-365哪个才是真的-365bet体育投注

文章目录

一、网页布局本质二、盒子模型三、盒子边框 Border1、CSS 2.0 文档查询2、边框设置语法3、边框设置综合写法一、网页布局本质构建一个网页 ,

首先 , 创建盒子模型 , 设置盒子的大小和摆放位置 , 下图中红色矩形框就是盒子模型 ;然后 , 将文本 , 图片 , 链接 , 表单等网页元素 , 按照一定的样式 , 填充进盒子中 , 就形成了我们看到的网页 ;盒子中还可以嵌套若干盒子 ;

二、盒子模型HTML 的一个布局可以看做一个矩形的盒子模型 , 该盒子模型是一个用于容纳标签元素的容器 ;

盒子模型组成 : 由内到外顺序如下 :

内容 Content : 下图中内容为 100 x 100 像素的元素 ;内边距 Padding : 内边距 Padding 位于边框与内容之间 ;边框 Border : 边框包裹内边距 , 在外边距与内边距之间 , 边框 1 像素 ;外边距 Margin : 最外层元素 , 与其它盒子的距离 ;三、盒子边框 Border1、CSS 2.0 文档查询在 CSS 2.0 手册中 , 搜索 border , 可以查询到盒子边框相关的文档 ,

文档中可以查询到边框的详细细节 :

2、边框设置语法边框设置语法 :

设置边框宽度 : border-width 属性值为像素值 ;代码语言：javascript复制 border-width: 10px;设置边框样式 : border-style 属性值设置边框样式 , 可设置的值由如下选择 : none : 默认选项 , 忽略边框宽度 ;solid : 设置实线边框 ;dashed : 设置虚线边框 ;dotted : 设置点线边框 ;代码语言：javascript复制 border-style: solid;设置边框颜色 :代码语言：javascript复制 border-color: red;代码示例 :

代码语言：javascript复制

边框

效果展示 : 下图是边框样式-点线 ;

边框样式-虚线 :

边框样式-实线 :

3、边框设置综合写法盒子边框设置综合写法 : 在 border 属性后设置边框宽度边框样式边框颜色三个值 , 使用空格隔开 , 这三个值没有顺序 ;

代码语言：javascript复制border : border-width border-style border-color 之前的边框需要写 3 行代码 , 设置 3 个属性 ,

代码语言：javascript复制 /* 边框宽度 4px */