首页 > 代码库 > css基础

css基础

本博客为本人在学习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基础