今天是 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
二, 尺寸属性
宽度属性: 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>
单方向定义
方向: 上下左右 (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>
注意:
边框颜色除了合法的颜色值之外还可以是 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: 当取值为四个值时, 从左上角开始, 顺时针旋转. 四个值之间以空格分割!
边框阴影: 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>
未完, 待续! 等待下次更新......
来源: http://www.bubuko.com/infodetail-3097144.html