第三周（46-71 78-83）

■79

已于 2022-11-12 22:56:22 修改

阅读量51

点赞数

文章标签： html css javascript

于 2022-11-03 20:34:20 首次发布

本文链接：https://blog.csdn.net/qq_74286033/article/details/127667580

版权

一、CSS选择器

1.1ID选择器

格式：CSS：#elem{}
HTML：id=“elem”

1.在一个页面中，ID值是唯一的。出现多次是不符合规范的。
2.命名规范，字母_-数字（命名的第一位不能是数字）。
3.命名方式：驼峰式:searchButton(小驼峰） SearchButton(大驼峰） searchSmallButton
下划线式:search_small_button
短线式:search-small-button

1.2 CLASS选择器

格式：CSS：.elem{}
HTML:class = “elem

注：
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序 4.标签+类的写法

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

div{ } <div> </div> 使用场景：1.去掉某些标签的默认样式 2.复杂的选择器中例：层次选择器

1.4 群组选择器

css:<div> <p> <span>{ } (通过逗号的方式给多个不同的选择器添加css样式)

 <style>
     div{background:red }           或<style>
    #text {background:red;}         div.#text,title{background:red;}      
    .title{background:red;}          </style>
    </style>
    
    <div>123</div>
    <p id="text"> 234</p>   
     <h2 class="title">345</h2>

1.4 通配选择器

*{ } div ul li p h1 h2…… (会给所有的标签添加样式)

2.1层次选择器

后代 MN{ } 例：#list >/~/“空格” li { } 父代 M>N { } , 兄弟M~N{ } (M下面的标签) 相邻M+N{ } 与当前m下面相邻的n标签 div+h2

2.2属性选择器

选择器	说明
M[attr]	M元素选择指定为attr属性的集合
M [ attr = value ]	M 元素选择指定为 attr 属性和 value 值的集合
M [ attr *= value ]	M 元素选择指定为 attr 属性并且包含值为 value 的集合
M [ attrA = value ]	M 元素选择指定为 attr 属性并且起始值为 value 的集合
M [ attr $= value ]	M 元素选择指定为 attr 属性并且结束值为 value 的集合
M [attr1][attr2]	M 元素选择满足多个属性的集合

[class] 表示只选择带有class标签的语句（可增加选择[ ][ ]）

 <style>  
     div[class]{background:red}               
 </style>
     
    <div> 123123</div>
    <div class="123">123456</div>
    <div class="234">234</div>

= 完全匹配 *=部分匹配 ^= 起始匹配 $= 结束匹配

<style>
   div[class$=search]{background:red} (只选择以search结尾的语句) 
</style>             
    <div> 123123</div>
    <div class="box">123456</div>
    <div class="search">234</div> （被选择项）
    <div classs="search-button">345</div>

2.3 伪类选择器

用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加 M:伪类选择器（添加顺序为LVHA） :link 访问前的样式（只能添加给a标签） :visited 访问后的样式（只能添加给a标签） :hover 鼠标移入时的样式（可添加给所有标签） :active 鼠标按下时的样式 :after、：before 通过伪类的方式给元素添加一段文本内容，使用content属性：checked、：disabled、：focus都是针对表单元素的（鼠标移入时由红色变为蓝色）

<style>
div{width:100px;height:100px;background:red}
 div:hover{background:blueviolet} 
</style>

<head>
    <style>
 a:link{color:red}
 a:visited{color:aqua}
 a:hover{color:rgb(76, 38, 171)}
 a:active{color:rgb(239, 137, 12)}
     </style>
    
</head>
<body>
    <a href="#">你是傻逼</a>
</body>

2.4结构性伪类选择器

li: nth-of-type(数字第几项 n项为0-∞ 2n为偶数项){} nth-child(数字) {} first-of-type {} last-of-type {} only-of-type{} 只有一个时可用

 <style>
li:nth-of-type(2n+1){background:red}
li:nth-of-type(2n){background:hsl(139, 88%, 68%)}
</style>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

3.1.css样式继承

继承语言： {属性：inherit}

文字相关的样式可以继承（作用于母标签，子标签也具有相同的效果）布局相关的样式不能被继承（默认不可继承，添加inherit则可继承）

3.2单一样式的优先级

相同样式优先级：设置相同样式后，后面的优先级较高 内部样式与外部样式: 内部样式与外部样式优先级相同如果都设置了相同样式，那么后写的引入方式优先级高。 单一样式优先级:style行间 > id > class > tag > * > 继承 style行间    权重 1000 权重就是等级关系
  id                权重 100
  class           权重 10
  tag               权重 1

<style>
   #elem{color:aqua}      
  .box{color:red}
</style>
<div id="elem" class="box">123</div>   “id>class 所以显示aqua”

3.3!important

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

不能针对继承的属性进行优先级的提升

3.4标签+类与单类

标签+类 > 单类

群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。

3.5 层次优先级

权重比较
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{ }

二、CSS盒子模型

1.1CSS盒子模型 #box { }

组成：content -> padding -> border ->margin （物品填充物包装盒盒子与盒子之的间距）

content：内容区域 width和height组成的

padding : 内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px （上、右、下、左）

单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom

margin：外边距（外填充）
        只写一个值:30px（上下左右）
        写两个值：30px 40px （上下、左右）
        写四个值：30px 40px 50px 60px (上、右、下、左）

单一样式只能写一个值：
        padding-left
        paddinB-right
        padding-top
        padding-bottom

注：
1.背最色填充到margin以内的区城（不包括margin区域）
2.文字在content区域添加。
3.padding不能为负数，而margin可以为负数。

box-sizing:

盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box ： width、 height ->content
border-box：width、 height-> content padding border 使用的场景：
1.不用再去计算一些值
2．解决一些100%的问题。

盒子模型的margin传递问题：
1、margin叠加问题，出现在上下margin同时存在的时候。
2、margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。（margin改为padding）

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

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

三、标签分类

1.1按类型划分标签

block(块标签)： div、p、 ul、li、h 1. 独占一行
2. 支持所有样式 3.所占区域为矩形

inline （内联标签）: span 、 a、 em、 strong.、img······
        1．挨在一起的
        2．有些样式不支持，例如：width、height、margin、 padding
        3.不写宽的时候，宽度由内容决定
        4. 所占的区域不一定是矩形
        5.内联标签之向会有空隙，原因：换行产生的

inline-block : input.、select······
(挨在一起，但是支持宽高)
布局一般用块标签，修饰文本一般用内联标签

1.2按内容

Flow：流内容
metadata：元数据
sectioning：分区
Heading: 标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
(详情：https://www.w3.org/TR/html5/dom.html）

1.3 按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体品示内容。
img、 input······
非替换元素：将内容直接告诉浏览器，将共显示出来。
div.、hl、p······

2.1显示框类型

display: block inline inline-block none······
区别：
display:none 不占空间的隐藏(类似于消失)
visibility: hidden 占空间的隐藏（类似与隐身）

2.2标签嵌套规范

块能嵌套内联内联不能嵌套块特殊：<a href=""> <div></div></a> 块不一定能嵌套块例 :<p><div> </div></p> P标签不能嵌套块标签 ul. li
dl. dt. dd
table. tr. td

3.1溢出隐藏

<style>
    div{ width:100px;height:100px;border:1px black solid ;overflow:hidden}
</style>
    <div>超过就消失</div>

overflow：
visible：默认
hidden：超过隐藏
scroll：滚动条
auto：自适应
overf1ow-x、overflow-y 针对两个轴分别设置

3.2透明度与手势

opacity：0（透明）～ 1（不透明） 0.5（半透明）
注：占空间（类似隐身）、所有的子内容也会透明

 div{ width:100px;height:100px;border:1px;background:red;opacity:0.5}

rgba() : 0~1 例：rgba(255,0,0,0.5);
注:可以让指定的样式透明，而不影响其他样式

cursor：手势例：cursor：default
default 默认箭头 实现自定文手势
准备图片 .cur 或.ico
例：cursor : url(./img/cursor.ico图片地址),auto;

4.1最大、最小宽高

min-width、 min-height
max-width.、max-height
％单位：换算-＞以父容器的大小进行换算的（例：height：70%）
一个容器怎么适应屏幕的高：容器加height：100%；body: 100%; html:100%;
html, body{ height: 100%; }
•contrainer{height: 100%; }

5.1 CSS默认样式
没有默认样式的：div、span
有默认样式的：
body->marign : 8px
h1->:margin：上下 21.440px font-weight : bold(加粗)
p ->:margin :上下 16px
ul ->margin : 上下 16px padding 左 40px 默认点 (.) list-style ：disc
a -> text-decoration: underline;

5.2CSS重置样式

css reset: *{margin:0; padding:0}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
例：body.p,h1,ul{ margin:0; padding:0;}
ul{ list-style : none: }（取消默认点.）
a{ text-decoration: none; color: #999;}(取消下划线)
img{ dispaly:block} 问题的现象：图片跟容器底部有一些空隙。
原因：内联元素的对齐方式是按照文字蒸线对齐的，而不是文字底线对齐的。
vertical-align: baseline;基线对齐方式（默认值）改为：img{vertical-align:bottom;}

写具体页面的时候或一个布局效果的时候：
1.写结构
2.css重置样式
3.写具体样式

四、float浮动概念及原理

1.1 float浮动

文档流：文档中可显示对象在排列时所占用的位置 float特性：加入浮动元素会脱离文档流，会延迟父容器靠左或靠右进行排列，若之前有浮动元素则会挨着浮动的元素进行排列
left、right、none float注意点
只会影响后面的元素。
文字默认提升半层，默认宽根据内容决定。
换行排列（放不下的时候换行排列）
主要给块元素添加，但也可以给内联元素添加。

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

2.1清除浮动

上下排列：clear属性表示清除浮动的，left、right、both

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

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

.clear:after{content:'';clear:both;display:block}

■79

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
第三周（46-71 78-83）

文字相关的样式可以继承（作用于母标签，子标签也具有相同的效果）布局相关的样式不能被继承（默认不可继承，添加inherit则可继承）3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序 4.标签+类的写法。css: { } (通过逗号的方式给多个不同的选择器添加css样式)
复制链接

扫一扫