首页 > 代码库 > css基础

css基础

2024-09-17 16:39:38   215人阅读

本博客为本人在学习css编程过程中积累的笔记和感悟，仅供学习参考和翻阅

 

文本样式
text-align: justify;                    文本格式：两端对齐
text-indent: 40px / 10%;         文本首行缩进
font-family: "楷体"；               字体样式：楷体
font-style: italic;                      字体样式：斜体
line-height: 100px;                 总高度100，文本居中显示，使文本中线对齐
vertical-align:           baseline,      sub,     super,      top,                          text-top
文本对齐方式：默认，对齐下标，对齐上标，对齐行中最高元素，顶端与父元素字体顶端对齐，
text-transform: capitalize;     首字母大写
text-transform: uppercase;     选中字母大写
text-transform: lowercase;     选中字母小写
letter-spacing: 10px;     字间距10px
margin
外边距（值可以为负），垂直方向的外边距会重叠（取大值）
border
边框
border: 1px solid red;     设置宽度为1像素的红色实体边框线
border: 1px dashed red;     虚线边框线
border: 1px dotted red;     点状边框线
border: 1px double red;     双线边框线
border-radius: 50%;     四边全圆倒角（长宽相同呈正圆）
border-top-left-radius: 2px;     左上角呈半径为2像素的倒角
padding: 10px 20px;      值不可为负
内边距：上下10px，左右20px
padding: 10px 20px 30px;
内边距：上10px，左右20px，下30px
padding: 10px 20px 30px 40px;
内边距：上10px，右20px，下30px，左40px
outline: 10px solid black;
border要占用像素，outline不占用
display: line-block;
将块级元素转换为行内块级元素
cursor: pointer, waite; w-resize;
鼠标移上之后该元素添加手型：点击，沙漏，左右位移标识；
transform: skew(20deg);
背景向右倾斜；
transform: rotate(90deg);
顺时针旋转90度
box-sizing: border-box;
将盒模型的边框包含在content内，让padding的宽度和border的宽度包含在元素的width内
 
 
触发bfc
bfc块级格式化上下文，给父级设置了以下属性，可以保持父级属性不被子级影响，反之亦然
  1. 根元素
  2. float
  3. overflow: auto、scroll、hidden;           子级超出父级范围：自动、出现滚动条、隐藏；    overflow-x: scroll;    overflow-y: scroll;
  4. display: table-cell、table-caption、inline-block、flex、inline-flex;           转化为其他元素
  5. position: absolut、fixed;            
overflow: hidden;
子级超出父级范围：不显示；
overflow: scroll
子级超出父级范围：出现滚动条；          父级的范围和属性不变，拉动滚动条可以查看子级
overflow-x: scroll
 

列表样式

li{
list-style: none;          去掉小圆点
list-style: upper-roman;          大写罗马数字
list-style: lower-roman;          小写罗马数字
list-style: upper-alpha;          大写英文
list-style: lower-alpha;          小写英文
}
 
选择
#id{     }               id选择器
.class{     }               class选择器
元素 [ 属性=属性值 ] {     }          属性选择器
li: first-child; last-child;
选择第一个元素（当li的父级第一个元素是li时） ，选择最后一个元素（当li的父级最后一个 元素是li时）
li: first-of-type; last-of-type;
选择父级里特定类型的第一个元素 ，选择父级里特定类型的最后一个元素
nth-child()     nth-of-type()     用法同上
a: link{     }          未被访问（初始状态）
a: hover{     }          鼠标移入/悬停
a: active{     }          点击时
a: visited{     }          访问以后
 
伪元素
*: first-letter     第一个字（字母）
*: first-line          第一行
*: before          在...之前
*: after               在...之后
 
伪类
*: nth-child(3n+1)          选择父级中某个类型为*的项【每3项选择一次，第一项从（3*0+1）开始】
*: nth-of-type(3n+1)      选择父级中特定类型的某项 【每3项选择一次，第一项从（3*0+1）开始】
 
浮动
  1. 浮动会脱离文档流
  2. 浮动会导致其父级高度塌陷（高度变为0）
  3. 行内元素浮动后（脱离文档流）被视为块级元素
  4. 浮动对文字有包裹性（如果文字过少，需要手动设置文本的宽度）
  5. 如果 A 浮动影响了 B ，则在 B 上增加 clear: both 即可消除影响
float: right;               右浮动（列表项从右边依次排列）
clear: both;               清除浮动
 
定位
相对定位（相对自身原来的位置）
position: relative;
left: -100px;               向左移动100px
绝对定位（脱离文档流）
position: absolute
top: 0px;                    置顶
非静态定位（绝对定位会以包含它的非静态定位元素定位）
父级 position: relative;     定位父集
子级 position: absolute;     定位到父集里的绝对位置
固定定位（脱离文档流，以页面视口为准）
position: fixed;
 
 
边框/阴影
线型
boder: 1px solid #58a;          直线
border: 10px dashed red;          虚线
border: 10px dotted black;          点线
border: 10px double blue;          double点线
框
boder-top: 1px solid #58a;          顶部
border-right: 10px dashed red;          右边
border-left: 10px dotted black;          左边
border-bottom: 10px double blue;          底部
倒角
border-radius: 10px/50%;          圆倒角
阴影
box-shadow: 5px 5px 20px 10px #000;          元素阴影：X Y 模糊 外延 颜色
 
图片格式
background-repeat: repeat; no-repeat; repeat-x; reapt-y;          背景图设置平铺方式：平铺 ；不平铺；水平平铺；竖直平铺；
 
背景色渐变
rgb(255,255,255) 白色
rgba(255,255,255,0.5) 白色50%透明度
线性渐变
background: linear-gradient(red, yellow);               纵向背景色渐变：红色，黄色
background: linear-gradient(to right, red, yellow)          向右渐变色：红色，黄色
background: linear-gradient(-90deg, red, yellow)          顺时针90度渐变色：红色，黄色
径向渐变
background: radial-gradient(red, yellow)          径向渐变（呈圆形扩散）

 

状态渐变
transition: all/width linear/ease-in 1s;
动作渐变：所有/宽度     匀速     时长
-webkit-transition: all linear .5s     浏览器兼容：谷歌
-moz-transition: all linear .5s;     浏览器兼容：
-ms-transition: all linear .5s;     浏览器兼容：Microsoft
-o-transition: all linear .5s;     浏览器兼容：欧朋
transition: all linear .5s;
注：transition属性需渐变，必须设置原始状态（如需top: 100px;则先设置top: 0;），否则无渐变效果
 
动画
animation: name 2s 3/infinite;          动画属性，首先声明（写在元素属性里）
动画：     名称     时长     3次/循环
@keyframes name{
from{
}                    从一个状态变化到另一个状态
to     {
}
}
@keyframes name{
0%{
 
}
30%{
              分部制定变化流程
}
100%{
 
}
}
 
图片替换技术（点击logo跳转主页）
.h1 a{
display: block;                              先将行内标记转换为块集标记
line-height: 200px;                         再修改高度，将文字移除显示范围
}
.h1{
          //定义块大小
overflow: hiddeng;                         将父块范围之外的内容隐藏
}

css基础


联系
我们