本文详细介绍了CSS中的边框属性，包括边框宽度、样式和颜色的设置，以及如何通过单边复合属性来指定特定方向的边框。同时，文章探讨了背景属性，如背景颜色、图片、平铺、位置和固定，以及如何创建三角形。此外，还讲解了浮动属性在页面布局中的作用，特别是浮动元素的排列方式和版心布局。最后，讨论了色块布局的基本概念。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.边框属性
边框：元素的边缘位置
属性：border（复合属性）
取值：border：10px solid gray; 给元素添加一个10px粗细的灰色的实线边框
10px=======边框的粗细===========border-width
solid======边框的样式===========border-style
gray=======边框的颜色===========border-color
边框属性====复合属性
注意事项：
1）边框的样式是必须值；单独添加边框粗细和边框的颜色之后实现不了
2）可以不跟颜色只跟样式和粗细，实现的对应粗细对应样式的黑色的实现默认颜色为黑色
3）如果不添加粗细，不添加颜色，默认也有边框，默认是3px的边框黑色的实线边框
2.取值问题
border-width：为例子
v1；================实现了四个方向的边框
v1 v2；=============实现了四个方向的边框：v1代表上下的值 v2代表作用方向的值
v1 v2 v3；==========实现了四个方向的边框：v1代表上 v2代表左右 v3代表下
v1 v2 v3 v4：=======实现了四个方向的边框：v1代表上 v2代表右 v3代表下 v4代表左
跟四个值的时候：按照顺时针方向转上一圈记忆 上右下左
border-style：取值有哪些
solid======单实线
double=====双实线
dashed=====虚线=====线段状态虚线（实际开发应用较多）
doteed=====虚线=====点状虚线
3.问题：无论使用border，使用border-width/style/color=======一下直接设置了四个方向的边框
能否设置某一个方向的边框
单边复合属性：指修饰某一个边的边框
属性：border-方向词
border-top：10px solid gray;上边框
border-right：10px solid gray;右边框
border-bottom：10px solid gray;下边框
border-left：10px solid gray;左边框
div不设置宽度 默认是自适应宽度
border-top-color
4.如何制作一个三角形
div{
width:0px;
height:0px;
border:10px solid transparent;
border-top:10px solid gray;
或者
border-top-color:gray
}
5.背景属性
1）背景的颜色
background-color
取值：颜色单词red，pink，yellow
rgb（red，green，blue） 0-255
rgba（red，green，blue，alpha）
alpha===透明度的意思0-1之间的小数，实际开发的时候，保留1位
可以省略小数点前面的0 0.1 .1
rgba（23,34,45,0.1）======rgba（23,34,45，.1）
0代表的是透明 1代表的是不透明
#六位十六进制的颜色值
0-9 A-F #009966====#096
注意事项：背景颜色能蔓延到边框的位置
快捷键bg-c=====background-color
2）背景的图片
background-image
取值：url（图片的路径）
只要插入背景图片一定会产生平铺效果
如果图片比盒子小会=========直接显示平铺
如果图片和盒子一样大=======只显示这个图片（实际上是有平铺的只不过你的图片与盒子一边打而已）
如果图片比盒子大===========图片显示不全面（图片太大，可视区域太小）
3）背景的平铺属性
background-repeat
默认取值为repeat
repeat=====平铺
no-repeat==不平铺
repeat-x===横向平铺
repeat-y===纵向平铺
background-repeat：no-repeat
取消平铺之后，默认的背景图片在左上角显示
4)背景图片的位置
background-position：x（px） y（px）；
x=======水平方向位置的调整 x+ 向右 x- 向左
y=======竖直方向的调整 y+ 向下 y- 向上
关键词======x=left/right/center
y=top/bottom/center
关键词和数值是可以混合使用的
实际开发的过程中
使用的代码为：background-position：right center； （小竖杆）
5)背景图片的固定和滚动（苹果13官网的效果）
background-attachment
scroll=====默认值是滚动
fixed======固定 不随滚动条的滚动而被滚上去
图片会到左上角
6）背景图片尺寸的大小设置
backgrond-size:x y
x=====水平方向的大小
y=====垂直方向的大小
图片拉伸变形
使用具体的数值px/%===会让图片变形拉伸
cover======覆盖，背景图片等比例放大，容易出现被裁剪的效果
contai=====包含，背景图片等比例放大，容易出现留白效果
实际开发的时候用cover
素材与盒子是等比例就可以完美填充
以上属性为单一属性
background-color/image/repeat/position/attachment/size 单一属性
复合属性
background:color image repeat xy / xy attachment
复合属性的取值顺序可以调整 但是位置和大小不能分开
/前面的x y=======位置
/后面的x y=======大小
后面的取值可以跟一个值也可以跟多个值，多个值使用空格隔开
background-color：red
background：red
background：red url（img/2.jpg） no-repeat
background：url（img/2.jpg) red no-repeat
边框的扩展
border：10px solid gray；
border：0 有边框 有数值 值为0
border：none 没有边框 none比较优化 没有值
6.浮动属性
浮动的含义：漂浮的意思
主要作用：让元素横向显示实现横向的布局
使用的属性：float属性
使用的取值：none默认值 不浮动
left左侧浮动，从左侧开始依次向右进行排列
right右侧浮动，从右侧开始依次向左进行排列显示
div标签是没有边距的
html，body，h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd{margin:o;padding:0}
1）所有的元素都添加浮动的话，元素会横向显示从左向右排列（左浮动）
2）后面的剩余空间不够了的话，元素会折行显示
3）如果元素高度不一致的话，补位元素，会以前面浮动元素的右侧和下面进行补位置
容易出现卡主的效果
盒子水平居中 margin：0 auto 盒子一定要设置宽度
浮动会让margin 0 auto失效 margin 0 auto只针对于页面中的标签
margin 0 150px 外边距 150px 可以在浮动中使用 用于居中定位
页面布局
通栏=====设计稿上面颜色区域从左侧一直通向右侧==通栏布局
通栏布局只需要放一个大的div，不要设置宽度，简单的设置高度，设置颜色即可
版心=====缩小放大设计稿之后，页面中的主要信息显示区域
必然使用一行代码：margin：0 auto 让盒子位于浏览器水平位置的中间显示
4）
7.色块布局
-->
</body>
</html>
扫一扫
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
