css基础2
程序员文章站
2022-03-22 12:26:34
今天是2019年6月19日星期三，在这里跟大家分享css基础的第二部分单位、尺寸、溢出和边框，下面是详细的内容，请各位大佬积极改正！ 一、单位 尺寸单位： px（像素） cm mm pt em：当前字体的大小 rem：根字体的大小（Html标签字体的大小） 颜色单位： 三基色：红绿蓝 rgb（x1, ......
今天是2019年6月19日星期三，在这里跟大家分享css基础的第二部分单位、尺寸、溢出和边框，下面是详细的内容，请各位大佬积极改正！
一、单位
-
尺寸单位：
- px（像素）
- cm mm pt
- em：当前字体的大小
- rem：根字体的大小（html标签字体的大小）
-
颜色单位：
- 三基色：红绿蓝 rgb（x1,x2,x3）取值为0-255
- rgb（255,0,0） 纯红
- rgb（0，0，0） 黑色
- rgb（255,255,255） 白色
- rgba：（x1,x2,x2,a）a代表的是透明度，取值为0-1之间
- 0表示全透明
- 1表示完全不透明
- 十六进制：#rrggbb
- #ff0000：正红色
- #ffffff：白色
- #000000：黑色
- 简写：当三基色、十六进制每一位的色值两位的值都是相同的话可以省略一个值！
- #aabbcc 可以缩写为 #abc
- #ff0000 可以缩写为 #f00
- 三基色：红绿蓝 rgb（x1,x2,x3）取值为0-255
二、尺寸属性
-
宽度属性：width：宽度 单位有px和百分比
- max-width：最大宽度
- min-width：最小宽度
-
高度属性：height：高度 单位有px和百分比
- max-height：最大高度
- min-height： 最小高度
-
注意：
- 块元素可以设置宽高，行内元素不可以设置宽高
- 快元素宽度默认值是100%
- 高度如果没有设置，默认值是auto，由内容撑开
三、溢出
- 定义：当我们给一个元素设置了宽高，如果内容的面积超出了你设置的尺寸的面积，就会产生溢出！溢出属性定义了元素内容溢出时怎么处理。
- 溢出属性：overflow
- visible：可见，默认值
- hidden：溢出部分隐藏
- scroll：滚动 默认显示滚动条，在内容溢出时可用
- auto：自动 如果内容没有溢出，就不显示滚动条。内容溢出，显示滚动条并可用。
-
单向溢出：
- overflow-x：控制x轴方向内容溢出时的处理
- overflow-y：控制y轴方向内容溢出时的处理
- 注意：当我们只给一个方向设置溢出属性时，另一个方向的值默认是auto。
-
sample：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>溢出属性</title> <style> #box { width: 150px; height: 150px; border: 1px solid #333; overflow: hidden; /*overflow: scroll; overflow: auto;*/ } </style> </head> <body> <div id="box"> zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhy </div> </body> </html>
四、边框
-
边框属性：border
- 值：width style color
- width：宽度 单位px
- style：线条样式
- solid 实线
- dotted 虚线 实心圆
- dashed 虚线 实心方块
- color：颜色 合法的颜色值
- sample：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框</title> <style> #box { width: 400px; height: 400px; border: 10px solid orange; /*border: 10px dotted orange; border: 10px dashed orange;*/ } </style> </head> <body> <div id="box">我是div</div> </body> </html>
- 值：width style color
-
单方向定义
- 方向：上下左右（top bottom left right）
- 格式：border-方向 值：同上
- sample：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单项边框</title> <style> #box { width: 300px; height: 300px; border-left: 10px solid #666; border-top: 10px dotted #456; border-right: 10px dashed #000; border-bottom:10px dotted #800080; } </style> </head> <body> <div id="box"></div> </body> </html>
-
单属性定义：同时控制上下左右四条边框单属性
- 语法：border-属性：值
- sample：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边框</title> <style> #box { width: 300px; height: 300px; border: 5px solid orange; border-color: #ff0000; } </style> </head> <body> <div id="box"></div> </body> </html>
-
单边单属性：border-方向-属性
- sample：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边框单属性</title> <style> #box { width: 400px; height: 400px; border: 5px solid #008000; border-top-color: #800080; border-right-color: #e4393c; border-bottom-color: #ffa500; } </style> </head> <body> <div id="box"></div> </body> </html>
- sample：
-
注意：
- 边框颜色除了合法的颜色值之外还可以是transparent。
- 使用场景：某种状态下，加上边框尺寸，导致元素抖动；在变化前加上边框颜色透明，保证前后状态尺寸无变化。
- 边框组成：边框是由三角形或者梯形组成
-
边框倒角：border-radius
- 取值：px或者百分比
- 注意：同时控制四个角的角度
- 单独定义每个角的角度：border-垂直方向-水平方向-radius
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边倒角</title> <style> #box { width: 300px; height: 300px; background: orange; border-top-left-radius: 20px; border-radius: 5px 20px 40px 100px; } </style> </head> <body> <div id="box"></div> </body> </html>
-
- border-radius：当取值为四个值时，从左上角开始，顺时针旋转。四个值之间以空格分割！
- 取值：px或者百分比
-
边框阴影：box-shadow
- 值列表：offsetx offsety blur spread color inset
- offsetx：水平偏移距离（必选）
- offsety：垂直偏移距离（必选）
- blur：模糊距离（必选）
- spread：阴影超出面积（默认是0）
- color：阴影颜色（必选）
- inset：外部该内部阴影
- 推荐常用：offsetx offsety blur color；
- sample
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style> #box { width: 300px; height: 300px; background: orange; box-shadow: 10px 10px 10px rgb(93,145,77); } </style> </head> <body> <div id="box"></div> </body> </html>未完，待续！等待下次更新。。。。。。
- 值列表：offsetx offsety blur spread color inset