网站怎么做备案,深圳宝安区属于什么风险区,可以投稿的写作网站,wordpress 读取数据库配置文件1. 盒子模型 盒子模型#xff08;box model#xff09;#xff1a;可以把HTML中所有的元素都理解成盒子#xff0c;用于装内容的容器 目的就是为了将HTML文档中的内容进行归纳整理#xff0c;方便管理#xff0c;从而达到布局的效果 内容区 content 边框 border 内边距…1. 盒子模型 盒子模型box model可以把HTML中所有的元素都理解成盒子用于装内容的容器 目的就是为了将HTML文档中的内容进行归纳整理方便管理从而达到布局的效果 内容区 content 边框 border 内边距 padding 外边距 margin 1. 内容区 content 元素中所有的子元素和文本等都在内容区中排列 内容区的大小使用width和height属性设置 width 设置内容区的宽度 height 设置内容区的高度 2. 边框 border 边框由三个部分组成缺一不可 边框的宽度 border-width 可以分别设置四个边框的宽度 border-top-width border-right-width border-bottom-width border-left-width可以利用border-width属性直接设置四个边框的宽度 border-width: 10px 20px 30px 40px; 上 右 下 左顺时针 border-width: 10px 20px 30px; 上 左右 下顺时针 border-width: 10px 20px; 上下 左右 边框的样式 border-style 可选值 solid 实线 dotted 点状虚线 dashed 虚线 double 双线 可以分别设置四个边框的样式 border-top-style border-right-style border-bottom-style border-left-style可以利用border-style直接设置四个边框的样式 border-style: solid dotted dashed double; 顺时针和border-width一样 边框的颜色 border-color 使用方式与border-width一模一样 边框的简写属性border border属性可以设置边框所有的样式 borderborder-width border-style border-color顺序无要求 border-top border-right border-bottom border-left 3. 内边距 padding 用于设置内容区域边框之间的距离 可以设置四个方向的内边距 padding-top padding-right padding-bottom padding-left注意 设置内边距会影响盒子的大小背景会延伸到内边距 内边距的简写属性 padding可以直接设置四个方向的内边距 padding: 10px 20px 30px 40px; 上 右 下 左顺时针 padding: 10px 20px 30px; 上 左右 下 padding: 10px 20px; 上下 左右 padding: 10px; 上下左右 4. 外边距 margin 用于设置盒子与盒子之间的距离设置外边距并不会影响盒子可见框的大小但是会影响盒子其他盒子的位置 可以设置四个方向的外边距 margin-top margin-right margin-bottom margin-left 注意 盒子的排列是由上到下、由左到右进行排列的。因此改变盒子的上外边距和左外边距 会改变当前盒子的位置改变盒子的下外边距和右外边距会改变其他盒子的位置外边距可以设置负值盒子会向反方向移动 外边距的简写属性 margin 属性可以直接设置四个方向的外边距 margin: 100px 200px 300px 400px; 顺时针使用方式与padding一样 示例如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlebox model/title.box {width: 200px;height: 200px;background-color: #c7edcc;}.box1 {width: 200px;height: 200px;background-color: #c7edcc;/* 边框的宽度 *//* border-width: 10px; *//* border-top-width: 10px;border-right-width: 20px;border-bottom-width: 30px;border-left-width: 40px; *//* border-width: 10px 20px 30px 40px; *//* border-width: 10px 20px 30px; *//* border-width: 10px 20px; *//* border-width: 10px; *//* 边框的样式 *//* border-style: solid; *//* border-top-style: solid;border-right-style: dotted;border-bottom-style: dashed;border-left-style: double; *//* border-style: solid dotted dashed double; *//* border-style: solid; *//* 边框的颜色 *//* border-color: red; *//* border-color: red yellow blue green; *//* 边框的简写属性 *//* border: 10px solid red; */}.box2 {width: 300px;height: 300px;background-color: #c7edcc;border: 1px solid #000;/* 设置四个方向内边距 *//* padding-top: 50px;padding-right: 50px;padding-bottom: 50px;padding-left: 50px; */padding: 10px 20px 30px 40px;padding: 10px 20px 30px;padding: 10px 20px;padding: 10px;}.son {width: 300px;height: 300px;background-color: #fde6e0;}.box3,.box4 {width: 200px;height: 200px;}.box3 {background-color: #c7edcc;/* 设置盒子的外边距 *//* margin-top: 100px;margin-left: 100px;margin-bottom: 100px;margin-right: 100px; */margin: 100px 200px 300px 400px;}.box4 {background-color: #fde6e0;margin-left: -100px;} /headbodydiv classbox/divdiv classbox1/divdiv classbox2div classson/div/divdiv classbox3/divdiv classbox4/div /body/html