第三周笔记

35.CSS选择器（K44-51）

1.ID 选择器
a.css：#elem{}
html：id=“elem”（快捷div：div+#+tab）

 <style>#div1{ background: red;}#div2{ background: blue;}</style>
</head>
<body><div id="div1">课程好多好多</div><div id="div2">课程真的好多好多</div>
</body>

注：1）一个页面内。ID值对应唯一 2）规范：字母/-/_/数字，数字不可在首位
              3）驼峰写法（单词）、下划线写法（search-small-button）、短线写法（search_samll_button）
2.CLASS选择器
    a.css：.elem{}
      html：class=“elem”（快捷class：X+.+tab）
          注：1）class选择器可以复用
              2）可以添加多个class样式

 <style>#div1{ background: red;}#div2{ background: blue;}.box{ background: green;}.content{ font-size: 30px;}</style>
</head>
<body><div id="div1">课程好多好多</div><div id="div2">课程真的好多好多</div><p class="box">课程真的真的好多</p><div class="box content">课程真的真的真的好多</div>
</body>

3）多个样式时，样式优先级根据CSS决定，而不是class属性中顺序（在< style>中的优先顺序）
4）标签+类的写法

  p.box{ background: green;}.content{ font-size: 30px;}</style>
</head>
<body><div id="div1">课程好多好多</div><div id="div2">课程真的好多好多</div><p class="box">课程真的真的好多</p><div class="box content">课程真的真的真的好多</div>
</body>

3.标签选择器（TGA选择器）
    a.css：div{}
      htnl：< div>
    使用场景：1）去掉某些标签中的默认样式时
              2）复杂的选择器中，如层次选择器
4.群组选择器
      a.css：div，p，span{}
          注：通过逗号方式，给多个不同的选择器添加统一css样式，来达到代码的复用

形如：1）

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

变：2）

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

5.通配选择器
    a.*{}
          注：尽量不要使用，会给所有标签添加样式
    使用场景：1）去掉所有标签的默认样式时
6.层次选择器
    a.后代 M N 指定M条件下N的集合
    b.父子 M>N 后代中的第一代
    c.兄弟 M~N 当前M标签下所有兄弟N标签
    d.相邻 M+N 当前M相邻的N标签
7.属性选择器

a.M[attr]{}
               1）=：完全匹配
               2）*=：部分匹配
               3）^=：起始匹配
               4）$=：结束匹配
               5）[][][]：组合匹配
        形如：

        div[classX=][id]{ background:red} /*X为 *^$等符号*/

8.伪类选择器
          注：CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上时，用伪类添加
    a.M伪类{}
               1）：link       访问前的样式（只能添加给a标签）
               2）：visited    访问后的样式（只能添加给a标签）
               3）：hover      鼠标移入时的样式（可以添加给所有的标签）
               4）：active     鼠标按下时的样式（可以添加给所有的标签）
          注：若四个伪类标签都生效，注意顺序：L V H A
              一般网站都只设置：a{}a：hover{}

        形如：

   鼠标上置：

<style>div{ width: 200px;height: 200px;background: red;}div:hover{ background: blue;}</style>
</head>
<body><div></div>
</body>

注：标签：a：X{ Y：}   X可选上述4标签之一   Y为a标签属性
               5）：after、：before  通过伪类方式给元素添加一个文本内容，使用content属性
        形如：（后“world”由伪标签提供）

  div::after{content: "world";}/*</style>
</head>
<body><div>hello</div>
</body>

妙用：

 div::after{content: "world"; color: blue;}

注：不使用伪标签则需在< div>中用< span>包裹
6）：checked、：disabled 针对表单元素
形如：

  :checked{ width:100px;height:100px;}</style>
</head>
<body><!-- <div>hello</div> -->
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>

7）：focus（获取光标时，如输入框）
形如：

:focus{background: red;}</style>
</head>
<body><input type="text">

b.结构性伪类选择器
1）：nth-of-type（）、：nth-child（）
形如：

<style>li:nth-of-type(3){background: blue;}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body>

注：角标从1开始，1表示第一项，2表示第二项 | n值，表示从0到无穷大（可进行单双 2n、2n+1操作）
               2）：first-of-type、：first-child
               3）：last-of-type、：last-child
        形如：

<style>li:nth-of-type(3){background: blue;}li:first-of-type{background: green;}li:last-of-type{ background: black;}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body>

4）：only-of-type、：only-child 仅一行时生效
注：child：一大子类中的所有成员都包括，但属族不同，无法显示

36.CSS样式继承（K52）

1.文字相关的样式可以被继承
2.布局相关的样式不能被继承（默认不可继承，但可以设置继承属性 inher值）
形如：

 <style>div{ width:300px; height: 300px;border: 1px red solid; color: blue;font-size: 30px;}p{border: inherit;} </style>
</head>
<body><div><p>这是一个段落</p></div>
</body>

37.CSS优先级（K53-55）

1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式情况
2.内部样式与外部样式
内外部样式优先级相同，若都设置相同样式，后写的引入方式优先级高
3.单一样式优先级
style行间 > id（#X） > class（.X） > tag（如div） > * > 继承
4.！important（不能针对继承的属性进行优先级提升）
提升样式优先级，非规范方式，不建议使用
形如：

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

5.标签+类与单类
标签+类 > 单类（如div.box > .box）
6.群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高
7.层次优先级
    a.权重比较（非直加）
               1） ul li .box p input{}   1+1+10+1+1
               2） .hello span #elem{}    10+1+100
    b.约分比较
               1）ul li .box p input{}    约后：li p input{}
               2）.hello span #elem{}     约后：#elem{}

38.CSS盒子模型（K56-61）

形如：

1.组成：content -> padding ->   border ->     margin
   物品填充物包装盒盒子与盒子间的间距
    a.content：内容区域 width和height组成的
    b.padding：内边距（内填充） number：30px
                padding-left   padding-right   padding-top   padding-bottom
    c.margin：外边距（外填充）
                margin-left   margin-right   margin-top   margin-bottom
          注：1.背景颜色会填充到margin下的区域 2.文字会在content区域 3.padding不能出现负值，margin可以

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

2.box-sizing（盒尺寸，可以改变盒子模型的展示形态）
box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为conten-box（默认值）| border-box
    a.默认值：content-box：width、height -> content
    b.border-box：width、height -> content padding border
使用场景：1.不用再去计算一些值 2.解决一些百分比的问题
3.盒子模型的一些问题
    a.margin叠加问题
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的、

<title>Document</title><style>#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>

即两个box上下输入30px，只输出一个30px 会取上下值中较大的

解决方法：1.BFC规范 2.想办法只给一个元素添加间距
    b.margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
   解决方法：1.BFC规范 2.给父容器加边框 3.margin换成padding
        形如：

    <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>

变：

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

c.margin自适应居中、不设置content的现象
形如：

  <style>#box{ width:400px; height: 100px; background: blue;margin:0 auto;}</style>
</head>
<body><div id="box"></div>
</body>

扩展：1.margin左右自适应是可以的，但是上下自适应是不行的。
2.width、height不设置的时候，对盒子模型的影响，会自动去计算计算器容器的大小，节省代码

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

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

4.嵌套盒子的练习

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

39.标签分类（K62-64）

1.按类型
a.block：块 div、p、ul、li、h1…

 <style>#box1,#box2{ width: 100px; height: 100px; background: red;}</style>
</head>
<body><div id="box1">块1</div><div id="box2">块2</div>
</body>

1)独占一行
     2)支持所有样式
     3)不写宽时，与父元素的宽相同
     4)所占区域是一个矩形
    b.inline：内联 span、a、em、strong、img…

<style>#content1,#content2{ width: 100px; height: 100px; background: red;}</style>
</head>
<body><span id="content1">内联1</span><span id="content2">内联2</span>
</body>

1)挨在一起的
     2)有些样式不支持，如：width、height、margin、padding
     3)不写宽的时候，宽度由内容决定
     4)所占的区域不一定是矩形
     5)内联标签之间会有空隙，原因：换行（写代码时）
              注：布局一般用块标签，修饰文本一般用内联标签  若特别想消除空隙：

 <style>body{ font-size: 0;}#content1,#content2{ width: 100px; height: 100px; background: red;font-size: 16px;}</style>

c.inline-block：内联块 input、select…

1)挨在一起，但是支持宽高
     2)具有块和内联很多特性
2.按内容

3.按显示
    a.替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
       img、input …
    b.非替换元素：将内容直接告诉浏览器，将其显示出来
       div、h1、p …

40.显示框类型（K65）

1.display

a.block

<style>div{ width: 100px;height: 100px; background: red;display:inline;}span{ width: 100px; height: 100px; background: red; display: block;}</style>
</head>
<body><div>块1</div><div>块2</div><span>内联1</span><span>内联2</span>
</body>

b.inline
原：

<style>div{ width: 100px;height: 100px; background: red;}</style>
</head>
<body><div>块1</div><div>块2</div>
</body>

变：

   div{ width: 100px;height: 100px; background: red;display:inline;}

c.inline-block

 <style>div{ width: 100px;height: 100px; background: red;display:inline-block;}span{ width: 100px; height: 100px; background: red; display: inline-block;}</style>

d.none（不占空间的隐藏）
注：display：none与visibility：hidden区别：visibility：hidden为占空间的隐藏

 #box1,#box2{ width: 100px;height: 100px; background: red;}#box1{ display: none;}</style>
</head>
<body><div id="box1">块1</div><div id="box2">块2</div>

41.标签嵌套规范（K66）

1. a. ul、li b. dl、dt、dd c. table、tr、td
2.块标签可以嵌套内联标签

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

3.块标签不一定能嵌套块标签
可：

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

不可：

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

4.内联标签不可嵌套块标签（a标签是个例外）

42.溢出隐藏（K67）

1.overflow
    a.visible：默认
    b.hidden
        原：

 <style>div{ width: 300px; height: 200px; border: 1px black solid;}</style>
</head>
<body><div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
</body>

变：

   div{ width: 300px; height: 200px; border: 1px black solid; overflow: hidden;}

c.scroll

    div{ width: 300px; height: 200px; border: 1px black solid; overflow: scroll;}

d.auto

div{ width: 300px; height: 200px; border: 1px black solid; overflow: auto;}

注：自适应，多则有滚动条，少则无滚动条

e.x轴、y轴
写法：overflow-x：、overflow-y：

43.透明度与手势（K68）

1.opacity:0（透明）~1（不透明） 0.5半透明

 <style>div{ width: 100px; height: 100px; background: red; opacity: 0.5;}</style>
</head>
<body><div>这是一个块</div><p>这是一个段落</p>
</body>

注：占空间、所有的子内容也会半透明
2.rgba

 <style>#div1{ width: 100px; height: 100px; background: red; opacity: 0.5;}#div2{ width: 100px; height: 100px; background: rgba(255,0,0,0);}/*最后一个1表示透明，0表示不透明 */</style>
</head>
<body><div id="div1">这是一个块</div><p>这是一个段落</p><div id="div2">这又是一个块</div>
</body>

注：可以让指定样式透明，而不影响其他样式
3.cursor（手势）
a.default（默认）

  #div2{ width: 100px; height: 100px; background: rgba(255,0,0,0);cursor:pointer;}

b.自定义鼠标样式. 准备图片： .cur 、.ico

44.最大最小宽高（K69）

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

45.CSS默认样式（K70）

1.无默认样式body、h1…h6、p、ul、…
2.有默认样式；div、span、…

body -> margin： 8px
    h1   -> margin：上下 21.440px
            font-weight：bold
    p    -> margin：上下 16px
    ul   -> margin：上下 16px
            padding：左40px
            默认点：list-style： none
    a    ->text-decoration：underline

46.CSS reset（K71）

1.简单的css reset：
    a.*{margin:0padding:0;} body、p、h1、ul
   优点：不用考虑哪些标签有默认的margin和padding
   缺点：稍微影响性能
    b.ul{list-style:none;}
    c.{text-decoration:none;color:#666;}（text…为下划线，color为默认颜色）
    d.img{display:block;}
   问题现象：图片跟容器底部有空隙。（内联的对齐方式按基线对齐，而非底线）
```
        ul{ list-style: none;}a{ text-decoration: none; color: #999;}a:hover{ text-decoration: underline; color: red;}img{display: block;}
```
注：写具体页面或一个布局效果时1.写结构 2.css重置样式 3.写具体样式

47.float浮动（K78-83）

1.文档流
文档流是文档中可显示对象在排列时所占用的位置
2.float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
3.float取值
left
right
none（默认）

例题：

 <style>body{ border: 1px black solid}#box1{ width: 100px; height: 100px; background-color: blue;}#box2{ width: 200px; height: 200px; background-color: red;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div>
</body>

变：

        #box1{ width: 100px; height: 100px; background-color: blue; float: left;}

变：

   #box1{ width: 100px; height: 100px; background-color: blue; float: right;}

变：

      #box1{ width: 100px; height: 100px; background-color: blue; float: left;}#box2{ width: 200px; height: 200px; background-color: red;float: left;}

4.float注意点
只会影响后面的元素
例题：

<style>body{ border: 1px black solid}#box1{ width: 50px; height: 50px; background-color: blue;}#box2{ width: 100px; height: 100px; background-color: red;}#box3{ width: 150px; height: 150px; background: green;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>

变：

       #box2{ width: 100px; height: 100px; background-color: red; float: left;}

内容默认提升半层

    <div id="box3">缄默德克萨斯缄默德克萨斯缄默德克萨斯缄默德克萨斯</div>

默认宽根据内容决定
原：

  #box4{ background: orange;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3">缄默德克萨斯缄默德克萨斯缄默德克萨斯缄默德克萨斯</div><div id="box4">“德克萨斯剑术”</div>

现：

     #box4{ background: orange;float: left;}

换行排列
原：

ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px;border: 1px black solid;}li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>

现：

  li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box; float: left;}

    li:nth-of-type(1){height: 120px;}

主要给块元素添加，但也可以给内联元素添加

原：

 ul{ margin: 0; padding: 0; list-style: none; width: 300px; height: 300px;border: 1px black solid;}li{ width: 100px; height: 100px; background: red; border: 1px yellow solid;box-sizing:border-box; float: left;}li:nth-of-type(1){height: 120px;}li:nth-of-type(2){height: 80px;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><span>斥罪斥罪斥罪</span><span>小狼小狼小狼</span>

现：

    span:last-of-type{ float: right;}

5.利用clear属性清除float浮动
         固定宽高：  不推荐，不能把高度固定死，不适合做自适应的效果
     父元素浮动：不推荐，父容器浮动也会影响到后面的元素
         overflow：  hidden（BFC规范）如果与子元素想要溢出，那么会受到影响
         display：   inline-block（BFC规范）不推荐，父容器会影响到后面的元素
         设置空标签：不推荐，会多添加一个标签
         after伪类：推荐，是空标签的加强版，目前各大公司的做法
    a.上下排列：clear属性，表示清除浮动时的，left、right、both

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

b.嵌套排列

 #box1{ width: 200px; border: 1px black solid;}#box2{ width: 100px; height: 100px; background: red;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div>

       #box2{ width: 100px; height: 100px; background: red; float: left;}

解决：1）

  <div id="box1"><div id="box2"></div><div>这是一个空标签</div></div>

      .clear{ clear: both;}</style>
</head>
<body><div id="box1"><div id="box2"></div><div class="clear"></div></div>

解决：2）

  #box1{ width: 200px; border: 1px black solid;}#box2{ width: 100px; height: 100px; background: red; float: left;}.clear:after{ content:''; clear: both; display: block;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div>

6.详见视频

Web初学-2022.10.28-11.5相关推荐

Web初学-2022.10.15-21
第一周笔记一.第一集笔记 1.1 HTML.CSS系列教程内容导学 1.HTML+CSS系列教程①之拨云见日 2.HTML+CSS系列教程②之溯本求源 3.HTML+CSS系列教 ...
Web初学-2022.11.19-11.25
第五周笔记(自62开始HTML5) 51.strong和b.em和i(K112) strong和em都是表示强调的标签,表现形态为文本加粗和斜体. b和i标签同样也表示文本加粗和斜体形如: < ...
Web初学-2022.11.6-12.02
第六周笔记(JavaScript简介) 1.简介(K1) 1.起源:JavaScript诞生于1995年,主要处理网页中的前端验证检查用户输入内容前端验证;检查用户输入内容是否符 ...
【收藏】ASP.NET英文技术文章推荐[10/28 – 11/3]
[1]PHP on IIS7 w/FastCGI(IIS7中的PHP和FastCGI模块) 最新版本的IIS 7.0即将随着Windows Vista一同发布,在极大增强了其主要支持的ASP.NET功 ...
第二周总结(2022.10.24~2022.10.28)
目录本周内容 DAY1 1.计算机的基础知识(应用/硬件/软件) 什么是计算机? 计算机的用途计算机的硬件计算机软件软件结构的划分软件开发人机交互人机交互的两种方式常用的dos窗口命令 ...
Web初学-2022.12.03-12.09
第七周笔记 18.运算符的优先级(K26) 1., 运算符 1)使用,可以分割多个语句,一般可以在声明多个变量时使用 <script>var a = 1 , b = 2 , c ...
2022.10.28 英语背诵
rouse 引起 his banging ~d the neighbours. equivalent 相等的,相同的 The word has no ~ in English. tamper 干预,乱 ...
2022年双11淘宝满减规则解读
2022年双11淘宝满减规则解读双11期间主要关注双十一红包,那么今年淘宝双11满减活动有没有?因为10月24日20点双11预售就开始了,不少小姐姐想知道2022年淘宝双十一满减是多少,本文小编赵一 ...
第三周总结(2022.10.31~2022.11.4)
目录 Day1 1.if...else...和三元运算符的区别? 2.if...else...嵌套 3.流程控制语句之switch(考点很多) 3.1什么是switch语句? 3.2switch语句中 ...

Web初学-2022.10.28-11.5