CSS
2024-01-19 22:27:42 0 举报AI智能生成
CSS自学思维导图
作者其他创作
大纲/内容
分支主题
属性
table
标签属性
table
width、height、border、bgcolor、bordercolor、align、collspacing、cellpaddding、rules、frame
tr
height、bgcolor、align、valign
td
height、width、bgcolor、align、valign、合并单元格colspan(横向合并)\rowspan（纵向合并）
CSS属性
table
borde:同时在table和td样式中说明才相当于HTML中表格的边框效果
cellspacing指单元格与单元格的距离
border-spacing
取值为0时，边框为2px，1+1=2
区别
一个是调整单元格之间的距离，一个是合并空隙（包括边框）形成细线边框
可以独自使用border-collapse形成细线边框，此时单元格之间也不存在空隙
细线边框
border-collapse：单元格边框合并（边框为1px）
separate：默认值，不合并
collapse：合并
cellpadding指单元格和内容之间的空隙
表格横纵边框线rules
rows（行，横）/cols（列，纵）/group（组，横纵）
frame：表格的外边线
above（上边框线）/below（下）/lhs（）左/rhs（右）/box（都有，默认）
align：表格的水平对齐方式
left，right，center
table-layout：表格的布局算法——是否固定单元格的宽度
auto：自动
优：灵活
缺：每次都会重新加载计算表格大小
文本过多时，单元格被撑大
fixed：固定
优：拥有固定宽度，单元格不被撑大，每次加载不用重新计算大小
缺：不灵活
拥有固定宽度，单元格不被撑大
需要控制折行或隐藏，防止内容过多溢出
td
padding：0px；给单元格设置内边距（取消）
empty-cells：hide；隐藏空内容的单元格
将后台拿到的数据整齐显示在页面中
超链接
a:link==未访问
a:visited==已访问
a:hover==滑过，不限制于超链接
a:active==按下未激活
注意：顺序不同可能造成超链接失效
color
red等颜色单词
十六进制（#123456，a是10，大小写都可）
1，2==红色；3，4==绿色；5，6==蓝色
相邻两位的取值一样可以简写（#112233==#123）
rgb（red，green，blue），每一个范围0-255，当存在第四位时，第四位表示透明度
font
font-size:字体大小
px，pt，em（相对于自己字体标签大小进行大小缩放的一个倍数，字体大小默认16px）
font-family：字体种类
中文字体，不需要带引号
若为单个的英文单字字体，不带引号
多英文单词，带引号
多个值，逗号隔开
从左到右依次执行，若都未能执行则则行浏览器默认字体
font-weight：字体粗细
100-900
100==细体；400==正常；700== 加粗
font-weight：400；//令加粗等效果变为正常字体
font-weight：700；//大规模加粗，节省代码
：hover；滑过加粗，动态效果，不能使用<b></b>等加粗标签
关键词
lighter==100
normal==400
bold==700
bolder==900
bold与bolder无明显变化，但后者语义更强
font-style：字体样式
italic:倾斜
blique：斜体字（和italic没区别，更有强调性）
normal：正常
text-align：文本对齐方式
left（默认），right，center，justify（两端对齐）
linr-height：（px）文本的行间距
linr-height：height//单行文本垂直居中
font：复合属性
font：font-style font-weight font-size/line-height font-family
使用时必须包含字体和字体大小，字体种类必须位于最后
不能忘记size和height的/（有size则必须有line-height吗？）
可以省略或者调整字体样式和粗细（font-style font-weight）顺序
text-decoration：修饰线
underline：下划线
line-through：删除线（s，del）
overline：上划线
none：取消（常使用于超链接）
多属性使用时，用空格隔开，即可以多线并存
text-indent：（px/em）首行缩进
正负都可以
间距属性
letter-spacing：字符（字）间距==汉字，英文字母，标签，符号，空格
word-spacing：词间距==英文单词和英文单词间距
背景属性
background-color
单词，十六进制，rgb，rgba（a一般保留一位小数，小数时零可以省略但是小数点不行）
backgroung-image：url（）；
默认平铺效果，图片优先于背景颜色
background-repeat：背景平铺属性
repeat/no-repeat/repeat-x/repeat-y
平铺/不平铺/横向平铺/纵向平铺
background-position：x y ；
用于控制背景图片位置：插入图片取消平铺，此时图片默认浏览器左上角显示
x正为右，y正为下
x：left/right/center/px
y：top/bottom/center/px
background-size
x y
水平方向大小/垂直方向大小（px）
cover/contain
覆盖：等比例放大图片，直到这个图片撑满盒子为止，易被裁剪
包含：等比例放大，一边撑满盒子就会停止，易留白
background-attachment：背景图片的固定和滚动
说明：后面提及定位可以相互比较
scroll：滚动，图片随滚动条而滚动
fixed：固定，图片不随滚动条滚动而改变原有位置
添加了fixed，背景图片的参照物由div变成了浏览器
复合属性
background：color（默认透明） image repeat（repeat） position/size attachment（scroll）
可一个或多个值，顺序不分先后
position和size用/连接，位置不调整也要说明是0px
size和position是否可以独立存在？
精灵图：雪碧图，妖怪图
将页面中需要使用的图片放在一张背景透明的图片上面，通过背景定位的属性将对应的精灵图区域显示在对应元素内
优：降低图片在服务器存储时的请求次数
列表属性
一般只使用复合属性
list-style：type image position；（顺序无关）
list-style-type：列表项的类型
disc==黑实心；circle==空心；square==黑正方形；none==取消
ul，li都可实现
其具有继承性，属性值和属性放在父元素或者子元素都可实现，这种属性称之为继承性的属性
list-style-image：url（）；
列表项的图片，会把列表项的类型覆盖
背景图片优于列表图片，前者便于调整位置
list-style-position：inside（里面）/outside（外面，默认）
指列表项在表格的里面还是外面
列表项在内边距，取消内外编剧不显示列表项，但是依旧存在所以要主动取消
边框属性——border：10px soild gray
border-width：v1/v1,v2(上下，左右)/v1,v2,v3（上，左右，下）/v1,v2,v3,v4（上，右，下，左）顺时针
border-style：同width,只有border-style可以单独使用，soild==单实，dashed==虚线，dotted==点虚线，double==双实线
border-color：同width
背景颜色可以蔓延到边框位置，内边距（padding）
可以单独设置一边的边框样式，如border-top：；
边框制作特殊图形
正方形：width：0px；hight无所谓
三角形：保留一侧，其他rgba（，，，0），或者利用transparent（透明色）
梯形：正方形取消一侧（左或者右侧时），然后给上面或者下面给transparent
注意
利用边框制作图形时，不给div宽高，宽会继承浏览器，可给w:0;h:0;
边框本质还是边框，始终环绕盒子，可以给盒子单一边框研究
当两边都存在边框时，才会出现拼色三角形
float：left/right/none
作用
定义文本如何环绕该元素显示
让竖着的元素变为横着的
注意
浮动元素不占页面控件，脱离了文档流
浮动元素不影响其他元素独占一行
元素浮动空间不足会折行显示
盒子浮动参照时以倒数第二个浮动盒子的右侧和下方进行补位的，如果高度不一致，则会出现被卡位的效果
清除浮动带来的影响
即不让后面的元素进行补位
clear：none（允许）/right（不允许右边有浮动对象）/left（不允许左边有浮动对象）/both（不允许有浮动对象）；
清除浮动只是改变元素的排列方式，该元素依然漂浮，不占文档位置
clear作用在补位元素
盒子模型
CSS布局基石==盒模型
盒子模型由content（内容区域）padding（内边距，留白）border（边框）margin（外边距==边框与边框，元素与元素）组成
内容区域：显示区域的一些元素（文本修饰类型）不能被设置宽高//span、b、i
属性
padding
内容和边框之间的距离
内边框占位置，会撑开盒子大小
背景颜色会蔓延到内边距
可以分别取1，2，3，4个值规则同边框属性，也可padding-top
padding值是额外加在元素原有大小上，如想令大小不变则需在元素相应宽高减去对应值
border
margin
取值同padding
背景颜色不蔓延
盒子模型添加margin会撑开盒子占位，让盒子占位距离变大
何时使用盒子相关属性
padding：有边框，文本与边框距离
padding，margin：没有边框，但有间距
margin：有边框，边框外边有距离
padding：有背景颜色蔓延（没有margin也可以）
间距的特殊情况
margin，padding取值问题
取值都可为0
margin可为负值（移位置），padding不可为负值（报错）
margin：0；padding：0；元素位于浏览器盒子父元素的水平居中位置
*通配符代码不精确，匹配精确度不高，因为一些元素无内外边距
父子关系外边距重合问题
前提：父子包含结构中，想要子元素顶部和父元素隔开距离，给子元素添加margin-top，其作用在父元素而非子元素（即父子关系外边距重合）
解决（本质）：外边距可以是边框与边框之间的距离
给父元素对应方向添加一个边框
给父或子元素添加浮动，触发BFC机制形成一个独立的区域，这个区域不会影响外界区域，也不受外界干扰
给父元素添加一个overflow：hidden；同样形成一个BFC区域
给父元素添加定位position：absolute/fixed；同样形成BFC区域
给父元素添加padding，需要给父元素的height降低对应取值
注意：一切前提是采取给子元素添加margin-top
margin的上下间距重叠问题（兄弟关系）
情景：垂直排列盒子的外边距，给上box添加下外边距，给下box添加上外边距（考虑外边距重合问题）以最大值显示
形象化：僵尸打架两臂距离取最长者
解决
只给其中一个元素添加总值
给下box添加父元素，给父元素添加overflow：hidden；，触发BFC（块级格式化上下文）
了解：可以加浮动，但会脱离文本文档流打乱布局，不建议使用
margin的左右间距不重叠问题（兄弟关系）
情景：左右排列的两个盒子，给左侧box添加margin-right；给右侧box添加margin-left，两个盒子之间的距离不会出现间距重合
解决：float触发BFC
如果给margin：0 auto的元素添加浮动，margin：0 auto会失效，该代码只能让文档流中的内容实现水平居中
使用盒子模型时，margin，padding使用时，块级元素上下左右都能实现效果，撑开距离。但是在行内元素使用不能实现上下
溢出属性
溢出
布局过程中父元素有自己的宽高，父元素中的文本或者子元素的大小比较大，超出了父元素的区域
overflow：visible（默认，溢出显示）/hidden（溢出隐藏）/auto（自动，有滚动条效果）/scroll（滚动，超出后可以滚动）
auto：超出才有滚动条效果；scroll不超出也有滚动条效果
overflow-x/-y：设置水平方向和垂直方向溢出
实现单行文本溢出时产生省略号的效果
width：value；//容器宽度
white-space：nowrap；//强制文本在一行内显示
overflow：hidden；//溢出内容为隐藏
text-overflow：ellipsis；//溢出文本显示省略号
多行文本溢出
不要设置固定的高度
display：-webkit-box；//将对象作为弹性伸缩盒子显示
-webkit-box-orient：vertical（从上到下）；//设置或者检索伸缩盒子的子元素排列方式
-webkit-line-clamp：3；//用来限制在一个块级元素显示的文本行数
为了实现该效果需要组合其他的webkit属性
overflow：hidden；//隐藏溢出文本
设置n显示文本行数n-1
定位
定义
定位就是让元素在布局过程中进行位置的偏移，相对自己或者其他位置进行调整
种类：静态（static），相对（relative），绝对（absolute），固定（fixed），粘性（sticky）
属性：position，配合偏移属性使用，top，right，bottom，left
五大定位
静态定位
普通文档流，元素默认排列方式
static，默认值
即使跟了偏移属性也不会改变位置
相对定位
相对于自己的位置进行微调
参照物：自己；relative
top：正，向下走==距离顶部距离
left：正，向右侧走==距离左边距离
一般 只用left，top，所有元素的基准点都是左上角
绝对定位
子元素使用绝对定位，父元素有定位一般都是相对定位（无定位也可，子绝父相），则位置的调整是相对于父元素左上角进行位置的调整
若父元素没有定位，则子元素位置的调整是根据上一层的元素判断是否有定位属性，则参照最近的一层进行位置的调整，若都没有则参照的是浏览器左上角的body
参照body时，即使是小偏移量也会发生大偏移
absolute
绝对定位使用在ul而不是li，否则li会堆叠（脱离文档流）
固定定位
让元素相对于浏览器窗口进行位置的显示
参照物：浏览器窗口左上角
fixed
应用场景：返回置顶，广告，楼梯层，遮罩层
粘性定位
粘性定位是相对定位和固定定位的结合体，当页面元素发生滚动时，实现了对应的吸附效果，也称之为滚动吸顶
sticky
一定要设置偏移属性
定位的特殊情况
子绝父相中，父元素可以是其他定位
绝对（固定）定位不占页面空间，脱离文档流
相对定位，不脱离文档流，不会产生高度塌陷
绝对（固定）定位，脱离文档流导致后面元素补位，产生高度降低的效果，称之为高度塌陷
float也可以转换元素类型（行内转换为块级）
绝对（固定）定位可以改变元素类型
都添加定位的层级效果
定位元素会遮盖没有定位的元素，如果所有元素都有定位则默认的是后面的遮盖住前面的效果
如果不想实现上述效果，可以调整遮盖的层次顺序
Z-index：作用在已有定位的元素上
默认是auto
纯数值（整数），无单位，数值越大层级越高，可以取负值，小的被大的覆盖
给自适应的盒子添加定位的特殊情况（017-05）
添加的是绝对（固定）定位会让自适应失效，想依然让盒子处于自适应状态，需要盒子处于被文本撑开的状态
margin：0 auto；添加绝对（固定）定位会失效，因为脱离了文档流
包含块
如果position属性为absolute，包含块就是由它最近的position的值不是static的祖先元素
如果position属性是fixed，包含块是viewport（视口）浏览器当前窗口
使用情况
静态定位（默认值），粘性定位（实现滚动吸顶效果）
相对：微调（0~10px）
绝对：父相子绝
固定：广告栏，楼梯层，遮罩层
基础知识
Cascading Style Sheet 层叠样式表
CSS基本语法由选择器和样式规则（声明）组成
样式声明由属性和属性值组成
样式
内部样式
<head><style>选择器 {样式说明}</style></head>
缺：量大，导致head加载缓慢，主体比样式先加载出来
外部样式
link引入
<head><link href=""CSS文件地址 rel="stylesheet" type(非必须)=“text/css”></head>
import
@ import url（地址);//style标签内
外部引入的css代码应在对应位置首行
区别
link是单标签，属于标签语法；import是css语法，必须在style标签内
link，结构标签同时加载显示；import先加载结构再加载样式
在使用js时，操作页面元素的样式通过link引入的样式是可以直接完成dom操作，import不能完成dom操作
为什么css语法不能完成dom操作
import兼容性低
优先级
就近原则
！ import优先级最高
属性：属性值 ！import；
选择器
注意事项
类、id选择器小写字母开头，不能以数字开头
*：通配符选择器
往往用来取消内外边距
群组选择器（并集选择器）：选择器1，选择器2 {}
层次选择器
后代选择器
选择器1 选择器2 {}
包含一切后代
子代选择器
选择器1>选择器2 {}
只包含儿子
复合选择器
即多个或多种选择器叠加
通过相加计算权重可认为（id>类>标签>*==100>10>1>0)
CSS的层叠性
不同选择器修饰同一个元素时，相同的属性会被覆盖，不同属性保留
主要原因：选择器的权重值，权重值大的执行，当权重值一样则看代码执行顺序
窗口自适应
问题：div添加height：100%没有高度
因为有继承性的存在，div继承body，body继承html，添加样式说明body和html都是height：100%
百分比都与继承性有关
视觉差
对图片使用固定后，图片会堆叠在浏览器左上角，移动图片才会产生图片慢慢消失的效果
属性的继承
属性作用在父元素或子元素都可以实现效果的现象（AS：文本属性）
解决图片留白问题
div>img和p,p和img产生留白（一旦插入了图片就要解决留白问题）
原因：元素类型不同
解决：把img转换为行内块元素，display：block；
通栏
从左到右始终在水平中间，只用给height，color，width继承浏览器100%（色块区域）
滑过效果
：hover
margin不能实现，背景颜色不蔓延
导航栏设置
使用固定宽度，文本居中
padding调整左右间距
元素类型及分类
块级元素
默认的是纵向排列的，独占一行，可设置宽高
用于区域划分
div,p,ul,ol,li,dl,dt,dd,form,h1~16一系列的H5新增的语义化标签
行内元素
默认是横向显示的，不能实现宽高
用于独立文本的修饰
b,strong,i,em,s,del,u,a,font,sup,sub,span,mark
行内块元素
默认横向显示，还能实现宽高
input,textarea,select,img
img{display:inline;}特殊的行内块？
display：转换元素类型
inline==行内元素；block==块级元素；inline-block==行内块元素
特殊取值
li==display：list-item；是一个特殊的块级元素
table==display：table；是一个特殊的块级元素
tr==display：table-row；
td==display：table-cell；
div转换行内块要解决留白问题
隐藏元素
display:none;隐藏后不占位置
visibility：hidden；（visible显示）//隐藏后占页面空间，后面元素不能补位
w：0；h：0；//不占位置，div包含文本时
font-size：0；overflow：hidden；
透明度：opacity：；
让元素透明 ，0为透明，占页面空间
缩放：transform：scale（0）；//占空间
应用场景：二级菜单，让二级菜单内容显示隐藏
点击超链接留白也可跳转
div{<a>}设置div的宽高，且转换a为块级
把a转换为块级元素，转换后a撑开
原因：块级没有设置宽高，会继承父元素的一整行
设置div{line-height：height}该属性具有继承性，a占据一整行
图片下面3px留白
原因：图片是行内块元素，默认的对齐方式是以英文文本基线形式对齐的，3px
解决：
转换为行内块元素，display：block；
float：left/不为none即可
position：fixed/absolute；
取消间距：调整行内块元素的垂直对齐方式；该属性是应用在行内块元素中
vertical-align：basseline（基线，默认）
无留白：top，bottom，middle（中线）
透明属性（经典兼容问题）
opacity，低版本浏览器兼容不了（0~1==0.1~0.9包含0，1）
filter：alpha（opacity=50）兼容低版本，取值0~100
实战
PC端页面布局
logo区域
border:0/none;
0为取零值，none为不存在，两者都可实现，但后者节省代码，降低渲染
placeholder=“”
input的提示文本，输入后提示文本会消失，常用于输入框
类似input中的文本，文本属性可以控制该属性
与左侧有间距时使用text-indent，padding会撑大盒子
公共代码
a { text-decoration： none；}取消下滑线
_nav导航区域
设置共同的版心public {width：；margin：0 auto；}
使用时添加类名，空格连接双类名
_banner区域
从左到右撑开的轮播图，不用给高度
行间距，一行文字顶部到下一行文字的顶部
拒绝品字型布局，一般用日
logo区域使用图片不建议使用背景图片，直接插入图片即可
轮播图
占100%
<div><img></div>，给img设置w：100%
如何让子元素在父元素的水平垂直居中位置显示
首先子绝父相
top：50%；left：50%；
此时子元素左上角位于父元素的正中位置
margin-top：子元素50%h；margin-left：子元素50%w；
margin调整位置完成效果
元素位于浏览器水平垂直居中位置显示：参照物--浏览器
基本与上面一致，不同使用固定定位
楼梯层，遮罩层
原理与子在父中水平垂直居中相同
楼梯层（遮罩层）使用固定定位
遮罩层为屏幕大小，color加一定透明度
0 条评论
下一页
