web的内部使用

最新推荐文章于 2024-10-08 12:21:22 发布

Maroon_syd

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量97

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/Maroon_syd/article/details/127595808

版权

一、标签群组通配等选择器

标签选择器（TAG选择器）

css：div{} \ html： < div> < /div>
1.去掉某些标签的默认样式时
2.复杂的选择器中，如：层次选择器
群组选择器
css：div，p，span{}

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

通配选择器

*()->div,ul,li,p,h1,h2…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：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>
        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选择器

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


属性选择器	M [ atter ] { }
=	完全匹配
*=	部分匹配
^=	起始匹配
$=	结束匹配
[ ][ ][ ]	组合匹配

<!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>
        div[class*=search]{background:red;}
    </style>
</head>
<body>
    <div>aaaa</div>
    <div class="box">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
</body>
</html>

在这里插入图片描述

伪类选择器

M：伪类：{ }
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加
:link，:visited,:hover,:active

hover等伪类选择器

M	伪类{}
:link	访问前的样式（只能添加a标签）
:visited	访问后的样式(只能添加给a标签）
:hover	鼠标移入时的样式（可以添加给所有的标签）
:active	鼠标按下样式（可以给所有标签）

注：

link visited 只能给a标签加，hover和active可以给所有的标签加。
如果四个伪装都生效，一定要注意顺序：L V H A
一般网站只这样去设置：a{}(link visited active)a:hover

 <style>
        a:link{color:red}
        a:visited{color:blue}
        a:hover{color:green}
        a:active{color:yellow}
    </style>

after等伪类选择器

：after、：before 通过伪类的方式给元素添加一段文本内容，使用content属性
：checked、：disable、：focus 都是针对表单元素的

结构性伪类选择器

：nth-of-type()、：nth-child()
角标是从1开始的,1表示第一项，2表示第二项|n值表示从0到无穷大
: first-of-type、：frist-child
：last -of-type、：last-child
: only-of-type、：only-child
：nth-of-type()、：nth-child()之间的区别
type：类型
child：孩子

CSS样式继承

文字相关样式可以被继承
布局相关的样式不能被继承
(默认是不能继承的，但是可以设置继承属性)
注：inherit值
css基础

<!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>
        div{width:300px;border:1px red solid;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

<style>
        div{width:300px;border:1px red solid;}
        P{border:inherit;}

    </style>
</head>
<body>
    <meta charst="viewport" content="width=device-width,in">
    <div>
        <p>这是一个段落</p>
    </div>

优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级

style行间>id>class>tag>*>继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

！important

提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

标签+类与单类

标签+类>单类优先级

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。
#elem{color：red；}
*{color：green！improvetant；}

层次优先级

1.权重比较
ul li .box p input{} 1+1+1+10+1
.helo span #elem{} 10+1+100

2.约分比较
ul li .box p input{} li p input{}
.helo span #elem{} #elem{}

css盒子模型

组成：
content->padding->border->margin
物品、填充物、包装盒、盒子与盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
number：30px
padding-left
padding-right
padding-top
padding-bottom
margin：外边距（外填充）
只写一个值：30px （上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：
1. 背景色填充到margin以内的区域（不包括margin区域）
2. 文字在content区域添加，
3. padding不能为负数，而margin可以为负数。

box-sizing：

盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box:width、height->content
box-sizing: width\height->content padding border

使用的场景：

1.不用再去计算一些值；
2.解决一些100%的问题；

<!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>
        /* div{color: red ;}
        div{color:blue;} */
        #box{
            width:200px;height:200px;background:red;border:10px blue soild;
            padding:30px 50px;
            box-sizing:border-box;

        }
input{width:100%;padding:30px;}
    </style>
</head>
<body>
    <meta charst="viewport" content="width=device-width,in">
    <div id="box">这是一个盒子</div>
    <input type="text">
</body>

margin叠加

当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题，只在上下有左右是没有这个叠加问题的。
解决方案：
1.BFC规定
2.想办法只给一个元素添加间距。

   <style>
 #box1{width:200px;height:200px;background:red;margin-bottom:0;}
        #box2{width:200px;height:200px;background:blue;margin-bottom:40px;}
   </style>

margin传递

margin传递问题，出现在嵌套结构中，只是针对margin-top的问题。
解决方案：

BFC规范；
给父容器加边框；
margin换成padding。

扩展（margin自适应居中，不设置content的现象）
1.margin左右自适应是可以的，但是上下适应是不行的。（如果想上下适应的话，需要需要在第二部分来进行学习
2.width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

嵌套盒子练习

<!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:Spx white;padding:20px}
        #box3{background:pink;padding:41px;}
        #box4{border:1px white dashed;padding:3px;}
        #box5{border:1px white dashed;padding:49px;}
        #box6{width:100px;height:100px;background:1px green;border:yellow 5px soild;}
      
    </style>
</head>
<body>
    <div id="box1">
<div id="box2">
    <div id="box3">
        <div id="box4">
            <div id="box5"></div>
            </div>
            </div>
            </div>
            </div>


</body>
</html>

标签分类

按类型
block：块（div、p、ul、li、h1…、）
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline：内联(span、a、em、strong、img…)

挨在一起的
有些样式不支持，例如：width、height、margin、padding
不写宽的时候由内容决定
所占的区域不一定是矩形
内联标签之间会有空隙，原因：换行产生的。
inline-block：内联块(input、select…)

1.挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

标签分类

按内容
flow：流内容
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的

按显示

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

非替换元素：将内容直接告诉浏览器，将其显示出来。
display
block
inline
inline-block
none
注：display：none与visibility：hidden
区别：display：none 不占空间的隐藏
visibility:hidden 占空间的隐藏

标签的嵌套规范

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签
a标签是一个例外
ul、li
dt、dl、dd
table、tr、td
第一类

<div>
<span></span>
<a href="#"></a>
</div>

第二类
快嵌套块

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

内联是不能嵌套块的
特殊错误写法：

<span>
<div></div>
</span>

特殊：
正确的写法：

<a href="#">
<div></div>
</a>

溢出隐藏

overflow
visible：默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

<!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>
        /* div{width:300px;height:200px;border:1px black solid;overflow:hidden} */
    div{width:300px;height:200px;border:1px black solid;overflow:scroll;} 
    </style>
</head>
<body>
    <div>溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    </div>
</body>
</html>

透明度与手势

opacity：0（透明）~1（不透明）
0.5（半透明）
注：占空间，所有子内容也会透明
reba（）：0~1
注：可以让指定的样式透明，而不影响其他样式
opacity
raba
cursor
default：默认
自定义鼠标样式
cursor：默认箭头
要实现自定义手势：
准备图片：.cur、.ico
cursor:url(./img/cursor.ico),auto;

最大、最小宽高

min-width、min-height
min-width、max-height
注：强化对百分比单位的理解
%单位：换算->已父容器的大小进行换算

css默认样式

有些标签有默认样式，有些标签没有默认标签样式。
没有默认样式：
div、span、…
有默认样式：
body、h1…h6、p、ul…
body-> margin:8px
h1-> margin:上下21.440px
font-weight:bold
p-> margin:上下16px padding：左 40px
默认点：list-style：disc
a->text-decoration:underline;

flaot浮动

文档流
文档流是文档中可显示对象在排列时所占用的位置
float 特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前以及
float取值
left
right
none（默认）
float注意点
只会影响后面元素
内容默认提升半层
默认宽根据内容决定。
换行排列
主要给块元素添加，但也可以给内元素添加
如何清除浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动会影响到后面的元素。
overflow：hidden （bfc规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法
（clear属性只会操作块标签，对内联标签不起作用）