web前段开发（第三周）

最新推荐文章于 2024-07-30 23:06:43 发布

Gog_Fairy

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量198

点赞数

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

本文链接：https://blog.csdn.net/Gog_Fairy/article/details/127662935

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，

1.1 标签选择器（TAG选择器）

div{} <div> <div>
使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器
两种转化背景的方式
第一种如下：

<style>
		div{background:red;}
		#text{background:red;}
		.title{background:red;}
	</style>
</head>
<body>
	<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
	
</body>
</html>

第二种简便方法：
群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码复用的效果.

<style>
	div,#text,.title{background-color: red;}
	</style>

效果展示：
在这里插入图片描述

1.2通配选择器

*{ }

*{border:1px red solid;}
经量避免使用通配选择器，因为会给所哟的标签添加样式

应用场景：去掉所有标签的应用样式

二，层次选择器

后代：M N{}
父子：M>N{ }
兄弟：M~N{ }当前M下的所有兄弟N标签
相邻：M+N{ }当前m下面相邻的N标签

三，属性选择器

1.1

M[ attr]{ }
*=:部分匹配 div[class*=search]
=：完全匹配
^=:起始匹配，给一开始，第一个单词进行检索并操作
$=:结束匹配
多个中括号进行组合匹配
在这里插入图片描述

四、伪类选择器（1）

1.1

M：伪类{}
四大类伪类选择器
:link 访问前的样式（只能添加的A标签）
:visited 访问后的样式（只能添加的A标签）
:hover 鼠标移入时的样式（所有的都可以）
:active鼠标按下时候的样式（所有的都可以）
代码展示：

<style>
div{width:200px;height:200px;background-color: red;}
div:hover{background-color: blue;}
div:active{background-color: green;}
</style>

效果展示：
在这里插入图片描述
注意：如果四个伪类都生效，要按照L,V,H,A的顺序来写
可以用shift+delete来弹出窗口。来清除内存，浏览器设置。

五、伪类选择器（2）

1.1

：after
：before
通过伪类的方式给元素添加一些文本内容

div:after{content:"world";color:red;}比较方便的该局部颜色方法
div:before{content:"world"}

：checked
：focus
：disabled

:checked{width:100px;height:100px;}
<body>
    <input type="checkbox">
</body>

通过伪类的方式添加内容
：：两个冒号表示伪元素

六、伪类选择器，结构性伪类选择器（3）

:nth-of-type() 可以灵活选择
:nth-child() child的意思是子项
:first-of-type()
:last-of-type
:only-of-type

 li:nth-of-type(3){background-color: red;}

角标是从1开始的，1表示第一项，2表示第二项
还可以选择N值，即从0到无穷大,也可以用2n+1

 li:nth-of-type(N){background-color: red;}

七、CSS的样式继承（？）

文字相关的样式可以被继承
布局相关的样式不可以被继承

八、CSS优先级

1.相同样式的优先级
当设置相同样式的时候，后写的优先级要高

div{color: red;}
    div{color: black;}

此种情况下黑色的优先级更加的高
2.内部样式与外部样式
内部样式和外部样式相同的时候，如果都设置的相同的样式，那么后写的引入方式的育先机更加的高
3.单一样式的优先级
style>id>class>tag>*>继承

九、！important

1.1

！important
提升样式的优先级，非规范方式，不建议使用

1.2

标签+类与单类
标签+类大于单类的优先级

   div.box{color: red;}
        div{color: black;}
        此处div.box的优先级更加高

1.3

群组优先级，群组选择器与单一选择器的优先级相同的情况下，靠后写的优先级更加的高

十、层次优先级

1.1

1.权重比较
ul li .box p input{}
.hello span #elem{}
2.约分比较
带 . 的标签等级为10
#标签等级为100

1.2

在写层次选择器的时候用尽量避免使用多层次

十一、CSS盒子模型

1.1

组成：content(物品)–>padding（填充物）—>border（包装盒）—>margin（盒子与盒子之间的间距）
content：这是由内容决定的 width和height
padding：内边距（内填充）
number：
代码展示：

   #box{width:1000px;height:500px;background-color: red;border:10px blue solid;padding:30px;}
    </style>
</head>
<body>
<div id="box">这是一个盒子</div>
    
</body>
</html>

效果展示：
在这里插入图片描述

1.2

在这里插入图片描述
padding:内边距（内填充）
只写一个值表示上下左右：30px（表示上下左右）
只写两个值表示，上下或者左右：30px 40px
写四个值：20px 30px 40px 50px(上下左右）
padding-left
padding-right
padding-top
padding-bottom

1.3

代码展示：

<style>
     #box{width:1000px;height:500px;background-color: red;border:10px blue solid;padding:30px;margin:10px;}
     #box1{width:200px;height:300px; background: black;color: blue;}
   
    </style>
</head>
<body>
<div id="box">这是一个盒子</div>
    <div id="box1">又是一个盒子 </div>
</body>
</html>

效果展示：
在这里插入图片描述

注意点：
1.背景色填充到margin以内的区域（不包括margin的区域）
2.文字会在content区域添加。
3.padding不能为负数，而margin可以为负数（也就是两者会有重合）

十二、box-sizing

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box
box-sizing:就是盒子的尺寸，可以改变盒子模型的展示形态。
width,height—>content
width,height—>content padding border
默认值：content-box:width,height–>content
border-box:width,height—>content padding border
使用场景：
1.不去计算一些值
2.解决一些百分百的问题

input{width:100%;padding:30px;box-sizing:border-box}

十三、

1.1 margin的叠加问题，出现在上下Margin同时存在的时候。

1.margin叠加的问题，出现再上下margin同时存在得到时候。会取上下中值较大的作为叠加的值。
代码展示：

    #box1{width:200px;height:200px;background:red;margin-bottom: 30px;}
    #box2{width:200px;height:200px;background:blue;margin-top:30px;} 
    </style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

效果展示：
在这里插入图片描述

1.2

1.解除margin的叠加。
BFC规范
想办法只给一个元素添加的间距

十四、

1.1margin的传递

1.margin传递的问题只会出现在嵌套的结构当中，且只有margin-top会有传递的问题，其他三个方向是没有传递的问题的。

<style>
    #box1{width:200px;height:200px;background:red;}
    #box2{width:100px;height:100px;background:blue;margin-top:100px;} 
    </style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>

问题展示：出现了整体下移的情况在这里插入图片描述
解决方案：
1.BFC规范
2.给父容器（包着他的）加一个边框列：#box1{width:200px;height:200px;background:red;border:5px black soilder;}
3.margin换成padding

十五、CSS模型之扩展

1.2

用margin-left: auto;进行自适应

#box1{width:400px;height:100px;background:red;margin-left: auto;margin-right: auto;}
左右都是自适应，是两者进行居中

注意：1.在扩展当中，margin的左右自适应是可以的，但是上下的自适应是不可以的。
如果想实现上下自适应的话，需要在跌打部分进行学习。
2.宽高不设置的时候后对盒子模型的也想

1.2

代码展示：

#box1{width:300px;height:300px;background-color: red;}
#box2{width:100%;height:100px;background-color: blue;color: white;padding-left: 30px;border-left: 20px black solid;}
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">这是一些内容</div>

</div>

效果展示：
在这里插入图片描述

注意！：
width height 不设置的时候会去自动计算容器的大小，节省代码。

#box2{height:100px;background-color: blue;color: white;padding-left: 30px;border-left: 20px black solid;}

十六，盒子模型的嵌套联系

1.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>
#box1{width: 350px;height: 350px;border:1px black dashed;padding:27px;}
#box2{border:5px#d7effe solid ;padding: 20px;}
#box3{background-color: #ffa0df;padding: 41px;}
#box4{border: 1px white dashed;padding: 3px;}
#box5{border: 1px white dashed;padding: 49px;}
#box6{width: 100px;height: 100px;background-color: green;border:#fcff00 5px solid;}
    </style>
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3">
            <div id="box4">
                <div id="box5">
                    <div id="box6"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

十七、标签的划分类型

按类型fenlei
block：div、p、ul、li、h1…
1.独占一行
2.支持所有的样式
3.不写宽度的时候和父容器的宽度相同
4.所占的区域是一个矩形

inline:span、a、em、strong、img…
1.挨在一起
2.有些的样式不支持，列入：width，height，margin，padding
3.不写宽度的时候，宽度由内容决定，不写的时候，宽度为0.
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，换行产生的空隙
inline-block:input、select…
挨在一起，但是支持宽高，支持内联和宽高的特性。

十八、

1.1按内容进行标签的分类

在这里插入图片描述
tittle link 表示的就是我么得划分区域

十九、按显示来划分标签

1.替换元素：浏览器根据元素的标签和属性，来决定元素的具体内容。
img，input

<img src="./img/1." alt="">
<input type="chackbox">

需要写入链接

2.非替换标签：只写标签就行，

二十、 float浮动（！）

脱高文档流，延迟父容器靠左或靠右进行排列。
left、right、 none

float注意点

只会影响后面的元素。
内容默认提开半层。
默认宽根据内容决定。
换行排列。
主要给块元来添加，但也可以给内联元素不加。

二十一、flout的注意点整理

flout注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据。
换行排列。
主要给块元素添加，但也可以给内联元素添加

二十二、清楚float浮动

1.1

上下排列：clear属性,表示清楚浮动，left,right,both
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow ：hidden (BFC规范），如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
(clear属性只会操作块的标签，对内联标签不起作用）