CSS高级操作

约定不等于承诺〃 2022-04-18 04:17 312阅读 0赞

## CSS高级选择器 ##

1，并集选择器：  
多个选择器通过逗号连接而成，同时声明多个风格样式  
例：

.box,#span,h1,p{}

2.交集选择器：  
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类选择器或ID选择器。  
例：获取ul下的所有li，有class为active的那个元素

ul li.active{}

3.后代选择器:  
外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔标签嵌套时，内层的标签为外层标签的后代  
例：

.box .cont{}

4.子元素选择器  
通过>连接在一起而成，仅作用于子元素  
例：

.menu > li{}

5.属性选择器  
选取带有指定属性的元素，或选取带有指定属性和值的元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]  
6.伪类选择器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 1]

## 盒模型 ##

盒模型组成：margin+padding+border+宽/高  
注：  
margin：外边距  
padding：内边距  
border：边框

## border的定义 ##

1.边框border  
border: 10px solid red; 1、边框的粗细 2、边框的样式 3、颜色  
2、设置某个边框的样式  
border-top/left/right/bottom-style：dashed/solid/dotted/double 虚线 实线 点线 双  
border-style 设置四个边框的样式  
border-top-width 设置边框的粗细  
border-right-color 设置右边框的颜色  
3、border简写 推荐简写  
设置四个边框  
border: 10px solid \#000;  
4、圆角边框  
border-radius：20px 30px 40px 50px;(左上 右上 右下 左下)  
border-radius：20px 30px 40px;（左上 右上左下 右下）  
border-radius：20px 30px;（左上右下 右上左下）

圆：元素的宽度和高度必须相同  
圆角的半径为元素宽度的一半，或者直接为50%  
半圆形：圆角的半径与高度或宽度一致  
元素的宽或高是高或宽的一半  
扇形：三同（宽高圆角半径相同）一不同（圆角取值位置不同）

## padding内边距 ##

内边距—会改变盒子自身的大小  
注：当父级设置了宽高，在设置padding,宽高要减去设置的padding  
padding-top 单独设置某个方向的内边距（）  
padding: 30px; 代表四个边的内边距（推荐简写）  
padding: 50px 10px; 1、上下 2、左右  
padding: 100px 20px 50px; 1、上 2、左右 3、下  
padding: 30px 10px 50px 20px; 上、右、下、左

## margin外边距 ##

margin 外边距 —— 改变盒子的位置  
注：margin的bug  
1、上下两个元素同时设置margin 会吃掉一个距离；  
解决方法：单独去设置一个margin的距离  
2、当子元素设置maring-top的时候，会作用到父级上  
解决方式 1、在父级上添加边框(不推荐)  
2、overflow: hidden; /自动撑开容器的大小、文本超出隐藏/

## 盒子阴影 ##

box-shadow:inset(阴影类型) x-offset(阴影水平位移量)
    	  y-offset blur-radius(模糊范围) color(阴影颜色);

## display属性 ##

display 属性规定元素应该生成的框的类型。  
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

控制元素的显示和隐藏
    	块级元素与行内元素的转变
    	display: none; 隐藏元素
    	display: block; 显示元素、把内联元素转换成块元素
    	display: inline-block；行内块元素 即有块元素的属性也有内联元素的属性

## 浮动 ##

float: left 左浮动  
float：right 右浮动  
注：当子元素设置了浮动以后， 父级的容器包含不住子元素  
解决方式：  
给父级添加高度  
问题：如果父级高度是根据子元素的内容去自适应的,同样父级也包含不住子元素。

。  
当子元素设置了浮动以后， 父级的容器包含不住子元素  
解决方式：  
添加一个标签,定义一个类名，设置属性clear: both（清除）;  
问题：会破坏html结构

clear: both 当前元素的左侧和右侧均不允许出现浮动元素

## 清除浮动有哪几种方式 ##

1、通过设置父级的高度 （已知道当前内容高度是固定）  
问题: 当子元素内容不固定的情况下，设置父级高度还是会存在包含不住子元素的问题。  
2、在父级下，添加一个标签去清除浮动  
问题：会破坏网页结构

<ul><li>...</li></ul>
    3、overflow: hidden; 
    	当子元素存在定位的时候，会有影响
    		*推荐*
    4、定义clear类清除浮动
    		*推荐用法*

牢记： 子元素设置了浮动，要在父元素上去清除浮动

## 图片与文本的对齐方式 ##

vertical-align: middle; 垂直居中  
vertical-align:bottom; 底部对其  
vertical-align:top; 顶部对其

## 定位 ##

**1.相对定位**：  
position：relative  
偏移设置：left、right、top、bottom  
相对定位特性：  
（1）设置相对定位的盒子会相对它原来的位置进行偏移  
（2）相对定位不会对父级和相邻盒子造成影响  
（3）相对定位的盒子原来的位置会被保留下来  
（4）相对定位盒子的层级提高了  
应用场景：一般很少单独使用，都是配合绝对定位使用  
注：定位和浮动作用在同一个盒子不会发生冲突  
**2.绝对定位**：  
position：absolute  
偏移设置：left、right、top、bottom  
绝对定位特性：  
（1）绝对定位以他最近的一个“已经定位”的“祖先元素”为基准进行偏移  
（2）如果没有已经定位的祖先元素，会以浏览器窗口为基准定位  
（3）绝对定位的元素从文档流中脱离，这意味着他们对其他元素的定位不会造成影响  
（4）元素位置发生偏移后，原来位置不会被保留  
（5）层级提高  
应用场景：下拉菜单、 焦点图轮播、弹出数字气泡、特别花边  
注：绝对路径没有设置偏移量，元素会保持在原来的位置上  
**3.固定定位**  
position：fixed  
偏移设置：left、right、top、bottom  
固定定位特性：  
类似于绝对定位，不过区别在于定位的基准不是祖先元素进行定位，而是依照浏览  
器进行定位，偏移量不会随滚动条改变  
应用场景：固定广告、返回顶部的图标、吸顶导航栏

## z-index ##

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。  
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

z-index的使用：  
调整元素定位时重叠层的上下位置  
z-index属性值：int，默认值0  
设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系  
z-index值大的位于值小的上方

## 设置元素透明度 ##

opacity：x |x值为0~1，值越小越透明  
filter：alpha（opacity=x） |x值为0~100 ，值越小越透明（针对IE8以下的浏览器）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]: /images/20220418/71037d80c8ca470fb819ac80208484e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 1]: /images/20220418/8097016724b54150b93c778ef81e2825.png