【博学谷学习记录】超强总结，用心分享|前端CSS基础

目录

元素显示模式

块级元素

行内元素

行内块元素

CSS特性

盒子模型

边框区域

内外边距

结构伪类选择器

伪元素

浮动

清除浮动

CSS布局

显示层级

定位

静态定位

相对定位

绝对定位

固定定位

装饰

垂直对齐方式

光标类型

overflow溢出部分显示效果

精灵图

盒子阴影

过渡

元素整体透明度

---

元素显示模式

块级元素

独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高

代表标签：div，p，h系列，ul，li，dl，dt，dd，form，header，nav，footer...

行内元素

一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高

代表标签：a，span，b，u，i，s，strong，ins，em，del...

行内块元素

一行显示多个，可以设置宽高

代表标签：input，textarea，button，select...

特殊情况：img标签由行内块元素特点，但是Chrome调试工具中结果显示是inline

元素显示模式转换：改变元素默认的显示特点

转换成块级元素display：block；

转换成行内块元素display：inline-block；

转换成行内元素display：inline；

CSS特性

继承性：子元素有默认继承父元素的特点（文字控制类的都可以继承，不是文字控制类的都不能继承）

继承失效的特殊情况：a标签的color会继承失效，h系列标签的font-size会继承失效

层叠性：给同一个标签设置不同样式，此时样式会层叠叠加，会共同作用在标签上；给同一个标签设置相同样式，此时样式会层叠覆盖，最终写在最后的样式会生效

优先级：不同选择器具有不同优先级，优先级高的会覆盖优先级低的选择器样式

继承<通配符选择器<标签选择器<类选择器

盒子模型

CSS规定每个盒子分别由：边框区域（border）、内边距（padding）、外边距区域（margin）、内容区域（content）构成

盒子尺寸=width/height+边框线+内边距

边框区域

边框单方向设置border-left/right/top/bottom

边框粗细border-width：数字+px

边框样式border-style：solid实线/dashed虚线/dotted点线

边框颜色border-color：颜色

复合写法border：线条粗细（数字+px） 线条样式（solid实线/dashed虚线/dotted点线） 颜色

边框圆角border-radius：数字+px/百分比

内外边距

四值设置margin（内边距）/padding（外边距）：上  右  下  左

三值设置margin（内边距）/padding（外边距）：上  左右  下

两值设置margin（内边距）/padding（外边距）：上下  左右

盒子居中margin：0 auto;

结构伪类选择器

结构伪类选择器：根据元素在HTML中的结构关系查找元素（常用于查找某父级选择器中的子级）

E：first-child()匹配父元素中的第一个子元素，并且是E元素

E：last-child()匹配父元素中的最后一个子元素，并且是E元素

E：nth-child(n){}匹配父元素中的第n个子元素，并且是E元素

E：nth-last-child(n){}匹配父元素中倒数第n个子元素，并且是E元素

伪元素

伪元素是由CSS模拟出的标签效果，一般页面中的非主体内容可以使用伪元素

: : before在父元素内容的最前添加一个伪元素

: : after在父元素内容的最后添加一个伪元素

伪元素必须设置content才能生效，content值可以为空

伪元素默认是行内元素，设置宽高不生效

浮动

float：left/right；

浮动的元素不能通过text-align：center或者margin：0 auto居中

清除浮动

1. 设置父元素高度
2. 额外标签法：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear：both
3. 单伪元素清除法：用伪元素替代额外标签

第一种：after{

content:’’;

              display:block;

              clear:both;

}

第二种：after{

content:’’;

              display:block;

              clear:both;

              height：0;

Visibility:hidden;

}

1. 双伪元素清除法

标签名: : before，标签名: : after{

content:’’;

display:block;

}

标签名: : after{

clear：both;

}

1. 给父元素设置overflow：hidden

CSS布局

显示层级

不同布局方式元素的层级关系：标准流<浮动<定位

z-index：整数；取值越大，显示顺序越靠上

定位

静态定位

静态定位position：static；是默认值，就是之前的标准流，不能通过方位属性进行移动

相对定位

相对定位position：relative；相对于自己之前的位置进行移动，配合方位属性实现移动，在页面中占位置

绝对定位

绝对定位position：absolute；相对于非静态定位的父元素进行定位，如果父级没有定位就以浏览器为参照物定位，在页面中不占位置

固定定位

固定定位position：fixed；相对于浏览器进行定位和移动，在页面中不占位置

装饰

垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

vertical-align：baseline；默认基线对齐

vertical-align：top；顶部对齐

vertical-align：middle; 中部对齐

vertical-align：bottom；底部对齐

光标类型

设置鼠标光标在元素上时显示的样式

cursor：default；默认值，通常是箭头

cursor：pointer；小手效果，通常提示可点击

cursor：text；工字形，通常提示可选择文字

cursor：move；十字光标，通常提示可移动

overflow溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

overflow：visible；默认值，溢出部分可见

overflow：hidden；溢出部分隐藏

overflow：scroll；无论是否溢出都显示滚动条

overflow：auto；根据是否溢出，自动显示或隐藏滚动条

精灵图

精灵图：项目中将多张小图片，合成一张大图片，这张大图称为精灵图

精灵图使用步骤：

1. 创建一个盒子，设置合资的尺寸和小图尺寸相同
2. 将精灵图设置为合资的背景图片
3. 修改背景图位置，测量小图片的坐标，分别取负值设置给盒子的background-position：x，y；

设置背景图大小background-size：宽度 高度；

一般取值为：数字+px/百分比/contain（将背景图片等比例缩放，不会超出盒子的最大，可能有留白）/cover（将背景图片等比例缩放，直到填满整个盒子，没有留白）

连写background：color image repeat position/size；

盒子阴影

h-shadow：必须添加，水平偏移，允许负值，取值为数字+px

v-shadow：必须添加，垂直偏移，允许负值，取值为数字+px

blur：模糊度，取值为数字+px

spread：阴影扩大，，取值为数字+px

color：颜色阴影

inser：将阴影改为内部阴影

box-shadow：h-shadow v-shadow blur spread color inser；

过渡

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

transition：all/具体的属性名（过渡的属性）  数字+s（过渡的时长，秒）

元素整体透明度

元素整体透明度opacity：0-1之间的数字