做淘宝类网站的步骤,标书制作培训课程,五家渠网站建设,锦州如何做百度的网站前言 盒子模型-组成 CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括#xff1a; 内容区域#xff08;Content#xff09;#xff1a;显示元素的实际内容#xf…前言 盒子模型-组成 CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括 内容区域Content显示元素的实际内容例如文本、图像或其他嵌套元素。 内边距Padding位于内容区域与边框之间的空白区域可以通过padding属性设置。 边框Border围绕内容和内边距的线条用于分隔元素与其周围的其他元素。可以使用border属性来设置元素的边框样式、颜色和宽度、 外边距Margin位于元素边框与相邻元素之间的空白区域用于控制元素之间的间距。可以使用margin属性来设置元素的外边距。 边框
设置边框的相关属性有以下几个
属性说明border-width用于设置边框的宽度。可以使用具体的像素值或预定义的关键字来指定宽度。border-style用于设置边框的样式。常见样式包括实线solid、虚线dashed、点线dotted、双实线double等。可以使用属性值none来隐藏边框。border-color用于设置边框颜色。可以使用具体的颜色值或预定义的颜色关键字来指定颜色。
示例
div {width: 200px;height: 200px;background-color: orange;border-width: 2px;border-style: solid;border-color: blue;
}
上述代码将div元素的边框宽度设置为2像素样式为实线颜色为蓝色。
预览 此外还可以使用border缩写属性来同时设置边框的宽度、样式和颜色。
例如
div {width: 200px;height: 200px;background-color: orange;border: 2px solid blue;
}
上述代码与前面的示例效果相同。 设置单方向边框线
要设置元素的单方向边框可以使用以下属性
属性说明border-top用于设置元素的上边框border-right用于设置元素的右边框border-bottom用于设置元素的下边框border-left用于设置元素的左边框 示例
div {width: 200px;height: 200px;background-color: orange;border-top: 1px solid red;border-right: 2px dashed black;border-bottom: 3px dotted green;border-left: 4px double yellow;
}
预览 内边距
以下属性可以设置不同方位的内边距
属性说明padding-top用于设置上方的内边距值padding-right用于设置右侧的内边距值padding-bottom用于设置下方内边距值padding-left用于设置左侧内边距值 示例
div {width: 200px;height: 200px;background-color: orange;padding-top: 10px;padding-right:20px;padding-bottom: 10px;padding-left:20px
}
上述代码会将div元素的顶部和底部内边距设为10像素右侧和左侧的内边距设置为20像素。 内边距-多值写法
可以使用缩写属性padding来设置不同方向的内边距。
示例
统一的内边距
padding: 10px;
水平和垂直方向的不同内边距
padding: 10px 20px; 上方、水平、下方方向的不同内边距
padding: 10px 20px 30px;
上、右、下、左方向的各自不同的内边距
padding: 10px 20px 30px 40px; 盒子尺寸计算
盒子尺寸内容尺寸边框尺寸内边距尺寸
示例
div {width: 200px;height: 200px;background-color: orange;border: 5px solid black;padding: 10px 20px;margin: 20px;
} 上述示例盒子总宽度250px总高度为230px。 外边距
可以使用以下属性设置盒子的外边距
属性说明margin-top设置元素顶部的外边距margin-right设置元素右侧的外边距margin-bottom设置元素底部的外边距margin-left设置元素左侧的外边距 示例
div {width: 200px;height: 200px;background-color: orange;margin: 100px;
}
预览 其多值写法与内边距padding属性相同。
自动边距
div {width: 200px;height: 200px;background-color: orange;margin: 0 auto;
}
上述代码中将垂直方向外边距设置为0左右外边距设为auto将会自动将容器或版心水平居中。
预览 盒子模型-元素溢出
当元素的内容超出其容器的尺寸时就会发生溢出的情况。可以使用overflow属性来控制溢出元素的显示方式。
overflow属性有以下几个可选值
属性值效果visible默认值内容会溢出容器显示并可能遮盖其他元素。hidden内容会被裁剪超出容器部分将不可见。scroll若内容溢出容器会显示滚动条以便滚动查看内容。auto若内容溢出容器会根据需要显示滚动条。若不溢出则不显示滚动条。 示例
1.溢出情况
HTML代码
div生活就是一半诗意一半烟火手执烟火以谋生心怀诗意以谋爱。曾经一直觉得远方才是诗经历了人间烟火才发现油盐酱醋茶亦可成诗。
/div
CSS代码
div {width: 200px;height: 150px;background-color: orange;overflow: visible;
}
溢出情况预览 2.溢出隐藏
div {width: 200px;height: 150px;background-color: orange;overflow: hidden;
}
预览 3.溢出滚动无论是否溢出都会显示滚动条
准备两个盒子模型
HTML代码
div classdiv_1生活就是一半诗意一半烟火手执烟火以谋生心怀诗意以谋爱。曾经一直觉得远方才是诗经历了人间烟火才发现油盐酱醋茶亦可成诗。
/divdiv classdiv_2人面不知何处去桃花依旧笑春风。
/div
CSS代码
.div_1 {width: 200px;height: 150px;background-color: orange;margin: 20px 0;overflow: scroll;
}.div_2 {width: 200px;height: 150px;background-color: green;overflow: scroll;
}
预览 4.溢出滚动元素溢出才显示滚动条
.div_1 {width: 200px;height: 150px;background-color: orange;margin: 20px 0;overflow: auto;
}.div_2 {width: 200px;height: 150px;background-color: green;overflow: auto;
}
预览 盒子模型-圆角
盒子模型中的圆角border-radius属性用于为元素的边框添加圆角效果。通过设置适当的圆角半径可以使元素的边框变得圆润。
圆角属性可以应用于四个角落
属性说明border-top-left-radius左上角的圆角半径border-top-right-radius右上角的圆角半径border-bottom-right-radius右下角的圆角半径border-bottom-left-radius左下角的圆角半径 使用这些属性你可以指定一个长度值如像素或百分比来定义圆角的大小。
示例
div {width: 200px;height: 200px;background-color: orange;border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;
}
预览 多值写法
语法格式如下
.element {border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
}
具体说明
top-left左上角的圆角半径。top-right右上角的圆角半径。bottom-right右下角的圆角半径。bottom-left左下角的圆角半径。
示例效果border-radius: 10px;所有角都具有相同的圆角半径10px。border-radius: 10px 20px;左上角和右下角为10px右上角和左下角为20px。border-radius: 10px 20px 30px;左上角为10px右上角和左下角为20px右下角为30px。border-radius: 10px 20px 30px 40px;左上角为10px右上角为20px右下角为30px左下角为40px。 常见应用
正圆形状给正方形盒子设置圆角属性值为宽高的一半或50%
div {width: 200px;height: 200px;background-color: orange;border-radius: 50%;
}
预览 胶囊形状给长方形盒子设置圆角属性值为盒子高度的一半
div {width: 300px;height: 100px;background-color: orange;border-radius: 50px;
}
预览
