二、CSS 盒模型
1.边框
围绕着内容和内填充区域的线
1.border-width:边框的宽度 单位:像素 注意:只写一个border-width设置不上边框的宽的,得写上边框的线型 2.border-style:边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框 5.none 没有边框 3.border-color:边框的颜色 1.关键词 2.十六进制色值 3.rgb() 4.rgba() 默认边框的颜色为元素本身的前景色 4.复合写法 例子: border-color: pink; 一个值:四个边框 border-color: pink gold; 两个值:上下边框 左右边框 border-color: pink gold greenyellow; 三个值:上边框 左右边框 下边框 border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向) border-width和border-style同样效果 5.单独设置 例子: /* 上边框 */ border-top-width: 50px; border-top-style: solid; border-top-color: yellow; /* 下边框 */ border-bottom-width: 50px; border-bottom-style: dashed; border-bottom-color: brown; 单边框复合写法: border-left: 50px solid cyan; 边框的宽度 边框的线型 边框的颜色 6.边框的复合写法 border:边框的宽度 边框的线型 边框的颜色 border: 100px solid purple; 7.去掉边框 border:0; border:none;
利用边框实现三角形
用边框实现三角形的规律: 盒子大小宽高为0 要那个三角形,他的对边为none,他相邻的边框的颜色为透明色,transparent /* 上三角形 实现上边三角形,对边为none,也就是下边框为none,左右边框的颜色为透明色 */ .box1 { width: 0; height: 0; /* border: 100px solid tomato; border-bottom: none; border-left-color: transparent; border-right-color: transparent; */ border-top: 100px solid tomato; border-left: 100px solid transparent; border-right: 100px solid transparent; }
利用边框实现梯形
/* 用边框实现梯形的规律 盒子大小不能为零 要那个梯形,他的对边为none,他相邻的边框的颜色为透明色,transparent */ /* 上梯形 实现上梯形,对边为none,也就是下边框为none,左右边框的颜色为透明色 */ .box1 { width: 100px; height: 100px; /* background-color: brown; */ /* border: 100px solid red; border-color: tomato purple blue olivedrab; border-bottom: none; border-left-color: transparent; border-right-color: transparent; */ border-top: 100px solid tomato; border-left: 100px solid transparent; border-right: 100px solid transparent; } /* 左梯形 实现左梯形,对边为none,也就是右边框为none,上下边框的颜色为透明色 */ .box2 { width: 100px; height: 100px; /* background-color: brown; */ /* border: 100px solid red; border-color: tomato purple blue olivedrab; border-right: none; border-top-color: transparent; border-bottom-color: transparent; */ border-left: 100px solid olivedrab; border-top: 100px solid transparent; border-bottom: 100px solid transparent; }
2.外边距问题及解决方法
1、兄弟关系外间距塌陷问题
兄弟关系外间距塌陷问题 现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象; 两个值一样大,取当前值 两个值不同,取较大值 原因:并列关系的两个元素共用了一个外间距区域 解决办法: 分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden' .box1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 50px; } .box2 { width: 100px; height: 100px; background-color: red; margin-top: 100px; } .father1, .father2 { overflow: hidden; } <div class="father1"> <div class="box1"></div> </div> <div class="father2"> <div class="box2"></div> </div>
2、父子关系外间距塌陷
父子关系外间距塌陷 现象: 1.元素嵌套关系,子元素的margin-top值会叠加给父元素; 2.如果父元素也有margin-top值,会与子元素的margin-top值合并,取两者较大值; 原因: 父元素和子元素公用一个上外边距区域 解决方法: 1.为父元素设置上边框或者上填充 2.为父元素设置overflo:hidden; 3.转换思路,巧用padding,规避margin .father { width: 200px; height: 200px; background-color: tomato; margin-top: 100px; /* border-top: 2px solid royalblue; padding-top: 1px; */ overflow: hidden; } .son { width: 100px; height: 100px; background: blue; margin-top: 50px; } .father1 { width: 200px; height: 200px; background-color: purple; padding-top: 20px; } .son1 { width: 100px; height: 100px; background: pink; /* padding-top: 10px; */ } <div class="father"> <div class="son"></div> </div> <hr> <div class="father1"> <div class="son1"></div> </div>
三、overflow详解
概述:溢出元素内容区的内容会如何处理
取值
overflow: visible;溢出显示,默认值 overflow: hidden;溢出隐藏 overflow: scroll;溢出显示滚动条,横向和纵向滚动条都显示 overflow: auto;自动,内容溢出时,显示滚动条
overflow-x 只包括水平方向。
overflow-y 只包括垂直方向
body{ /* overflow:hidden ; */ /* overflow-x 只包括水平方向。 overflow-y 只包括垂直方向。 */ overflow-x: hidden; overflow-x: visible; overflow-x: scroll; overflow-x: auto; overflow-y: hidden; overflow-y: visible; overflow-y: scroll; overflow-y: auto; } <img src="./images/yk.png" alt="">
应用
-
产品描述的溢出隐藏
-
模块溢出显示滚动条
四、CSS背景
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。
1、background-color
background-color 属性,设置元素的背景颜色。
常用的值
-
color_name 规定颜色值为颜色名称的背景颜色(比如 red)
-
hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
-
rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
-
transparent 默认。背景颜色为透明。
提示:背景应用于由内容和内边距、边框组成的区域
2、background -image
background-image 属性,为元素设置背景图像。
background-image:url(" 图片资源路径 ");
常用的值
-
url(‘URL’) 指向图像的路径。
-
none 默认值。不显示背景图像。
元素的背景默认绘制区域包括内容,内边距和边框。
背景图片的占位区域:content + padding + border
默认值,背景图像位于元素的左上角,并在水平和垂直方向上重复。
我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。
3、background -repeat
background-repeat 属性,设置是否或如何重复背景图像。
常用的值
-
repeat 默认。背景图像将在垂直方向和水平方向重复。
-
repeat-x 背景图像将在水平方向重复。
-
repeat-y 背景图像将在垂直方向重复。
-
no-repeat 背景图像将仅显示一次。
4、background -position
background-position 属性,设置背景图像(由 background-image 定义)的起始位置。
语法:background-position: xpos ypos;
一般来说它有两个值:第一个值表示水平位置,第二个值表示垂直位置。如果仅规定 了一个值,另一个值将是 50%。
取值
-
关键字:top、bottom、left、right 和 center ; 指定图像放置于元素内边距区域的位置,一个对应水平方向,另一个对应垂直方向。 左上角为:left top;
-
长度值 指定图像相对于元素内边距区的偏移量。
固定的px值,可以为负值 正值向右向下 负值向左向上
-
百分比
-
指定图像相对于元素内边距区的偏移量。
-
百分比,是以父元素宽高度为参考的
-
左上角是 0% 0%;右下角是 100% 100%。 如果设置为 50% 50%,图像的中心点将与元素的中心点对齐显示。
background简写
background是背景复合属性,在一个声明中设置所有背景属性。
语法:background:bg-color bg-image bg-repeat bg-position;
background: red url(“bgimage.jpg”) no-repeat left top;
-
当使用简写属性时,属性值的顺序为::
-
background-color
-
background-image
-
background-repeat
-
background-position
-
如果某个属性不需要设置,可以省略。