Vinson

Vinson

CSS3

发表于 2023-08-03
Vinson
阅读量 41

选择器

  • attr 选择属性

    • attr=value:选择属性匹配属性值
    • attr~=value:选择器属性匹配属性值,词组
    • attr^=value:选择属性匹配属性值,以 value 开头
    • attr$=value:选择属性匹配属性值,以 value 结束
    • attr*=value:选择属性匹配属性值,包含 value
  • 结构伪类

    • :first-child:选取属于父元素的首个子元素
    • :last-child:选取属于父元素的最后一个子元素
    • :nth-child(n):选取属于父元素的第 n 个子元素
    • :nth-last-child(n):选取属于父元素的第 n 个子元素,从最后一个子元素开始计数
    • :nth-of-type(n):选取属于父元素的特定类型的第 n 个子元素
    • :nth-last-of-type(n):选取属于父元素的特定类型的第 n 个子元素,从最后一个子元素开始
  • 状态伪类

    • a:link:正常的,未访问过的
    • a:visitied:访问过后的
    • a:active:激活中
    • a:hover:鼠标悬停

注意
a:hover 必须放在 a:link 和 a:visitied 之后,才有效

  • 表单伪类
    • :checked:被选中的元素
    • :enabled:可用的状态元素
    • :disabled:禁用状态的元素

阴影

text-shadow: x y  blur  color;
box-shadow: x y  blur  spreed  color inset;
css
  • x: 水平,y: 垂直,blur:模糊度,spreed:尺寸,color:颜色,insert:内阴影,默认的是外阴影

background

background-image: url(),url()....;
background-size: length | % | cover | contain ;
/* cover:把背景图片扩至足够大,以使背景图像完全覆盖背景区域。 */
/* contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 */

background-origin:content-box | padding-box | border-box;
/* content-box 背景图片相对于内容框来定义 */
/* padding-box 背景图片相对于内边距框来定义 */
/* border-box 背景图片相对于边框线来定义 */
  
background-clip:content-box | padding-box | border-box;
/* content-box 背景裁剪到内容框 */
/* padding-box 背景裁剪到内边距框 */
/* border-box 背景裁剪到边框线 */
css

resize

resize:none | both | horizontal | vertical;
css
  • none:无法调整元素的尺寸
  • both:可以调整元素的宽度和高度
  • vertical:可以调整元素的高度
  • horizontal:可以调整元素的宽度

注意
如果其他元素希望该属性生效,需要设置元素的 overflow 的属性,值除了 visible 以外

线性渐变

background: linear-gradient(角度,颜色);
/* 关键字:left right top bottom */
/* 角度值:角度的单位  deg */
css

重复线性渐变

background: repeating-linear-gradient(角度,颜色 颜色的起始位置)
/* 渐变的值可以设置一个或多个,多个值列表之间用【逗号】隔开 */
css

径向渐变

background:radial-gradient(中心点,颜色);

中心点取值-关键字:center

background-image: radial-gradient(circle, red, yellow, green); /* 不同尺寸大小关键字的使用: */
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
css

重复径向渐变

background:repeating-radial-gradient(中心点,颜色 颜色的起始位置)
css

图片的边框

图片添加链接在 IE 中会出现边框线:给图片标签设置

border:none;
css

IE 低版本的兼容

  • 小高度(IE6-)
font-size:0px;
line-height:0px;
css
  • IE7- 子标签相对定位时,父标签的 overflow:hidden 属性失效
position: relative; /* 给父元素添加解决 */
css
  • IE6- 浮动时会产生双倍边距的 bug IE7- 块转行内块不会在一行上显示
display:inline-block;
*display:inline;
*zoom:1;
css
  • IE7- 当 li 中出现两个或以上的浮动时,li 之间会产生空白间隙
vertical-align:top/bottom/middle;
css

CSS Hack

条件 Hack

<!--[if ie]>
  <style>
    选择器{声明;}
  </style>
<![endif]-->
css

用于选择浏览器及浏览器版本

  • gt:大于
  • gte:大于等于
  • lt:小于
  • lte:小于等于
  • !:非指定版本

属性 Hack

  • IE6- 属性前
  • IE7- 属性前
  • IE8-9 属性值后

选择符Hack

IE6-
.box{
  background:yellow;
}
IE7-
.box{
  background:green;
}
css

过渡

transition: property duration  timing-function  delya;
css
  • property 过渡的属性 多个属性之间用逗号隔开 none没有过渡属性 all所有的
  • duration: 过渡时间 s / ms
  • timing-function: linear匀速 ease
  • delay 延迟时间

动画

  1. 创建动画过程 @keyframes
  2. 调用动画
animation: name duration timing-function delay iteration-count direction;
css
  • name:动画名称,绑定到 @keyframes
  • duration:完成动画的时间
  • timing-function:曲线速度 linear
  • delay:延迟时间
  • iteration-count:动画播放次数 number,infinite 无限
  • direction:是否轮流反向,alternate

变换

transform: translate(x,y) rotate(deg) scale(x,y) skew(x,y)
transform-origin: length | 关键字 | %
transform-style:flat | preserve-3d;
perspective: number;
backface-visibility: hidden;
css
  • 2D

    • translate(x,y):平移
    • rotate(deg):旋转
    • scale(x,y):缩放,1 默认值,比 1 大放大,比 1 小缩小
    • skew(x,y):倾斜,单位是角度 deg
  • 3D

    • translateZ():z 轴平移,前后移动
    • translate3d(x,y,z)
    • rotateX():绕 x 轴旋转 前后翻转
    • rotateY():绕 y 轴旋转 左右翻转
    • rotateZ():绕 z 轴旋转 水平翻转
    • rotate3d(x,y,z,deg):-1 0 1 0-360deg
    • scaleZ():在 z 轴上缩放
    • scale3d(x,y,z)
    • perspective:视距
    • transform-origin:元素的中心点
    • transform-style:保留子元素的 3d 位置
    • backface-visibility: 翻转之后看不见盒子背面

Flex 弹性盒子

设置 flex 属性

display:flex/inline-flex;  /* IE11支持,IE10-不支持 */
css

容器属性

flex-direction:row / row-reverse / column / column-reverse; /* 排列方向 */
justify-content: flex-start / flex-end / center /space-between /space-around / space-evenly /* 对齐方式(主轴) */
align-items : stretch 默认|| flex-start ||  flex-end  ||  center || baseline /* 对齐方式(交叉轴) */
flex-wrap : nowrap || wrap  || wrap-reverse 
css

项目属性

order: 0; /* 数值越小,排列越靠前 */
flex-grow: 0;/* 放大 */
flex-shrink: 1; /* 默认缩小 */
flex-basis: auto;/* 分配多余空间前,项目占据的主轴空间, */
flexflex-grow flex-shrink  flex-basis;
flex: 0 1 auto;   /* 放大  缩小  占据主轴空间 */
align-self: stretch 默认|| flex-start ||  flex-end  ||  center || baseline
css

Grid 网格布局

设置 Grid 属性

display: grid;/* 网格布局 */
grid-template-rows: 20% 10% 100px auto;/* 四行 */
grid-template-columns: 100px auto 20%;/* 三列 */
grid-template-rows:repeat(3 , 1fr);/* fr表示占剩余空间的1倍 */
grid-template-columns: repeat(3 , 1fr);/* repeat表示3列都是1fr */
css

区域划分

 .box {
  width: 500px;height: 500px;
  border: 1px solid #000;
  display: grid;
  /* 网格布局 */
  /* grid-template-rows: 20% 10% 100px auto; */
  /* 四行 */

  /* grid-template-columns: 100px auto 20%; */
  /* 三列 */

  /* grid-template-rows:repeat(3 , 1fr);
  grid-template-columns: repeat(3 , 1fr); */
  
  /* 给每个格子起一个名字 */
  grid-template-areas: 
  "a1 a1 a1"
  "a2 a2 a3"
  "a2 a2 a3";
  
}
.box div{background-color: red; border: 1px solid #000;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}
css
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
html

grid

间距

grid-row-gap: 20px;/* 每个网格横向的间距 */
grid-column-gap: 10px;/* 每个网格纵向的间距 */
grid-gap: 横向 纵向;/* 复合写法 */
css

内容排列

每个小格子里面的内容怎么排列

justify-items: stretch;
align-items: stretch;
css

盒子排列

每个格子在大盒子的水平垂直排列 类似display:flex

justify-content: start;
align-content: space-around;

/* 复合写法 */
place-content: 纵向 横向;
css

媒体查询与 calc 函数

媒体查询

/* @media 媒介的意思 screen窗口的大小 */
@media screen and (max-width: 640px){/* 当浏览器不超过 640 的时候使用以下样式 */}
@media not and (max-width: 640px){/* 与上面的相反 大于 640px 才会触发 */}
@media screen and ( orientation: landscape){/* 在横屏下触发 */}
@media screen and ( orientation: portrait){/* 竖屏下触发 */}

<link rel="stylesheet" href="css.css" media="all and (mid-width:400px)">
/* 小于400px才引用外部css */
css

calc() 函数

calc(表达式)
css
  • calculate 计算的缩写,是 css3 新增的计算功能,用来指定元素的长度
  • 运算符前后必须保留一个空格
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论