仿网站制作教学视频,微信公众号不能上传wordpress,进网站备案时间,网站开发如何设置背景图片Hi i,m JinXiang ⭐ 前言 ⭐
本篇文章主要介绍HTML中边框样式、内外边距、盒子模型尺寸计算以及部分理论知识 #x1f349;欢迎点赞 #x1f44d; 收藏 ⭐留言评论 #x1f4dd;私信必回哟#x1f601; #x1f349;博主收将持续更新学习记录获#xff0c;友友们有任何问… Hi i,m JinXiang ⭐ 前言 ⭐
本篇文章主要介绍HTML中边框样式、内外边距、盒子模型尺寸计算以及部分理论知识 欢迎点赞 收藏 ⭐留言评论 私信必回哟 博主收将持续更新学习记录获友友们有任何问题可以在评论区留言 目录
⭐一、边框基本样式
1、边框颜色
①、边框颜色概述
②、边框颜色的使用
③、边框颜色图片示例
④、边框颜色代码示例
2、边框粗细(单位像素px)
①、边框粗细概述
②、边框粗细的使用
③、边框粗细图片示例
④、边框粗细代码示例
3、边框样式
①、边框样式概述
②、边框样式的使用
③、边框样式图片示例
④、边框样式代码示例
⭐二、内外边距
1、外边距(单位像素px)
①、外边距概述
②、外边距的使用
2、内边距(单位像素px)
①、内边距概述
②、内边距的使用
⭐三、盒子模型 1、盒子模型概述 2、盒子模型尺寸计算 3、盒子模型尺寸计算的使用 一、边框基本样式
边框基本样式是指在HTML和CSS中设置元素的边框的样式。常见的边框样式包括实线边框、虚线边框、双线边框、边框颜色、边框粗细等。
在CSS中可以使用border属性来设置元素的边框样式。如下
1、边框颜色
边框颜色是指CSS中可以为元素的边框指定的颜色。
①、边框颜色概述
上边框颜色border-top-color颜色;右边框颜色border-right-color颜色;下边框颜色border-bottom-color颜色;左边框颜色border-left-color颜色;四边框同一色border-color:颜色;上下与左右边框颜色border-color上下颜色 左右颜色;上、左右、下边框颜色border-color上颜色 左右颜色 下颜色;上、右、下、左边框颜色(顺时针)border-color上颜色 右颜色 下颜色 左颜色; 边框颜色可以用于控制边框的外观和视觉效果例如与元素的背景色形成对比或者与其他元素产生视觉分隔。通过调整边框颜色的值可以灵活地满足不同的设计需求和风格要求。 ②、边框颜色的使用
边框颜色样式描述border-top-color颜色上边框颜色border-right-color颜色右边框颜色border-bottom-color颜色下边框颜色border-left-color颜色左边框颜色border-color:颜色四边框同一色border-color上下颜色 左右颜色上下与左右边框颜色border-color上颜色 左右颜色 下颜色上、左右、下边框颜色border-color上颜色 右颜色 下颜色 左颜色上、右、下、左边框颜色(顺时针)
③、边框颜色图片示例 ④、边框颜色代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#border_div1 {width: 50px;height: 50px;border-top-color: black;border-top: 3px solid;display: initial;}#border_div2 {width: 50px;height: 50px;border-right-color: black;border-right: 3px solid;display: initial;}#border_div3 {width: 50px;height: 50px;border-bottom-color: black;border-bottom: 3px solid;display: initial;}#border_div4 {width: 50px;height: 50px;border-left-color: black;border-left: 3px solid;display: initial;}/style
/head
body
div idborder_div1上边框颜色/divdiv idborder_div2右边框颜色/divdiv idborder_div3下边框颜色/divdiv idborder_div4左边框颜色/div
/body
/html
2、边框粗细(单位像素px)
边框粗细是指CSS中可以为元素的边框指定的宽度常用的单位是像素px
①、边框粗细概述
上边框粗细border-top-width值;右边框粗细border-right-width值;下边框粗细border-bottom-width值;左边框粗细border-left-width值;四边框同一粗细border-width:值;上下与左右边框粗细border-width上下粗细值 左右粗细值;上、左右、下边框粗细border-width上粗细值 左右粗细值 下粗细值;上、右、下、左边框粗细(顺时针)border-width上粗细值 右粗细值 下粗细值 左粗细值; 边框粗细可以用于控制边框的外观和视觉效果例如细边框可以给元素提供轻盈的外观而粗边框则可以给元素增加强烈的视觉分割效果。通过调整边框粗细的值可以灵活地满足不同的设计需求和风格要求。 ②、边框粗细的使用
边框粗细样式描述border-top-width值上边框粗细border-right-width值右边框粗细border-bottom-width值下边框粗细border-left-width值左边框粗细border-width:值四边框同一粗细border-width上下粗细值 左右粗细值上下与左右边框粗细border-width上粗细值 左右粗细值 下粗细值上、左右、下边框粗细border-width上粗细值 右粗细值 下粗细值 左粗细值上、右、下、左边框粗细(顺时针)
③、边框粗细图片示例 ④、边框粗细代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#border_div1 {width: 50px;height: 50px;border-top-color: slateblue;border-top: 1px solid;display: initial;}#border_div2 {width: 50px;height: 50px;border-right-color: salmon;border-right: 8px solid;display: initial;}#border_div3 {width: 50px;height: 50px;border-bottom-color:lawngreen;border-bottom-width: 2px;border-bottom-style:solid;display: initial;}#border_div4 {width: 50px;height: 50px;border-left-color: red;border-left-width: 5px;border-left-style:solid;display: initial;}/style
/head
body
div idborder_div1上边框粗细/divdiv idborder_div2右边框粗细/divdiv idborder_div3下边框粗细/divdiv idborder_div4左边框粗细/div
/body
/html
3、边框样式
边框样式是指CSS中可以为元素的边框指定的不同样式。
①、边框样式概述
边框样式用于定义边框的外观包括边框的线条样式、线条粗细和线条颜色。在CSS中可以使用border-style、border-width和border-color属性来控制边框的样式。
边框样式属性border-style可以设置以下几种常见的边框样式
1、实线边框solid普通的实线边框是最常用的边框样式2、虚线边框dotted由一些小圆点组成的虚线边框3、虚线边框dashed由一些短线段组成的虚线边框4、双线边框double由两条实线边框组成的边框5、点线边框dotted由一系列小短线段和点组成的边框6、实线边框groove带有凹陷效果的实线边框 ②、边框样式的使用
边框样式描述border-stylenone无边框/默认border-stylehidden隐藏边框border-styledotted圆状边框border-styledashed虚线边框border-stylesolid实线边框border-styledouble双实线边框
③、边框样式图片示例 ④、边框样式代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#border_div1 {width: 50px;height: 50px;border-top-color: slateblue;border-width: 5px;border-style:none;display: initial;}#border_div2 {width: 50px;height: 50px;border-right-color: salmon;border-width: 5px;border-style:hidden;display: initial;}#border_div3 {width: 50px;height: 50px;border-bottom-color:lawngreen;border-width: 5px;border-style:dotted;display: initial;}#border_div4 {width: 50px;height: 50px;border-color: red;border-width: 5px;border-style:dashed;display: initial;}#border_div5 {width: 50px;height: 50px;border-color: skyblue;border-width: 5px;border-style:solid;display: initial;}#border_div6 {width: 50px;height: 50px;border-color: blanchedalmond;border-width: 5px;border-style:double;display: initial;}/style
/head
body
div idborder_div1无边框/默认样式/divdiv idborder_div2隐藏边框样式/divdiv idborder_div3圆状边框样式/div
hr
div idborder_div4虚线边框样式/divdiv idborder_div5实线边框样式/divdiv idborder_div6双实线边框样式/div/body
/html
二、内外边距
内外边距是指在HTML和CSS中设置元素内部和外部的空白空间。
1、外边距(单位像素px)
①、外边距概述
外边距margin是指元素与其相邻元素之间的空白区域。外边距可以用来调整元素与其他元素之间的距离。在CSS中可以使用margin属性来设置元素的外边距。如下
顶部外边距margin-top值; 右外边距margin-right值; 底部外边距margin-bottom值; 左外边距margin-left值; 四边同一外边距margin:值; 上下与左右外边距margin上下外边距 左右外边距; 上、左右、下外边距margin上外边距 左右外边距 下外边距; 上、右、下、左外边距(顺时针)margin上外边距 右外边距 下外边距 左外边距;
②、外边距的使用
外边距使用描述margin-top值顶部外边距margin-right值右外边距margin-bottom值底部外边距margin-left值左外边距margin:值四边同一外边距margin上下外边距 左右外边距上下与左右外边距margin上外边距 左右外边距 下外边距上、左右、下外边距margin上外边距 右外边距 下外边距 左外边距上、右、下、左外边距(顺时针) 2、内边距(单位像素px)
①、内边距概述
内边距padding是指元素内容与元素边框之间的空白区域。内边距可以用来调整元素内容与元素边框之间的距离。在CSS中可以使用padding属性来设置元素的内边距。如下
顶部内边距padding-top值; 右内边距padding-right值; 底部内边距padding-bottom值; 左内边距padding-left值; 四边同一内边距padding:值; 上下与左右内边距padding上下内边距 左右内边距; 上、左右、下内边距padding上内边距 左右内边距 下内边距; 上、右、下、左内边距(顺时针)padding上内边距 右内边距 下内边距 左内边距;
②、内边距的使用
内边距使用描述padding-top值;顶部内边距padding-right值右内边距padding-bottom值底部内边距padding-left值左内边距padding:值四边同一内边距padding上下内边距 左右内边距上下与左右内边距padding上内边距 左右内边距 下内边距上、左右、下内边距padding上内边距 右内边距 下内边距 左内边距上、右、下、左内边距(顺时针) 三、盒子模型
1、盒子模型概述
盒子模型是指在网页设计和布局中将一个元素看作是一个矩形的盒子由内容区域、内边距、边框和外边距组成。盒子模型的结构如下
1、内容区域Content位于盒子的内部用于显示元素的内容。它的大小由width宽度和height高度属性控制。
2、内边距Padding紧挨着内容区域的一层空白区域用于控制内容与边框之间的距离。内边距的大小由padding-top顶部内边距、padding-right右侧内边距、padding-bottom底部内边距和padding-left左侧内边距属性控制。
3、边框Border围绕内容区域和内边距的一层边界线用于装饰和视觉分隔。边框的样式、粗细和颜色由border-style、border-width和border-color属性控制。
4、外边距Margin盒子之间的空白区域用于控制盒子与其它元素之间的距离。外边距的大小由margin-top顶部外边距、margin-right右侧外边距、margin-bottom底部外边距和margin-left左侧外边距属性控制。 在CSS中可以使用相关的属性来控制盒子模型的各个部分以实现不同的布局和样式效果。通过调整内容区域、内边距、边框和外边距的大小和样式我们可以创建出各种不同的盒子布局和设计效果。 2、盒子模型尺寸计算
盒子模型总尺寸borderpaddingmargin内容宽度 盒子阴影box-shadowinset(内阴影,默认是外阴影并且无阴影类型属性) X轴位移量 Y轴位移量 阴影模糊半径 阴影颜色; 圆角边框(四个角顺时针)border-radius: 10px 20px 30px 40px; 网页居中对齐margin0 auto;
3、盒子模型尺寸计算的使用
盒子模型描述使用方式盒子模型总尺寸borderpaddingmargin内容宽度盒子阴影box-shadowinset(内阴影,默认是外阴影并且无阴影类型属性) X轴位移量 Y轴位移量 阴影模糊半径 阴影颜色圆角边框(四个角顺时针)border-radius: 10px 20px 30px 40px网页居中对齐margin0 auto 总结不易希望宝宝们不要吝啬亲爱的哟()ノ~如有问题欢迎评论区批评指正
