CSS相关知识【黑马程序员前端】

最新推荐文章于 2023-04-07 16:12:26 发布
最新推荐文章于 2023-04-07 16:12:26 发布
阅读量1.4k 收藏 45
点赞数 6
分类专栏： HTML/CSS/JavaScript/jQuery 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48964052/article/details/125951788
版权

文章目录

一、CSS 的外部引入方式

<link rel="stylesheet" href="">

二、 基础选择器

2.1 标签选择器

标签名 { css属性名: 属性值; }
body {
	background-color: skyblue;
}

2.2 类选择器

.类名 { css属性名: 属性值; }
.box {
    width: 200px;
    height: 200px;
}

2.3 id 选择器

#id属性值 { css属性名: 属性值; }
#box {
    width: 200px;
    height: 200px;
}

2.4 通配符选择器

* { css属性名: 属性值; }
* {
    margin: 0;
    padding: 0;
}

三、字体样式

3.1 字体大小(font-size)

font-size: 16px;

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

3.2 字体粗细(font-weight)

font-weight: bold;

取值：

效果关键字
正常normal
加粗bold
正常400
加粗700

3.3 字体样式(font-style)

font-style: italic;
效果取值
正常（默认值）normal
倾斜italic

3.4 字体系列(font-family)

font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYiMicro Hei",sans-serif;
系统默认字体
Windows微软雅黑
macOS苹方

3.5 字体font相关属性的连写

font: style weight size/line-height family;

3.6 字体颜色(color)

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

四、文本样式

4.1 文本缩进

text-indent: 2em;

取值：

  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的 font-size 的大小）

4.2 文本水平对齐方式

text-align: center;
  • 取值：
属性值效果
left左对齐
center居中对齐
right右对齐

4.3 水平居中方法总结 text-align : center

  • text-align : center 能让哪些元素水平居中？

    1. 文本

    2. span标签、a标签

    3. input标签、img标签

  • 注意点：

    1. 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

4.4 文本修饰

text-decoration: none;
  • 取值
属性值效果
underline下划线（常用）
line-through删除线（不常用）
overline上划线（几乎不用）
none无装饰线（常用）

注意：

开发中会使用 text-decoration: none; 清除a标签默认的下划线

五、复合选择器

5.1 后代选择器

选择器1 选择器2 { css }

5.2 子代选择器

选择器1 > 选择器2 { css }

5.3 并集选择器

选择器1, 选择器2 { css }
  • 作用：同时选择多组标签，设置相同的样式

5.4 交集选择器

选择器1选择器2 { css }
  • 选中页面中 同时满足 多个选择器的标签

5.5 hover 伪类选择器

// 鼠标悬停在元素上的状态
选择器:hover { css }

5.6 Emmet 语法

六、背景相关属性

6.1 背景颜色

background-color: #000;
background-color: black;
background-color: rgb(0,0,0);
background-color: rgb(0,0,0,0.5);

6.2 背景图片

background-image: url('图片的路径');

注意点：

  • 背景图片中url中可以省略引号

  • 背景图片默认是在水平和垂直方向平铺的

  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

6.3 背景平铺

background-repeat: no-repeat;
  • 属性值：
取值效果
repeat(默认值) 水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿着水平（x轴）平铺
repeat-y沿着垂直（y轴）平铺

6.4 背景位置

background-position: 0 0;

  • 属性值：background-position: 水平方向位置 垂直方向位置;

  • 属性值：方位名词

  • 属性值：数字 + px (坐标)

分类方向属性值
方位名词水平方向left
方位名词水平方向center
方位名词水平方向right
方位名词垂直方向top
方位名词垂直方向center
方位名词垂直方向bottom
数字 + pxx轴水平向右
数字 + pxy轴垂直向上

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

6.5 背景相关属性的连写形式

background: color image repeat position;

七、元素显示模式

7.1 块级元素

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

显示特点：

  1. 独占一行（一行只能显示一个）

  2. 宽度默认是父元素的宽度，高度默认由内容撑开

  3. 可以设置宽高

7.2 行内元素

a、span 、b、u、i、s、strong、ins、em、del……

显示特点：

  1. 一行可以显示多个

  2. 宽度和高度默认由内容撑开

  3. 不可以设置宽高

7.3 行内块元素

input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

显示特点：

  1. 一行可以显示多个

  2. 可以设置宽高

7.4 元素显示模式转换

属性效果使用频率
display: block转换成块级元素较多
display: inline-block转换成行内块元素较多
display: inline转换成行内元素极少

7.5 居中方法总结

  • 水平居中
  1. text-align: center;

适用：

  1. 文本
  2. 行内元素。如：span、a
  3. 行内块元素。如：input、img

注意点：如果需要让以上元素水平居中，此时直接在以上元素的父元素中设置即可。

  1. margin: 0 auto;

适用：

  1. 块级元素

注意点：直接给当前元素设置即可。

  • 垂直居中

line-height 的值 (等于) 盒子的高度, 即 line-height: 盒子的高度;

适用：单行文本。

八、CSS 特性

8.1 继承性

子元素有默认继承父元素样式的特点

8.2 层叠性

1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

8.3 优先级

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

九、盒子模型

9.1 内容的宽度和高度

width: 200px;
height: 200px;

9.2 盒子边框

作用属性名属性值
边框粗细border-width数字 + px
边框样式border-style实线 solid、虚线 dashed、点线 dotted
边框颜色border-color颜色取值

9.3 盒子边框连写形式

border: 1px solid red;

9.4 盒子内边距

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
取值示例含义
一个值padding: 10px;上右下左都设置为10px
两个值padding: 10px 20px;上下设置为10px、左右设置为20px
三个值padding: 10px 20px 30px;上设置为10px、左右设置为20px、下设置为30px
四个值padding: 10px 20px 30px 40px;上设置为10px、右设置为20px、下设置为30px、左设置为40px

9.5 CSS3 盒模型（自动内减）

box-sizing: border-box;

优点：浏览器会自动计算多余大小，自动在内容中减去。

9.6 盒子外边距

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px
margin-left: 40px;
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
取值示例含义
一个值margin: 10px;上右下左都设置为10px
两个值margin: 10px 20px;上下设置为10px、左右设置为20px
三个值margin: 10px 20px 30px;上设置为10px、左右设置为20px、下设置为30px
四个值margin: 10px 20px 30px 40px;上设置为10px、右设置为20px、下设置为30px、左设置为40px

9.7 清除默认内外边距

* {
    margin: 0;
    padding: 0;
}

9.8 外边距折叠现象 – ① 合并现象

  • 场景：垂直布局 的 块级元素，上下的margin会合并

  • 结果：最终两者距离为margin的最大值

  • 解决方法：避免就好

    • 只给其中一个盒子设置margin即可

9.9 外边距折叠现象 – ② 塌陷现象

  • 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

  • 结果：导致父元素一起往下移动

  • 解决方法：

  1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

  2. 给父元素设置overflow：hidden

  3. 转换成行内块元素

  4. 设置浮动

9.10 行内元素的margin和padding无效情况

  • 场景：给行内元素设置margin和padding时

  • 结果：

  1. 水平方向的margin和padding布局中有效！

  2. 垂直方向的margin和padding布局中无效！

十、结构伪类选择器

选择器说明
E:first-child {}匹配父元素中第一个子元素，并且是E元素
E:last-child {}匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {}匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {}匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

  1. n为：0、1、2、3、4、5、6、……
  2. 通过n可以组成常见公式
功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前5个-n+5
找到从第5个往后n+5

十一、伪元素

  • 伪元素：一般页面中的非主体内容可以使用伪元素

  • 区别：

  1. 元素：HTML 设置的标签

  2. 伪元素：由 CSS 模拟出的标签效果

  • 种类：
伪元素作用
::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

注意点：

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            // content: '老鼠';
			content: '';
            color: white;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }

        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>
</html>

十二、浮动

float: left;
float: right
  • 属性值：
属性名效果
left左浮动
right右浮动

十三、清除浮动

13.1 浮动的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

在这里插入图片描述

13.2 清除浮动的方法 — ① 直接设置父元素高度

  • 特点：

    • 优点：简单粗暴，方便
    • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

  • 例如：.top { height: 300px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

在这里插入图片描述

13.3 清除浮动的方法 — ② 额外标签法

  • 操作：
    1. 在父元素内容的最后添加一个块级元素
    2. 给添加的块级元素设置 clear:both;

在这里插入图片描述
在这里插入图片描述

  • 特点：
    • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
  • 例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .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>

在这里插入图片描述

13.4 清除浮动的方法 — ③ 单伪元素清除法

  • 操作：用伪元素替代了额外标签
    ① ：基本写法
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

② ：补充写法

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

在这里插入图片描述

  • 特点：
    • 优点：项目中使用，直接给标签加类即可清楚浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .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>

在这里插入图片描述

13.5 清除浮动的方法 — ④ 双伪元素清除法

  • 操作：
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}

在这里插入图片描述

  • 特点：
    • 优点：项目中使用，直接给标签加类即可清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

在这里插入图片描述

13.6 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

  • 操作：
    1. 直接给父元素设置 overflow : hidden;

在这里插入图片描述

  • 特点：
    • 优点：方便
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
            overflow: hidden;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

在这里插入图片描述

十四、定位

  • 属性值：position
定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed
  • 设置偏移量
方向属性名属性值含义
水平left数字 + px距离左边的距离
水平right数字 + px距离右边的距离
垂直top数字 + px距离上边的距离
垂直bottom数字 + px距离下边的距离

14.1 静态定位

静态定位是默认值，就是之前认识的标准流。

position: static;

14.2 相对定位

  • 相对于自己原来位置进行移动
  • 没有脱标
position: relative;

14.3 绝对定位

  • 默认相对于浏览器可视区域进行移动
  • 脱标
position: absolute;

14.4 子绝父相水平垂直都居中

  1. 子绝父相

  2. 让子盒子往右走大盒子一半

​ left：50%;

  1. 让子盒子往下走大盒子一半

    top：50%;

  2. 让子盒子往左+往上走自己的一半+ + transform：translate(-50%，-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 1. 绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动: 自己宽度的一半 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

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

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

14.5 固定定位

  • 相对于浏览器进行定位移动

  • 代码：position: fixed;

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

  • 已经脱标

14.6 元素层级问题

  • 不同布局方式元素的层级关系：

    • 标准流 < 浮动 < 定位

  • 不同定位之间的层级关系：

    • 相对、绝对、固定默认层级相同
    • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

14.7 更改定位元素的层级

  • 场景：改变定位元素的层级

  • 属性名：z-index

  • 属性值：数字

    • 数字越大，层级越高

十五、装饰

15.1 垂直对齐方式

  • 浏览器文字类型元素排版中存在用于对齐的基线（baseline）
  • 浏览器把行内和行内块当做文字处理，默认基线对齐
属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐
  • 案例1：两个<input>标签高度不没有对齐
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			input {
				height: 50px;
			}
		</style>
	</head>
	<body>
		<input type="text" />
		<input type="button" value="搜索" />
	</body>
</html>

在这里插入图片描述

在<input>标签中加入box-sizing: border-box;和vertical-align: middle; 即：

input {
    height: 50px;
    box-sizing: border-box;
    vertical-align: middle;
}

在这里插入图片描述

  • 案例2：<img>标签和<input>的高度不一样
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<img src="../微信小程序/mp-3/images/link-01.png" />
		<input type="text" />
	</body>
</html>

在这里插入图片描述

找到大盒子，即<img>标签，让其添加vertical-align: middle; 即可让<input>居中：

img {
    vertical-align: middle;
}

在这里插入图片描述

  • 案例3：<input>标签并没有跟底部的<div>的上面重合，依然有间隙
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.father {
				width: 400px;
				height: 400px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<input type="text" />
		</div>
	</body>
</html>

在这里插入图片描述

在 <input>标签中加入 vertical-align: top; 即可使 input标签与 div的顶部重合，即

input {
    vertical-align: top;
}

在这里插入图片描述

  • 案例4：图片和div的底部并没有重合
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.father {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<img src="../微信小程序/mp-3/images/link-01.png" />
		</div>
	</body>
</html>

在这里插入图片描述

给 input 标签添加 vertical-align: bottom; 或者添加 display: block;，即可

img {
    /* display: block; */
    vertical-align: bottom;
}

在这里插入图片描述

  • 案例5：图片没有在 div 中居中显示
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.father {
				width: 600px;
				height: 600px;
				background-color: pink;
				line-height: 600px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<img src="../微信小程序/mp-3/images/link-01.png" alt="" />
		</div>
	</body>
</html>

在这里插入图片描述

在 img 中添加 vertical-align: middle; 样式即可

img {
    vertical-align: middle;
}

在这里插入图片描述

15.2 光标类型

  • 场景：设置鼠标光标在元素上时显示的样式

  • 属性名：cursor

  • 常见属性值：

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

15.3 边框圆角

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

  • 属性名：border-radius

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

  • 原理：

在这里插入图片描述

  • 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 50px auto;
				/* 一个值：表示4个角是相同的 */
				/* border-radius: 20px; */
				/* 4个值：左上 右上 右下 左下 -- 从左上顺时针转一圈 */
				/* border-radius: 10px 20px 30px 40px; */
				/* 3个值：左上 （右上和左下） 右下 */
				/* border-radius: 10px 40px 80px; */
				/* 2个值：（左上/右下） （右上/左下） */
				border-radius: 10px 80px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
  • 案例：圆角边框

画一个正圆：

  1. 盒子必须是正方形

  2. 设置边框圆角为盒子宽高的一半 → border-radius:50%

胶囊按钮：

  1. 盒子要求是长方形

  2. 设置 → border-radius：盒子高度的一半

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.one {
				width: 200px;
				height: 200px;
				background-color: pink;
				border-radius: 50%;
			}
			.two {
				height: 200px;
				width: 400px;
				background-color: skyblue;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

在这里插入图片描述

15.4 overflow 溢出部分显示效果

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

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

  • 属性名：overflow

  • 常见属性值

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

15.5 元素本身隐藏

  • 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

  • 常见属性：

  1. visibility: hidden;

  2. display: none;

  • 区别：

  1. visibility: hidden; 隐藏元素本身，并且在网页中 占位置

  2. display: none; 隐藏元素本身，并且在网页中 不占位置

  • 注意点：

    开发中经常会通过 display属性完成元素的显示隐藏切换

    display: none;（隐藏）、 display: block;（显示）

本文参考及图片来源：最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程

1465235465@qq.com
关注
  • 6
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
中国大陆网站TOP100
小发猫
06-21 6万+
1. 新浪新闻中心 包括即日的国内外不同类型的新闻与评论，人物专题，图库。 {BRwww.sina.com.cn 2. Baidu.com 全球最大中文搜索引擎，向人们提供简单、可依赖的信息获取方式。{BRwww.baidu.com 3. 搜狐 资源导航为主要业务的门户网站，经营综合性业务，社区，无线等增值服务。 {BRwww.sohu.com 4. 网易 中国最大的网络社区和门户网站 {BRww
20201101CSS第一天
Ambiguity0013的博客
11-01 208
CSS第一天 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去
CentOS添加永久静态路由
dingzz的专栏
07-02 4334
在使用双网卡，同时使用 2 个网关的时候就需要加一条静态路由了。当然还有很多时候会需要 加路由。     一：使用   route  命令添加   使用 route  命令添加的路由，机器重启或者网卡重启后路由就失效了，方法：   // 添加到主机的路由   # route add  – host 192.168.1.11 dev eth0  # rout
技术泡妹子二：篡改百度首页，惊呆女神
五只鸭子的专栏
01-17 2万+
大多数网民上网的入口都是先打开百度，然后再搜索xxx,进入，为了给女神惊喜，决定篡改百度首页让女神惊呆，当然不是黑了百度，目前没这个实力，但是我们可以修改host文件，将www.baidu.com 指向自己的机器，或者你自己的云端服务器，然后当女神打开百度的时候就会打开你做好的网页了，她会惊讶的，哈哈哈。
http://www.115ps.com/all.html,plnt-20200804
热门推荐
weixin_32389853的博客
06-19 24万+
0001637207-20-000037.txt : 202008040001637207-20-000037.hdr.sgml : 2020080420200804161432ACCESSION NUMBER:0001637207-20-000037CONFORMED SUBMISSION TYPE:8-KPUBLIC DOCUMENT COUNT:15CONFORMED PERIOD OF R...
黑马程序员前端小白零基础入门HTML5+CSS3
06-19
本教程"黑马程序员前端小白零基础入门HTML5+CSS3"专为初学者设计，旨在帮助那些对前端开发感兴趣的朋友们从零开始学习这两门技术。 HTML5是超文本标记语言的最新版本，它的出现极大地增强了网页的交互性和表现力。...
2018黑马程序员web前端开发视频
12-11
通过上述内容可以看出，“2018黑马程序员web前端开发视频”涵盖了从基础知识到高级技能全方位的Web前端开发知识点。无论是对于初学者还是有一定经验的开发者来说，这套视频都是非常有价值的资源。通过系统性地学习...
2018黑马程序员前端36期全套视频教程【就业班+文档+代码+视频】
02-18
《2018黑马程序员前端36期全套视频教程》是一部综合性的前端开发学习资源，旨在帮助初学者和有一定基础的开发者系统提升前端技能。该教程涵盖了Web开发的基础到高级内容，结合就业班的实战项目，旨在培养学员的实战...
免费下载前端HTML，CSS总结(b站黑马程序员540集)
最新发布
06-19
观看视频教程可以帮助理解概念，笔记则有助于巩固知识点，实际动手编写代码则能加深理解并提升技能。通过这样的综合学习，你可以快速掌握前端开发的基础，并逐渐进阶到更高级的主题，如JavaScript交互、框架应用（如...
黑马程序员JAVA WEB全笔记pdf
03-26
本笔记基于黑马程序员的课程内容，全面覆盖了Java Web的基础知识，包括前端开发技术如HTML、CSS、JavaScript，以及后端服务器端的Java Servlet和JSP（Java Server Pages）。 一、前端基础 1. ...
Html Code 基本应用
weixin_30439131的博客
09-06 435
1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if(value=='') {value='mm'}"&g...
链接标签的使用
qq_53339925的博客
07-12 4735
什么是链接？ 链接相当于是一个传送门，点击链接就可以从该页面，跳转到其他页面，或者从该页面跳转到该页面的其他地方。 链接的表现形式有哪些？ 链接可以表现为文字，图片，等等。 基本用法： <a href="https://www.baidu.com/">百度</a> href是a标签的一个属性值，没有该属性值就不能进行链接，href也要写等号和双引号括住里面的网站。a标签中的百度就是显示在页面中的，也就是说，当我们点击百度时，就会跳转到百度页面去。 刚刚说明a标签是可以
200个js代码（一）
wzhouen1314的博客
06-22 907
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 点击时文字消失，失去焦点时文字再出现 2.网页按钮的特殊颜色 3.鼠标移入移出时颜色变化 4.平面按钮 5.按钮颜色变化 6.平面输入框 ...
日常积累
jyf1226的博客
10-10 1万+
1. 如何对mysql数据库已存在表进行修改 2. 查看mysql 数据库引擎 3. defunct进程    ps -aux | grep defunct 表示的是僵尸进程     4. 检测进程打开的文件句柄数： lsof -p pid 5. sg_test 是 server 还是 client 6. 对于每一个Login， 是新启动CgiLogi
企业实战面试题
change的博客
03-16 2万+
1. 在Java中,负责对字节代码解释执行的是(B)A. 应用服务器B. 虚拟机C. 垃圾回收器D. 编译器2. 一个栈的输入序列为1 2 3 4 5,则下列序列中不可能是栈输出的序列的是(A) A. 5 4 1 3 2 B. 2 3 4 1 5 C. 1 5 4 3 2 D. 2 3 1 4 53. 下列那一个选项按照顺序包括了OSI模型的7个层次( C) A. 物...
PyCharm下载和安装
weixin_43495473的博客
12-16 2万+
PyCharm下载和安装 进入https://www.jetbrains.com/pycharm/download/#section=windowsPyCharm官方下载页面（如图 2 所示），可以看到 PyCharm 有 2 个版本，分别是 Professional（专业版）和 Community（社区版）。其中，专业版是收费的，可以免费试用 30 天；而社区版是完全免费的。 图2 强烈建议初学...
20美亚个人赛，尽可能详细的写，第一次写，技术不好，如果有不同的观点，请一定要提出建议。（工具就用美亚和火眼）
2301_76717243的博客
04-07 6771
20美亚个人赛，尽可能详细的写，第一次写，技术不好，如果有不同的观点，请一定要提出建议。（工具就用美亚和火眼）
各大公司题目整理
zr459927180的博客
07-18 2万+
原文地址： http://www.myexception.cn/program/1448019.html 最新百度 阿里 华为 腾讯 谷歌面试笔试题及解析 8月15日，百度2道面试题： 1、来自《编程之美》的概率题：一个桶里面有白球、黑球各100个，现在按下述规则取球：的     i 、每次从通里面拿出来两个球；     ii、如果取出的是两个
英文投稿的一点经验【转载】
jianwushuang的专栏
05-31 2万+
<br />英文投稿的一点经验【转载】<br />1. 首先一定要注意杂志的发表范围, 超出范围的千万别投,要不就是浪费时间;另外，每个杂志都有他们的具体格式要求，一定要按照他们的要求把论文写好，免得浪费时间，前些时候，我的一个同事向一个著名的英文杂志投稿，由于格式问题，人家过两个星期就退回来了，而且说了很多难听的话，说投稿前首先就应该看清楚他们的格式要求；<br />2. 论文写作一定要言简意赅,特别是摘要,引言和结论部分,特别是摘要和结论不能重复,发现有很多论文这两部分没有差别, 个人认为, 摘要是引人
黑马程序员Vue前端学习笔记：从基础到高级特性
前端学习笔记-黑马程序员Vue是一份全面介绍Vue.js框架的教程，旨在帮助初学者快速理解和掌握Vue的核心概念和用法。Vue作为现代前端开发的重要工具，其特点包括： 1. **轻量级框架**：Vue起始于简化Web应用开发，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值