basecss

别说你不吃香菜
41 阅读3分钟

1 css选择器

  • 1.1 简单,组合,伪类,伪元素,属性
  • 1.2 id 选择器# 类选择器. p.center p元素的class = 'center'才会有效果
  • 1.3 通用选择器 *{}影响页面上的每个html元素
  • 1.4 分组选择器h1 ,h2, p{} 就可以了
  • 1.5 后代选择器h1 h2 中间没有,即可
  • 1.6 伪类:用来定义元素的特殊状态

2 伪类列表

  • :active 活动链接
  • :checked 每个被选中的
  • :disabled 每个被禁用的
  • :empty 没有子元素的
  • :enabled 启用的
  • :first-child 首个子元素
  • :first-of-type 每个子元素
  • :focus 焦点
  • :hover 悬停

image.png

3 伪元素

  • 3.1 伪元素就是设置元素指定部分的样式(比如设置元素的首字母,首行的样式,元素前后插入内容)
  • 3.2 伪元素的语法p::first-line 文本的首行添加特殊样式
  • :first-letter 伪元素
  • 可以和类结合使用 image.png

4 display

  • 每一个元素都是有一个默认的display值,但是可以改变
  • display:block 不让其中还有其他块元素
  • display:none hidden

5 布局position

  • static 静态
  • relative 相对正常位置定位
  • fixed 相对于视口定位,比如滚动界面
  • absolute 相对于最近的定位祖先
  • sticky 根据用户hi的滚动在相对位置和fixed之间切换
  • z-index 指定元素的堆栈顺序

6 浮动和清除

  • 6.1 float:none 浮动
  • 6.2 clear属性可以指定那边可以有浮动元素
  • 6.3 box-sizing 可以允许我们在框的总高度和宽度中包括内边距外边距,确保框在中间不回破裂

7 css布局

  • display:inline-block 可以保留内外边距,设置宽高,不换行,
  • display:inline 不能宽高
  • display:block 要换行

8 居中

  • magin : auto;
  • 文本居中:text-align:center
  • position:absolute设置left 或者right
  • 垂直对齐,padding
  • position:absolute ; transform : translate(-50%,-50%);
  • display: flex ; justify-center:center;items-align:center;

9 flex

  • flex-box布局,一个一维的布局
  • 主轴和交叉轴:flex-direction:row column row-reverse column-reverse 设置主轴
  • flex-wrap:nowrap 就是不换行
  • flex-grow can longer
  • align-items 在交叉轴对齐
  • justify-centent 主轴对齐

10 透明度 opacity

  • opacity : 0.1;
  • rgba( , , , 0.1 );颜色和透明度
  • 让子元素不继承 ,换上面的rgba 的透明度
  • 伪元素实现
parent{
position:relative;
z-index:0;
}
parent::before{
content:"";
position:absolute;
opacity:0.1;
background-color:#fff;
z-index:-1;
}
/*相当于给我的parent元素加一个背景*/
child {
color:#000;
}

11 渐变

  • background-image:liner-gradient(direction,color(rgba),color)

12 shadow

  • text-shadow:2px 2px 5px red; 文字阴影模糊颜色往右,往下,模糊,颜色
  • text-shadow: 0 0 3px #FF0000 , 0 0 5px #0000ff,多个阴影效果
  • 包围文本的边框:
  • box-shadow

13 动画

  • transform
  • translate
  • transition

14 css 动画

/*动画代码*/
@keyframes example{
from{background-color:red;}
to{background-color:yellow;}
}
div{
background-color:red;
animation-name:example;
animation-duration:4s;
}

15 工具提示

.tooltip{
....
}
.tooptip .tooltxt{
....left 位置样式等
}
.tooltxt:hover .tooltiptext{
visibility:visible;
}
  • 气泡样式
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

16 图像样式

  • filter : grayscale(100%) 滤镜
  • 响应式图像:max-width;heeight:auto; ..

17 css变量

:root{
--blue:# 000;
--white:#fff;
}

div{
bg:var(--blue);
}

18 媒体查询

@media

  • 视口的宽度,高度,设备的宽度,高度,或者vw;

19 bfc

  • 块格式上下文
avatar
文章
阅读
粉丝