css基础2

时间：2019-06-19 16:18:40 阅读：99 评论：0 收藏：0 [点我收藏+]

今天是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>

未完，待续！等待下次更新。。。。。。

css基础2

原文：https://www.cnblogs.com/woheni/p/11050649.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)