web前端从入门到放弃

最新推荐文章于 2024-08-09 10:42:44 发布

apple_73086122

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量86

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/apple_73086122/article/details/127643816

版权

1.css选择器？

标签选择器（tag选择器）：去掉某些标签的默认样式时，复杂的选择器中如层次选择器
群组选择器（分组选择器）：可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

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

通配选择器：*{}→div，ul，li，p，h1，h2...
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景：去掉所有标签的默认样式时
层次选择器
后代 M N {}

    <style>
        #list li{border: 1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
        <li>
           <ul>
              <li></li>
           </ul>
        </li> 
        <li></li> 
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>

父子 M＞N {}

     <style>
        #list > li{border: 1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
        <li>
           <ul>
              <li></li> 不变
           </ul>
        </li> 
        <li></li> 
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>

兄弟 M~N{} 当前m下的所有兄弟n标签

    <style>
        div~h2{background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>

相邻 M+N P{} 当前m下面相邻的n标签

    <style>
        div+h2{background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
</body>

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

    <style>
        div[class*=box]{background: red;} *代表带有search的都选择
    </style>
</head>
<body>
    <div>aaaaa</div>
    <div class="box">bbbbb</div>
    <div class="search">ccccc</div>
    <div class="search-button">ddddd</div>
</body>

伪类选择器
M：伪类{}
:link 访问前的样式（只能添加给
标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有标签）
:active 鼠标按下时的样式（可以添加给所有标签）
注：一般的网站都只设置a{}（link visited active） a:hover{}

    <style>
/*      div{width: 200px;height: 200px;background: red;}
        div:hover{background: blue;}
        div:active{background: green;}*/        
        a:link{color: red;}
        a:visited{color: blue;}
        a:hover{color: green;}
        a:active{color: yellow;}
    </style>
</head>
<body>
    <div>aaaaa</div>
    <a href="#">这是一个链接</a>
</body>

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

<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:after{content: "world";color: red;}      
    </style>
</head>
<body>
    <div>hello</div>
</body>

:checked :disabled :focus 都是针对表单元素

<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>
        :checked{width: 100px;height: 100px;} 
        :focus{background: red;}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox" checked>
    <input type="text">
</body>

结构性伪类选择器
:nth-of-type() :nth-child()
角标是从1开始的，1表示第一项，2表示第二项 n值表示从0到无穷大

<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>
    li:nth-of-type(3){background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

:first-of-type :last-type :only-of-type

<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>
    li:first-of-type{background: red;}
    li:last-of-type{background: blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

:nth-of-type() :nth-child()区别：type在类型中

2.css继承？

文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，可以设置继承属性inherit值）

<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 red solid;color: red;font-size: 30px;}
       p{border: inherit;} 继承布局
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

3. CSS优先级？

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级
style > id > class > tag > * > 继承
注：style 权重 1000
id 权重 100
class 权重 10
tag 权重 1
！important 提升样式优先级，非规范方式，不建议使用（不能针对继承的属性进行优先级的提升）
标签+类与单类
标签+类＞单类优先级
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。

<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>
        #elem{color: red !important;}
    </style>
</head>
<body>
    <div id="elem" style="color: blue;">这是一个块</div>
</body>

层次优先级
权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100
约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem

4.css盒子模型?

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

<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{width: 200px;height: 200px;background: red;border: 10px blue solid;padding: 30px;margin: 10px;}
        #box2{width: 200px;height: 200px;background: green;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>

box-sizing
盒子尺寸，可以改变盒子模型的展示形态
默认值：content-box：width、height→content
border-box：width、height→content padding border
使用的场景：不用再计算一些值，解决一些百分比问题
margin叠加的问题，出现在上下margin同时存在的时候，取上下中值较大的作为叠加的值

<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{width: 200px;height: 200px;background: red;margin-bottom: 10px;}
        #box2{width: 200px;height: 200px;background: blue;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>

解决方案1 BFC规范
2 只给一个元素添加间距

margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题
解决方案1 BFC规范
2 给父容器加边框

<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{width: 200px;height: 200px;background: red;border: 1px black solid;}
        #box2{width: 200px;height: 200px;background: blue;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="box">
        <div id="box2"></div>
    </div>
</body>

3 margin换成padding

<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{width: 200px;height: 100px;background: red;padding-top: 100px;} 注意减少高度
        #box2{width: 200px;height: 200px;background: blue;}
    </style>
</head>
<body>
    <div id="box">
        <div id="box2"></div>
    </div>
</body>

盒子模型拓展
margin左右自适应可以，上下自适应不行（如果想实现上下自适应，需要在第二大部分学习）

<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{width: 400px;height: 100px;background: red;margin:0 auto;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>

width、height不设置的时候，对盒子模型的影响,会自动去计算容器的大小，节省代码

<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{width: 400px;height: 100px;background: red;}
        #box2{height: 100px;background: blue;color: white;padding-left: 30px;border-left: 10px black solid;} 不加宽
    </style> 
</head>
<body>
    <div id="box">
        <div id="box2">这是一些内容</div>
    </div>
</body>

5.标签分类？

按类型
block：div、p、ul、li、h1……
1 独占一行
2 支持所有样式
3 不写宽的时候，跟父元素的宽相同
4 所占区域是一个矩形
inline：span、a、em、strong、img……
1 挨在一起
2 有些样式不支持例如width、height、margin、padding
3 不写宽的时候宽度由内容决定
4 所占区域不一定是矩形5 内联标签之间会有空隙，原因是换行产生的
inline-block：input、select……
1 挨在一起，支持宽高
注意：布局一般用块标签，修饰文本一般用内联标签
按内容
flow流内容
metadata元数据
sectioning分区
heading标题
phrasing措辞
embedded嵌入的
interactive互动的
按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input……
非替换元素：将内容直接告诉浏览器，将其显示出来。div、h1、p……

6.显示框类型？

display：block inline inline-block none……
display：none 不占空间的隐藏
visibility：hidden 占空间的隐藏

7.标签嵌套规范？

ul、li
dl、dt、dd
table、tr、td
块标签可以嵌套内联标签

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

块标签不一定能嵌套块标签

正确的
<div>
    <div></div>
</div>
错误的
<p>
    <div></div>
</p>

内联标签不能嵌套块标签

错误的
<span>
    <div></div>
</span>
特殊：
正确的写法
<a href="">
    <div></div>
</a>

8.溢出隐藏？

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

<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: 30px; height: 20px; border: 1px black solid; overflow: hidden;}
    </style>
</head>
<body>
    <div>
        溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏
        溢出隐藏溢出隐藏
    </div>
</body>

9.透明度和手势？

opacity（整体透明包括字体）：0（透明，占空间）~1（不透明）
0.5（半透明）
注意：占空间，所有的子内容也会透明
rgba（背景透明字体不透明）：0~1

<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: 30px; height: 20px; background: rgba(255,0,0,1);} 
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>

cursor：手势
default：默认箭头
要实现自定义手势：准备图片：.cur .ico格式

<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: 30px; height: 20px; cursor: url(./.ico文件),auto;}
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>

10.最大、最小宽高？

min-width min-height
max-width max-height
注意：%单位换算→以父容器的大小换算的（父容器无大小无意义）
一个容器怎么适应容器的高：容器加height：100%；body：100%；html：100%
html,body{height:100%;} .contrain{height:100%;}

11.css默认样式？

没有默认样式：div、span
有默认样式：body→margin：8px
h1→margin：上下21.440px
font-weight：hold
p→margin：上下16px
ul→margin：上下10px padding：左40px
默认值：list-style：disc
a→text-decoration：underline；
css reset：*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
ul{list-style:none;}
a{text-decoration:none;color:#999;}
img{display:block}
问题的现象：图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐，而不是按底线对齐
给图片加vertical-align：baseline；基线对齐方式，默认值
img{vertical-align:bottom;}改成底线，解决方式是推荐的
写具体页面的时候或一个布局效果的时候
1写结构
2css重置样式
3写具体样式

12.float浮动？

脱离文档流，延迟父容器靠左或靠右进行排列,如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
left、right、none

<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>
        body{border: 1px black solid;}
        #box1{width: 300px; height: 200px;background: red; float: right;}
        #box2{width: 300px; height: 200px;background: red; float: left;} 
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

float注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
鼠标给块元素添加，但也可以给内联元素添加
如何清除浮动？
上下排列“clear属性，表示清除浮动的，left、right、both
嵌套排列
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden（bfc规范），如果有子元素想溢出，那么会受到影响。
display：inline-block（bfc规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）

<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: 300px; height: 2px;border: 1px black solid;}
        #box2{width: 300px; height: 200px;background: yellow; float: left;}
        .clear::after{content: '添加的内容'; clear: both; display: block;} 内联转成块
    </style>
</head>
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
    aaaaa
</body>