CSS样式

最新推荐文章于 2025-05-31 23:32:52 发布
最新推荐文章于 2025-05-31 23:32:52 发布
阅读量733 收藏 8
点赞数 24
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/christinnadong/article/details/144178364
版权

字体样式

字体大小：font-size

  • 属性名：font-size
  • 取值：数字 + px
  • 注意：
    • 浏览器默认文字大小是16px
    • 单位需要设置，否则无效

字体粗细：fon-weight

  • 属性名：font-weight
  • 取值：
    • 关键字（正常：normal；加粗：bold）
    • 纯数字：100-900的整数百（400：正常；700：加粗）
关键字数字效果
normal400正常
bold700加粗
  • 注意点
    • 不是所有字体都提供9种粗细，因此部分取值页面中无变化
    • 正常、加粗两种取值使用最多

字体样式（倾斜）：font-style

  • 属性名：font-style
  • 取值
    • 正常（默认值）：normal
    • 倾斜：italic

字体类型：font-family

  • 属性名：font-family
  • 常见取值：具体字体1，具体字体2，……，字体系列
    • 具体字体：微软雅黑、黑体、楷体等
    • 字体系列：sans-serif（无衬线）、serif（衬线）、monospaced（等宽）等
  • 渲染规则
    • 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
    • 如果都不持支，此时会根据操作系统，显示最后字体系列的默认字体
  • 注意点
    • 如果字体名称中存在多个单词，推荐使用引号包裹
    • 最后一项，字体系列不需要引号包裹
    • 网页开发时，尽量使用系统自带字体，保证不同用户浏览器网页都可以正确显示

字体符合属性：font

  • 属性名：font
  • 取值：
    • font: style  weight  size  family;
  • 省略要求
    • 只能省略前两个，如果省略了，相当于设置了默认值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <style>
        p {
            /* 字体大小 */
            font-size: 30px;
            /* 字体粗细 */
            font-family: 700;
            /* 倾斜 */
            font-style: italic;
            /* 字体 */
            font-family: "楷体", sans-serif;
        }

        div {
            /* font：复合属性(style、weight、size、family) */
            font: normal 400 30px "黑体", sans-serif;
        }
    </style>
</head>

<body>
    <p>这是p标签</p>
    <div>这是div标签</div>
</body>

</html>

文本样式

文本缩进：text-indent

  • 属性名：text-indent
  • 取值
    • 数字 + px
    • 数字 + em（1 em = 当前标签的 font-size 的大小）

文本水平对齐方式：text-align

  • 属性名：text-align
  • 取值
属性值效果
left左对齐（默认）
center剧中对齐
right右对齐
  • 注意：
    • 如果需要让文本（内容）水平居中，text-align 属性给文本所在标签（文本的父元素）设置
      • 文本
      • span标签，a标签
      • input标签、img标签

文本修饰线：text-decoration 

  • 属性名：text-decoration
  • 取值：
属性值效果
underline下划线
line-through删除线
overline上划线
none无装饰线
  • 注意
    • 可以使用 text-derocation: none； 清除 a 标签默认的下划线
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <style>
        .sj {
            /* 缩进 */
            text-indent: 2em;
        }
        .dq {
            /* 对齐方式 */
            text-align: center;
        }
        a {
            /* 修饰线 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <P>普通段落文字</P>
    <p class="sj">缩进的段落</p>
    <p class="dq">居中对齐</p>
    <a href="#">百度</a>
</body>

</html>

文字文本其他样式

行高：line-height

  • 作用：控制一行的上下行间距
  • 属性名：line-height
  • 取值
    • 数字 + px
    • 倍数（当前标签font-size的倍数）
  • 应用
    • 让单行文本垂直居中，可以设置 line-height：文字父元素的高度
    • 网页精准布局时，会设置 line-height: 1 可以取消上下边距
  • 行高与font连写的注意点
    • 如果同时设置了行高和font连写，注意覆盖问题
    • font: style weight size/line-height family;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* 行高 */
            line-height: 3;
        }

        div {
            /* 行高在font中使用 */
            font: normal 400 20px/1.5 "黑体";
        }
    </style>
</head>

<body>
    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </p>

    <div>
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </div>
</body>

</html>

 

颜色取值

颜色表示方式表示含义属性值
关键字预定义的颜色名red、green、bule……
rgb表示法红绿蓝三原色。每项取值范围：0-255rgb(0,0,0)、rgb(255,255,255)、……
rgba表示法红绿蓝三原色+a表示透明度，取值0-1rgba(255,255,255,0.5)……
十六进制表示法#开头，将数字转换成十六进制表示法#000000、#ffffff，……

文字颜色：color

标签水平居中：margin

要想让标签水平居中，可以通过margin属性进行设置

margin的属性：

  • 数字 + px（0 可以不加 px）
  • auto（自动计算）
属性值个数效果
四个值依次是：上、右、下、左
三个值依次是：上、右、下（左边和右边取值相同）
两个值依次是：上、右（下和上取值相同，左和右取值相同）
一个值四个方向取值相同
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 设置外边距 */
            margin: 0 auto;
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

背景相关属性 

背景颜色：background-color

  • 属性名：background-color
  • 属性值：
    • 颜色取值：关键字、rgb表示法、rgba表示法、十六进制
  • 注意
    • 背景颜色默认是透明：rgba(0,0,0,0)、transparent
    • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            background-color: #ccc;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

背景图片：background-image

  • 属性名：background-image
  • 属性值：url(图片地址)
  • 注意：
    • 背景图片中的 url 可以省略引号
    • 背景图片默认是在水平和垂直方向平铺的
    • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 设置背景图片：默认是平铺方式 */
            background-image: url(./bg.png);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

背景平铺:background-repeat

  • 属性名：background-repeat
  • 属性值
属性名取值效果
background-repeatrepeat水平和垂直方向平铺（默认）
no-repeat不平铺
repeat-x水平方向平铺
repeat-y垂直方向平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 设置背景图片：默认是平铺方式 */
            background-image: url(./bg.png);
            /* 设置平铺方式：不平铺 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

背景位置：background-position

  • 属性名：background-position
  • 属性值：水平方向位置   垂直方向位置
    • 方向名词
    • 数字 + px（坐标）
属性名属性值效果
background-positionleft水平方向居左
right水平方向居右
top垂直方向居上
bottom垂直方向居下
center居中（垂直、水平都可用）
数字 + px距离左上距离
  • 注意：方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 设置背景图片：默认是平铺方式 */
            background-image: url(./bg.png);
            /* 设置平铺方式：不平铺 */
            background-repeat: no-repeat;
            /* 设置背景图位置:水平居中、垂直顶部 */
            background-position: center top;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

背景复合属性：background

  • 属性名：background
  • 属性值：
    • 单个属性值的合写，取值之间用空格隔开
  • 书写顺序：（不分先后顺序）
    • background: color  image  repeat  position
  • 省略问题：
    • 可以按照需求省略
    • 特殊情况：如果盒子大小和背景图片大小一样，可以直接写background: url()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 背景复合属性 */
            background: pink url(./bg.png) no-repeat center top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

 

标签显示模式：display

  • 目的：改变标签默认的显示特点，让标签符合布局要求
属性名属性值效果使用频率
displayblock转换成块级元素较多
inline-block转换成行内块元素较多
inline转换成行内元素较少
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置宽高背景色 */
        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 转换显示模式 */
        .two {
            display: inline-block;
        }
        .three {
            display: block;
        }
    </style>
</head>
<body>
    <span class="one">span1</span>
    <span class="two">soan2</span>
    <span class="three">soan3</span>
</body>
</html>

 

块：block

  • 独占一行（一行只能显示一个）
  • 默认宽度是父标签的宽度，高度默认由内容撑开
  • 可以设置宽高
  • 举例：div、p、h系列、ul、li、dt……

行内：inline

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高（宽高不生效）
  • 举例：a、span、b、u、i、strong……

行内块：inline-block

  • 一行可以显示多个
  • 可以设置宽高
  • 举例：input、textarea、button、select……
  • 特殊情况：img 标签有行内块的特点

标签嵌套的注意事项

  • p 标签和 h 标签不能相互嵌套
  • p 标签内部不能使用 div 标签
  • a 标签，内部不能嵌套 a 标签

盒子模型

内容区域：content（width & height）

  • 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
  • 属性：width & height
  • 常见取值：数字 + px

内边距区域：padding

  • 属性名：padding
  • 取值：数字 + px（1 ~ 4个）
  • 如果要设置单个方向的取值，也可以使用 padding-方向名词（top、right、bottom、left）
属性名取值个数说明
padding1个值四个方向内边距相同
2个值第一个：上下内边距；第二个：左右内边距
3个值第一个：上内边距；第二个：左右内边距；第三个：下内边距
4个值

依次是：上、右、下、左四个方向的内边距

边框区域：border

  • 属性名：border
  • 属性值：单个取值的连写，取值之间以空格隔开（如：border: 1px solid #000;）
    • 表示四个方向的边框相同
    • 如果需要单独设置各个方向，使用 border-方向名词（top、right、bottom、left）
    • solid：实线
    • dashed：虚线
    • dotted：点线

盒子尺寸：box-sizing

  • 属性名：box-sizing
  • 属性值：box-border（自动内减）
    • 默认盒子的大小：content大小（width & height） + padding + border
    • 内减之后的大小：width & height（会根据 padding 和 border 自动调整 content 的大小）

外边距区域：margin

属性名取值个数说明
margin1个值四个方向外边距相同
2个值第一个：上下外边距；第二个：左右外边距
3个值第一个：上外边距；第二个：左右外边距；第三个：下外边距
4个值

依次是：上、右、下、左四个方向的外边距

  • 属性名：margin
  • 取值：数字 + px（1 ~ 4个）、auto（自动计算，左右一样，居中）
  • 如果要设置单个方向的取值，也可以使用 margin-方向名词（top、right、bottom、left）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* width & height：宽度和高度 */
            width: 200px;
            height: 200px;
            background-color: pink;

            /* border：边框线（宽度、线型、颜色） */
            border: 1px solid #000;
            /* border-方向名词：单独设置某个方向的边框线 */
            border-top: 3px dashed blue;

            /* padding: 内边距，四个方向的内边距 */
            padding: 20px;
            /* padding-方向名词: 单个方向的内边距 */
            padding-top: 5px;

            /* margin: 外边距 */
            margin: 10px;
            /* margin-方向名词：设置单个方向的外边距 */
            margin-left: 30px;

            /* 内减模式 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字1</div>
    <div>文字2</div>
</body>
</html>

 

盒子阴影：box-shadow 

清除默认内外边距：m0+p0

  • 有些标签右默认的内外边距，可以使用 margin: 0; padding: 0; 清楚默认间距
  • 清楚默认间距的代码，可以放在 所有标签选择器中
* {
    margin: 0;
    padding: 0;
}

版心居中： margin: 0 auto

  • 版心：网页的有效内容
  • 版心居中：margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            background-color: pink;
            /* 版心居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒子模型可能会出现的问题

外边距合并现象 

  • 场景： 垂直布局 的 块级元素，上下的 margin 会合并
  • 结果：最终两者间距为 margin 的最大值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .one {
            margin-bottom: 30px;
        }
        .two {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

 外边距塌陷问题

  • 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
  • 结果：导致父元素一起往下移动
  • 解决办法：
    • 给父元素设置 border-top，或者 padding-top （分隔父子元素的margin-top）
    • 给父元素设置 overflow: hidden
    • 转换成行内块元素
    • 设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 解决塌陷的问题 */
            /* 方式一：不在子元素中设置margin-top，在父元素中设置padding */
            /* padding-top: 20px; */

            /* 方式二：给父元素设置border-top，如果设计稿没有border，不能使用这个解决办法 */
            /* border-top: 1px solid #000; */

            /* 方式三：给父元素设置 overflow: hidden */
            overflow: hidden;            
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 外边距塌陷：父级会向下移动 */
            margin-top: 20px;

            /* 方式四：给父元素设置成行内块元素 */
            /* display: inline-block; */

            /* 方式五：设置浮动 */
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

 

 行内元素垂直内外边距不生效

  • 如果想要通过 margin 或 padding 改变行内标签的垂直位置，无法生效
  • 行内标签的垂直位置通过行高来改变（line-height）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            /* margin: 100px; */
            padding: 100px;
        }
    </style>
</head>
<body>
    <span>行内标签</span>
    <span>行内标签</span>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            /* margin: 100px; */
            padding: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <span>行内标签</span>
    <span>行内标签</span>
</body>
</html>

 

浮动：float

标准流

  • 标准流，又称文档流，是浏览器在渲染网页内容时默认采用的一套排版规则，规定可应该以何种方式排列元素
  • 常见标准流排版规则：
    • div 独占一行
    • ……

浮动

  • 作用：让块级元素完美的在一行排列
  • 通过转换显示模式为行内块的方式，让块级元素在一行显示，代码换行的话，会产生空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            
            /* 浏览器在解析行内块或行内元素的时候，如果标签换行书写，会产生一个换行的距离 */
            display: inline-block;
        }
        .one {
            background-color: pink;
        }
        .two {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

 

  • 浮动的早期应用：图文环绕
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="./bg.png" alt="">
    好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。好好学习，天天向上。
</body>
</html>

 

  • 浮动现在的应用：网页布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            float: left;
            background-color: pink;
        }
        .two {
            float: left;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

  • 浮动的特点： 
    • 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（半脱标，盒子脱离，文字不脱离）
    • 浮动比标准流高半个级别，可以覆盖标准流中的元素
    • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    • 浮动的显示效果
      • 一行可以显示多个
      • 可以设置宽高
    • 注意点：浮动后的元素不能通过 text-align:center 或者 margin:0 auto 居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签，顶对齐 */
        /* 浮动：在一行排列，高宽生效，具备行内块特点 */
        .one {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .two {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

 

浮动的影响

  • 含义：清除浮动带来的影响
    • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
  • 原因：
    • 子元素浮动后脱标（不占位置）
  • 目的：
    • 需要父元素有高度，从而不影响其他网页元素布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* 浮动的子级元素无法撑开标签 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: skyblue;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 780px;
            height: 300px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

直接给父标签设置高度：height

额外标签法清除浮动：clear: both

  • 操作

    • 在父元素内容的最后添加一个块级元素

    • 给添加的块级元素设置 clear: both（清除左右两侧浮动的影响）

  • 特点

    • 缺点：在页面中添加额外的标签，会让页面的 HTML 结构变得复杂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* 浮动的子级元素无法撑开标签 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: skyblue;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 780px;
            height: 300px;
            background-color: #666;
        }
        /* 额外标签法清除浮动 */
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

单伪元素清除浮动

  •  操作：用伪元素替代了额外标签

  • 特点：

    • 优点：直接给标签加类即可清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* 浮动的子级元素无法撑开标签 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: skyblue;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 780px;
            height: 300px;
            background-color: #666;
        }
        /* 单伪元素清除浮动 */
        .clearfix::after {
            content: " ";
            display: block;
            clear: both;
            /* 解决浏览器兼容问题，高版本浏览器没有影响 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 给要清除浮动的父标签添加类属性 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

双伪元素清除浮动

/* 双伪元素清除浮动 */
/* .clearfix::before：解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
    content: " ";
    /* 转成表格显示模式 */
    display: table;
}
.clearfix::after {
    clear: both;
}

给父元素设置overflow属性清除浮动

  • 直接给父元素设置 overflow: hidden

定位：position

  • 标准流
    • 块级元素独占一行，垂直布局
    • 行内元素 / 行内块元素一行显示多个，水平布局
  • 浮动
    • 可以让原本垂直布局的 块级元素变成水平布局
  • 定位
    • 可以让元素自由的摆放在网页的任意位置
    • 一般用于 盒子之间的层叠情况

定位的使用

  • 设置定位的方式
    • 属性名：position
    • 常见属性值：
定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed
  • 设置偏移值
    • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
    • 选取的原则一般是就近原则（离哪边近用哪个）
方向属性名属性值含义
水平left数字 + px距离左边的距离
水平right数字 + px距离右边的距离
垂直top数字 + px距离上边的距离
垂直bottom数字 + px距离下边的距离

相对定位：relative

  • 相对于自己之前的位置进行移动
  • position: relative;
  • 特点
    • 需要配置方位属性实现移动
    • 相对于自己原来位置进行移动
    • 在页面中占位置，没有脱标
  • 应用场景
    • 配合绝对定位组CP（子绝父相）
    • 用于小范围的移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /*
                1、占有原来的位置
                2、仍然具有标签原有的显示模式特点
                3、改变位置，参照自己原来的位置
            */
            position: relative;
            left: 100px;
            top: 20px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <div class="box">box</div>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
</body>
</html>

绝对定位：absolute

  •  介绍：相对于非静态定位的父元素进行定位移动

  • 代码：position: absolute;

  • 特点：

    • 需要配合方位属性实现移动

    • 默认相对于浏览器可视区域进行移动

    • 在页面中不占位置（脱标）

  • 应用场景：

    • 配合绝对定位使用（子绝父相）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 
                绝对定位：
                    先找已经定位的父级，如果有这样的父级，参照父级
                    有父级，但父级没有定位，以浏览器窗口为参照进行定位

                特点：
                    脱标，不占位置
                    改变标签的显示模式特点，具备了行内块的特点（一行共存，宽高生效）

            */

            position: absolute;
            left: 0;
            top: 0;


            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <div class="box">box</div>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
    <p>11111111111111111111111111111111111111</p>
</body>
</html>

绝对定位标签居中（手动计算）

  • 没有定位的标签，可以使用 margin: 0 auto; 居中显示
  • 定位过的标签无法使用 margin 进行居中
  • 定位方式
    • 使用 left: 50% ，让左边定位50%的位置（参照物的50%）
    • 再往左移盒子的50%
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 绝对定位的盒子，不能使用margin居中 */
            position: absolute;
            
            /* 定位居中显示 */
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

定位：位移居中 （自动计算）transform

  • 使用：transform: translate(-50%, -50%) , 来让图像位移自身的一半
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 绝对定位的盒子，不能使用margin居中 */
            position: absolute;
            
            /* 定位居中显示 */
            left: 50%;
            top: 50%;

            /* 手动计算 */
            /* margin-left: -150px;
            margin-top: -150px; */

            /* 位移:自己宽高的一半 */
            transform: translate(-50%, -50%);

            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

固定定位：fixed

  • 相对于浏览器进行定位
  • 代码：position: fixed;
  • 特点
    • 需要配合方位属性实现移动
    • 相对于浏览器可视区域进行移动
    • 在页面中不占位置（脱标）
  • 应用场景：
    • 让盒子固定在屏幕中的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 
                固定定位：
                图标，不占位置
                改变位置，参考浏览器窗口，不随着浏览器滚动改变位置
                具备行内块特点
            */
            position: fixed;
            top: 0;
            left: 0;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <div class="box">box</div>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
    <p>11111111111111111111111111</p>
</body>
</html>

元素的层级关系:z-index

  • 不同布局方式元素的层级关系
    • 标准流  < 浮动 < 定位
  • 不同定位之间的层级关系
    • 相对、绝对、固定默认层级相同
    • 此时 HTML 中写在下面的元素层级更高，会覆盖上面的元素
  • 修改层级关系：
    • z-index 属性，需要配合定位才能生效
    • 取值是整数，默认是 0 
    • 取值越大，显示顺序越靠上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .position {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .float {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="position">定位</div>
    <div class="float">浮动</div>
    <div class="box">标准流</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .one {
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;
            
            /* 修改层级关系 */
            z-index: 1;
        }
        .two {
            position: absolute;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

 

装饰效果

垂直对齐方式：vertical-align

当图片和文本框等在一行显示的时候，默认的对齐方式是基线对齐（baseline）

处理行内标签，和行内块标签的时候，按照文字解析

图片和文字在一行时，底部是没有对齐的

属性名：vertical-align

属性值：

属性名属性值效果
vertical-alignbaseline默认，基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐

光标类型：cursor

设置鼠标在元素上显示的样式

属性名：cursor

属性值：

属性名属性值效果
cursordefault默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字型，提示用户可以选择文字
move十字光标，提示用户可以移动

边框圆角：border-radius

让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字 + px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

溢出部分显示效果：overflow

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

常见属性值：

属性名属性值效果
overflowvisible默认值，溢出部分可见
hidden溢出部分隐藏
scroll无论是否溢出，都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏：visibility、display

让元素本身在屏幕中不可见，如：鼠标 hover 之后元素隐藏

常见属性：

  • visibility: hidden
  • display: none

区别：

  •  visibility：占位隐藏
  • display：不占位隐藏

透明度：opacity

让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0 ~ 1 之间的数字（1：完全不透明；0：完全透明）

精灵图

项目中将多张小图，合并成一张大图片，这张大图片称之为精灵图

有点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用

1、创建一个盒子，设置盒子的尺寸和小图尺寸相同

2、将精灵图设置为盒子的背景图片

3、修改背景图位置（background-position: x y）

其他样式

去除列表默认样式：list-style 

  • 列表有默认的样式
  • 可以使用 list-style: none; 去除列表的默认样式
* {
    list-style: none;
}

溢出：overflow

  • 当标签的内容无法完全显示的时候，对于溢出内容的处理方式

文本框的外线：outline

  • 当文本框被选中的时候，会有外框线
  • 可以设置 outline: none 取消

调节图片垂直方向对齐方式：vertical-align

  • 图片和文字在一行排列的时候，给图片设置 vertical-align 属性，调整对齐方式
  • middle：水平居中
  • top：顶对齐
  • bottom：底对齐

背景图片大小：background-size

设置背景图片大小

语法：background-size: 宽度 高度；

取值：

属性名取值场景
background-size数字 + px简单方便，常用
百分比相对于当前盒子自身的宽高百分比
contain包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover覆盖，将背景图片等比例缩放，直到刚好填充满整个盒子没有空白

盒子阴影：box-shadow

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

取值：取值之间用空格隔开

属性名取值作用
box-shadowh-shadow必须，水平偏移量，允许负值
v-shadow必须，垂直偏移量，允许负值
blur可选，模糊度
spread可选，阴影扩大
color可选，阴影颜色
inset可选，将阴影改为内部阴影

过渡：transition

作用：让元素的样式慢慢的变化，常配合 hover 使用，增强网页交互体验

属性名：transition

常见取值：

属性名参数取值
transition过渡的属性all：所有能过渡的属性都过渡（width：只有 width 过渡）
过渡的时长数字 + s（秒）

注意点：

1、默认状态和 hover 状态样式不同，才能有过渡效果

2、transition 属性给需要过渡的元素 本身加

3、transtion 属性设置在不同状态中，效果不同

        3.1 给默认状态设置，鼠标移入移出都有过渡效果

        3.2 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 从宽度200变换到宽度600，花费1秒 */
            transition: width 1s,background-color 2s;
        }
        .box:hover {
            background-color: red;
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

deeplearning.ai第五课第一周课后空白作业
08-26
提到“第五课还有第二周第三周”，暗示这个系列作业是连续的，覆盖了整个第五课的学习内容。由于文件大小的限制，第二周和第三周的作业没有包含在这个压缩包内，但可以通过其他方式获取，可能是通过同一上传者的其他...
deeplearning.ai第五课第三周课后空白作业
08-26
在本课程中，我们聚焦于深度学习的"第五课——深度学习进阶"的第三周内容，这是一项由吴恩达教授主讲的deeplearning.ai系列课程。在这个阶段，学员们将深入学习到深度学习的高级技术，包括卷积神经网络（CNNs）、...
ubuntu软件更新器：正在等待packagekited退出
csdnhhxxttxs的博客
01-29 7407
解决：systemctl stop packagekit systemd是Linux系统最新的初始化系统(init)，作用是提高系统的启动速度，尽可能启动较少的进程，尽可能更多进程并发启动。 systemctl是systemd对应的进程管理命令。 ...
Ubuntu(虚拟机)设置为全屏
qq_44774031的博客
01-06 841
1.正在等待packagekited退出 运行： systemctl stop packagekit 2.与主机的复制粘贴 和 全屏 安装Vmware tools. 3.实现sftp传输文件（windows->ubuntu） sudo apt-get install openssh-server 4.Ubuntu的几种下载方式 a.源码安装 b.rpm包安装 c.yum安装 5.Ubuntu解压方式 a.rar解压 tar zxv XXXX.rar b.zip解压 c.tar.gz解压 tar zxv
# 2021-01-13 #「GNOME」- 关闭 PackageKit 服务
k4nz
01-13 1641
问题描述 PackageKit，包管理服务，通过 DBus 接口，执行某些简单的包管理任务，比如刷新缓存，安装、更新、移除软件等等。 但是该服务经常占用大量 CPU 资源，非常多，而且一直有人反馈这个问题：https://gitlab.gnome.org/GNOME/gnome-software/issues/512https://bugs.launchpad.net/appcenter/+bug/1587975https://www.reddit.com/r/linuxquestions/comme.
ubuntu 更新软件源
weixin_30784141的博客
03-27 1085
ubuntu 更新软件源 问题：正在等待packagekitd退出 解决办法：systemctl stop packagekit 或者systemctl disable packagekit 转载于:https://www.cnblogs.com/xpylovely/p/10611394.html...
centos7禁止packagekitd
weixin_33935505的博客
06-18 1686
sudo systemctl disable packagekitd详细见：http://ask.xmodulo.com/disable-packagekit-centos-fedora-rhel.html 转载于:https://blog.51cto.com/mingtangduyao/1790667
六周第四次课,六周第五次课
chonghaozhi7746的博客
07-10 109
六周第四次课 复习 扩展 打印某行到某行之间的内容http://ask.apelearn.com/question/559 sed转换大小写 http://ask.apelearn.com/question/7758 sed在某一行最后添加一个数字http://ask.apelearn.co...
C语言第十五周课——课堂练习
qq_58156721的博客
11-29 1841
定义一个能被其它函数调用的函数min(x,y,z)要求：写死三个数字，并求这三个数中最小值。要求：输出下面形状在控制台。一下代码输出结果为什么？
第五周英语课学习心得
weixin_62995364的博客
03-25 125
这一周的英语课，我们把第一单元的课文学完了，学到了课文中一些有趣的知识点，老师还给我们布置了四级词汇的背诵任务，希望课后自己能多巩固复习背诵。
第四部分，吴恩达深度学习第五次课第3周周课后编程作业答案-版本二-更详细-jupyter note版本
10-24
第四部分，吴恩达深度学习第五次课第3周周课后编程作业答案-版本二-更详细-jupyter note版本第五次课1-2周。因为整个文件太大了。所以分4次上传。都只要一个积分，我找了很久，留作自己学习使用，同时分享给大家
deeplearning.ai第五课第二周课后空白作业
08-26
标题 "deeplearning.ai第五课第二周课后空白作业" 暗示了这是一个与深度学习相关的学习资源，特别是吴恩达（Andrew Ng）教授的课程。吴恩达是斯坦福大学的计算机科学教授，他在Coursera上的“深度学习专项课程”...
chenyang1999#MyComputerCollegeCourses#第 6 周第 1 次课作业1
07-25
第五章 数据库完整性 课后习题 4、5、6、74、关系数据库管理系统的完整性控制机制应具有哪三个方面的功能？( l ）定义功能，即提供定义完整性约束条件的机制；
Mac OS 使用说明
2401_89600819的博客
05-28 973
了解可通过在启动时按住一个或多个按键来访问的 Mac 功能和工具。若要使用这些组合键中的任何一个，请在按下电源按钮以后或在 Mac 开始重新启动后，立即按住相应按键。请一直按住，直至电脑出现对应的行为。!!!上电启动按键才有效(冷启动)!!!如果您的 Mac 使用了[固件密码](https://support.apple.com/zh-cn/HT204455)，这些组合键全都会被停用（下文中另有注明的组合键除外）。从内建的系统启动。
shell脚本中常用的命令
2302_81660458的博客
05-29 203
b)网卡被设定，需要修改。a)当网卡没有被设置时。
shell编程之sed命令详解
2301_81704123的博客
05-28 734
sed（流编辑器）是一种非交互式文本处理工具，基于预设规则逐行处理数据流（文件或管道输入）。注意：不管后面有没有新加参数都一定要分隔符（一般为/，但是分隔符可以自己定义，改为其他的也行）结尾。将SELINUX=.*替换为SELINUX=disabled。修改完配置文件后要将虚拟机重启才能生效，reboot。复制/etc/grub2.cfg。它配置文件有将3种不同形式列出来。，按命令处理后输出到标准输出，行到末行最前面加’aaa:’就是用-i将文件直接修改。1、无-e直接分号分隔。2、有-e直接空格分隔。
【HW系列】—溯源与定位—Linux入侵排查
最新发布
2402_84408069的博客
05-31 956
本文介绍了Linux系统入侵排查的关键步骤：1）账户安全排查，重点检查UID=0的特权用户和sudo权限配置；2）历史命令审查，分析可疑操作记录；3）异常端口与进程检测，包括端口占用分析、进程深度检查及隐藏进程识别方法。文中提供了详细的命令示例和操作指南，如使用netstat/ss查看端口、ls -l /proc/PID/exe验证进程路径等，并强调备份账户文件、比对系统进程与/proc目录差异等安全实践。通过系统化检查可有效发现入侵痕迹。
【shell】通过Shell命令占用内存
u011144881的博客
05-31 342
本文介绍了5种通过Shell命令占用内存的方法：使用dd命令读写数据、stress工具进行压力测试、结合mktemp创建临时文件、以及利用perl和python生成大字符串。每种方法都提供了具体命令示例和参数说明（如调整count值控制内存大小），适用于内存性能测试和调试场景。文章特别提醒要注意系统资源监控（使用free -m或top），避免影响系统稳定性，并建议测试后清理临时文件。这些方法可根据需求灵活调整内存占用大小，是实用的系统测试技术。
梯形面积计算shell脚本
2403_89034914的博客
05-28 176
【代码】梯形面积计算shell脚本。
深度学习课程第五课第三周作业解析
在深入探讨吴恩达的深度学习课程中关于序列模型的第三周编程作业之前，需要了解该课程的基础概念和相关知识点。吴恩达（Andrew Ng）是人工智能领域的知名学者，他的深度学习课程是目前最受欢迎的在线课程之一，尤其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值