html+css3 补充学习

smile_pbb

已于 2024-03-15 19:56:42 修改

阅读量468

点赞数 7

分类专栏：前端文章标签： html css3 学习

于 2024-01-19 20:02:01 首次发布

本文链接：https://blog.csdn.net/smile_pbb/article/details/135706072

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、html常用标签

1.文本标签

1.1 strong

着重阅读，也可以理解为加粗效果

<p>
        这是一个<strong>测试页面</strong>
</p>

2.字符实体

2.1 空格

&nbsp;

2.2 一个中文宽度实体

&emsp;

例子

<h3>用户名</h3>
<h3>密&emsp;码</h3>

二、CSS

1.选择器

标签、类、id选择非常常用，前边的文档写过了，不在记录了

1.1 后代选择器

子标签子子标签子子子标签都是后代选择器

ul li {
	color:red
}

1.2 子代选择器

子代选择器只选择下边1层

ul > li {
    color:red
}

更多写法

.box > li {}
.box > li > li {}
#box > li {}
p.box > li {} #是p标签并且类选择是box的子代是li的

1.3 兄弟选择器

相邻兄弟选择器

当前元素div下边的相邻的 p元素。只是下边1个。上边的不包括

div + p {}

通用兄弟选择器

~ 代表下边的所有

div ~ * {}  div下边的所有标签
div ~ p {}  div下边的所有p标签

1.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 属性选择器 */
        [title] {color: gold}
        [href] { color:red}
    </style>
</head>
<body>
    <p>
      <div title="哈哈哈">你好</div>
      <a href="www.baidu.com">百度一下</a>
    </p>
</body>
</html>

2.文本属性

2.1 水平居中

text-align ：center 文本水平居中

div {
 background-color: green;
 text-align: center;
}

2 2 垂直居中

如果要垂直居中让div height=line-height

div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
    		background-color: green;
}

3.列表属性

取消列表的默认前边序号

ul,ol {
    list-style-type:none;
}

4.鼠标样式

div {
  width: 100px;
  height: 100px;
  background-color: green;
  /* 鼠标移动到盒子的时候会变成小手 */
   cursor: pointer;
}

5.元素的显示模式

display属性
dispaly: none 还可以隐藏元素

  div {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 块元素变成 行内块元素 */
            display: inline-block;
  }

6.元素之间的空白

元素之间的空白缝隙会出现在行内元素和行内块元素之间，块元素不会出现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: yellow;
        }
        
        
    </style>
</head>
<body>
    <!-- 这样就没有空格 -->
    <span class="d1">新闻</span><span class="d2">运动</span><span class="d3">音乐</span>
    
     <!-- 这样就就有空格，这是因为html将换行符是视为一个空格-->
    <span class="d1">新闻</span>
    <span class="d2">运动</span>
    <span class="d3">音乐</span>
 </body>
</html>

解决办法：
在html中空格也是一个字符，利用front-sze:0 所有的文字都会消失的特性，在父标签中将所有字体设置为0，这时候空格也就没有了，在将要显示的文字设置指定的大小，这样就可以去除空格了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            font-size: 0;
        }
        .box span {
            font-size: 16px;
        }

        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: yellow;
        }
        
        
    </style>
</head>
<body>
    <!-- 这样就没有空格 -->
    <div class="box">
        <span class="d1">新闻</span>
        <span class="d2">运动</span>
        <span class="d3">音乐</span>
    </div>
    
 </body>
</html>

行内块元素之间的缝隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0px;
            margin: 0px;
        }
        .box {
            font-size: 0;
            list-style-type: none;
            padding: 0px;
            
        }
        .box li {
            font-size: 16px;
            display: inline-block;
        }

        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: yellow;
        }
        
        
    </style>
</head>
<body>
    <!-- 这样就没有空格 -->
    <ul class="box">
        <li class="d1">地图</li>
        <li class="d2">新闻</li>
        <li class="d3">运行</li>
    </ul>
    
 </body>
</html>

三、CSS3

1.新增盒子大小属性

box-sizing： 它有两个值
	content-box 默认属性 会随着边框、内边距的增加整体盒子会变大
	border-box 盒子定义的多大就是多大，不会因为边框 内边距的增加而盒子变大。

2.新增盒子边框属性

border-radius 显示圆角效果

.box {
            width: 200px;
            height: 200px;
            padding: 5px;
            border: 5px green solid;
            border-radius: 50px;
        }

3.伸缩盒模型Flex

3.1 基本概念

display: flex
父标签称为: 伸缩容器
子标签称为: 伸缩项目
一个标签一旦称为伸缩项目不论它是行级元素还是块元素全部会变成块元素，也就是说可以使用宽高属性。

3.2 伸缩模型实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            /* 父标签变成了伸缩容器 */
            display: flex;
        }
        /*行级元素 span 变成了伸缩项目 就可以使用宽高了*/
        span {
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px black solid;
        }

	
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
 </body>
</html>

4.伸缩盒模型-主轴换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            display: flex;
            /*主轴换行，当伸缩项目的个数超出伸缩容器一行内容容纳的个数时，自动换行，而不是压缩伸缩项目的盒子大小*/
            flex-wrap: wrap;
        }
        
        span {
            height: 200px;
            width: 200px;
            background-color: red;
            border: 1px black solid;
            box-sizing: border-box;
        }


    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
 </body>
</html>

5.伸缩盒模型-主轴对齐方式

justify-content：
	space-around  伸缩项目均匀的分布在一行，项目之间的距离是边缘距离的两倍
	space-between: 伸缩项目边缘没有距离，项目之间的距离是相等的. 这种用的比较多
	space-evenly： 伸缩项目完全均匀的分布在一行

6.伸缩和模型的水平垂直居中

方案1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            display: flex;
            /*水平居中*/
            justify-content: center;
             /*垂直居中*/
            align-items: center;
        }
        
        span {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>    
    </div>    
 </body>
</html>

方案2 比较简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            display: flex;
        }
        
        span {
            height: 100px;
            width: 100px;
            background-color: red;
            /*伸缩项目 margin自动，也可以居中*/
            margin: auto;
        }


    </style>
</head>
<body>
    <div class="box">
        <span>1</span>    
        <span>1</span>  
        <span>1</span>   
    </div>
 </body>
</html>

7.2D位移 tranform

这里实现了一个盒子在屏幕中间居中的效果。
tranform在做位移时，如果使用百分比位移，这个百分比是自己宽度的百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer {
            width: 500px;
            height: 300px;
            background-color: #ddd;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*基于绝对定位后的位置 在x轴上向左50%，在y轴上向上50%*/
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body>
    <div class="outer">

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

四、盒子的padding

1.块元素的padding

1.1 复合写法

复合写法，这样的写法父盒子的大小变大。

# 四个方向都是20px
padding: 20px；

# 上下20px  左右30px
padding: 20px 30px;

# 上20 左右30  下40
padding: 20px 30px 40px;

1.2 单方向写法

padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;

2.行内元素的padding

行内元素，设置左右padding没有任何问题，上下的padding就会有问题。
以下例子就能说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            background-color: gray;
        }
        span {
            font-size: 20px;
            background-color: orange;
            padding: 50px 100px;

        }
    </style>

</head>

<body>
    <div class="outer">
    </div>
    <hr>
    <span>hello</span>
    <p>测试文字</p>
</body>
</html>

五、盒子的margin

1.子盒子margin的参考点

在盒子嵌套的场景中。
如果父盒子有padding，那么设置子盒子的margin的时候是从内容的边缘开始计算mrgin
如果父盒子没有padding，那么设置子盒子的margin的时候是从父盒子的左上角开始计算

2.设置margin对位置的影响

2.1 设置上和左

如果设置 “上和左” 的margin，不会影响前边的盒子，会影响当前盒子的位置，后边的盒子也会因为当前盒子位置的变化而变化

2.2 设置右和下

如果设置了右和下，上边的和当前的盒子的位置不会发生变化，后的盒子会发生变化

3.行内元素的margin

行内元素设置左右margin正常，上下margin直接无效。padding是上下有问题，不是无效

注意：

在设置行内元素的padding和margin的时候，不要使用上下距离。只使用左右距离

4.margin的取值

margin可以设置负值

5.外边距塌陷问题

5.1 什么是外边距塌陷

在父盒子中，第一个子盒子的上边距离，或者最后一个盒子的下边距，都会作用在父盒子上，这就叫做外边距塌陷

5.2 解决方案

1.给父盒子加padding
2.给父盒子加border
3.父盒子添加css属性 overflow: hidden（推荐）

6.margin合并问题

什么是margin合并：
上边盒子的"下边距" 和下面盒子的"上边距"会合并，如果两个值有大有小则取大值。不论两个值是否相等都不会相加

7.内容溢出处理

如果一个盒子中的内容溢出了盒子内容，可以使用

溢出内容 全部隐藏
overflow: hidden

或者：
溢出内容后会出现滚动条
overflow: auto