CSS个人笔记

最新推荐文章于 2024-07-06 23:20:22 发布

y及时行乐

最新推荐文章于 2024-07-06 23:20:22 发布

阅读量94

点赞数

文章标签： css 笔记 css3

本文链接：https://blog.csdn.net/weixin_49726201/article/details/132207871

版权

1.居中方式【太重要】

1.text-align:center(常用)[水平居中]

基本使用:定义行内内容（例如文字）如何相对它的块父元素对齐(说白了就是文本在一个盒子内的对齐方式)

特点：给父元素设置居中导致子元素（行内级）居中

规定元素中的内容(意思给父级设置text-align:center会让行内级（display:inline-block）的子元素居中)（例如文字）的水平对齐方式(只对行内级元素起作用

2.margin :0 auto[水平居中]

特点：给自身设置会让自己居中（块级）【自身必须要有宽度】

让块级元素（有宽度）居中

2.font-family

font-family：文字的字体名称

可通过@font-face指定下载字体进行使用

3.line-height

简单理解为一行文字的高度,严格定义:两行文本基线之间的距离

line-height=盒子高度 ==>> 让文本在盒子中垂直居中显示

<style>
  .box{
  	height:100px;
  	background-color:#f00;
  	color:#fff;
  	line-height:100px;//让line-height=盒子高度就会让盒子位于高度中间
}
</style>

<body>
  <div class="box">
  	我是div元素
  </div>
</body>

4.伪类选择器：hover（常用）

<style>
/* 鼠标放在上面的颜色 */
/*中间不能有空格 */
div:hover{
        color:red;
    }
/* 被访问过了的颜色 */
a:visited{
    color:green
}


</style>

<body>

<div class="box">我是div元素</div>
<a href="http:www.mi.com">小米</a>
</body>

5.伪元素::before和::after(常用 )

::before和::after(常用 )：用来在一个元素内容之前或之后插入其他内容

需要在后面添加content

 <style>
.box::before{
    content:'123'//  使用为元素的过程中，不要将content省略
}
.box::after{
    content:'123'
}
</style>
<body>
	<div class="box">
		我是div元素  
	</div>
</body>

7.css层叠性

权重

!important>内联样式>id选择器>类选择器>元素选择器>通配符

8.元素类型

块级元素和行内块级元素可以存放任何元素 ,行内元素不能存放块级元素和行内块元素

块级元素：独占一行（p/div）将块级元素转为行内级元素：display:inline

行内级元素：多个元素同一行显示（span/a/img/strong/i）将行内级元素转为块级元素：display：block

9.display属性（重要）

block元素：

独占一行
可以随意设置宽高
高度默认由内容决定

inline-block元素：

跟其他行内级元素在同一行显示
可以随意设置宽高

inline元素：

跟其他行内级元素在同一行显示
不可以随意设置宽高
宽高都由内容决定

10.元素隐藏

方法一: display设置为none
元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
方法二: visibility设置为hidden
设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间
默认为visible, 元素是可见的
方法三: rgba设置颜色, 将a的值设置为0
rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素
方法四: opacity设置透明度, 设置为0 ,会占据元素应该占据的空间
设置整个元素的透明度, 会影响所有的子元素

11.css样式不生效技巧

选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对

- 元素不支持此CSS属性，比如span默认是不支持width和height的
- 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
- 被同类型的CSS属性覆盖，比如font覆盖font-size

建议充分利用浏览器的开发者工具进行调试

12.内边距padding

父子元素之间的间距

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距

13.外边距margin

margin-top:50%:移动父元素宽度的50%

兄弟元素之间的间距

margin属性用于设置盒子的外边距, 通常设置元素和元素之间的间距

14.box-sizing

box-sizing:border-box的理解和作用

正常情况下应设置box-sizing=border-box,这样使用padding，border等属性就在盒子内部变化，不会引起外部盒子的大小变化

15.与background有关的东西（网页背景设置）

background-image:用于设置元素的背景图片【给整个页面添加背景一般做法：background:url ( ) 】
background-repeat:用于设置背景图片是否要平铺 (no-repeat图片不平铺)

- background-repeat:no-repeat(不平铺)

background-size:用于设置背景图片的大小

- cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
- ：百分比，相对于背景区（background positioning area）
  例如：background-size:100% 100%

background-position用于设置背景图片在水平、垂直方向上的具体位置

- 让背景图片居中：background-position:center center

16.box-shadow

offset-x（阴影水平方向的偏移） offset-y（竖直方向的偏移） blur(模糊半径)

(28条消息) box-shadow详解火兰的博客-CSDN博客box-shadow

17.结构伪类

nth-child

nth-child(1)：是父元素中的第1个子元素
nth-child(2n)：是父元素中的第偶数个子元素（第2、4、6、8......个）
nth-child(2n + 1)：是父元素中的第奇数 个子元素（第1、3、5、7......个）
nth-child(-n + 2)：代表前2个子元素

 <style>
        div:nth-child(2n){
            color: red;
        }
    </style>

<body>
    <div class="container">
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
        <div>111</div>
    </div>
</body>

nth-last-child

nth-last-child(1)，代表倒数第一个子元素
nth-last-child(-n + 2)，代表最后2个子元素

18.额外知识补充

border图形

三角形

   <style>
       /*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
	div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid pink;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}  
	</style>
    <body>
        <div>

        </div>
    </body>

web字体

1.将字体放到对应的目录中
2.通过@font-face来引入字体, 并且设置格式
.使用字体

字体图标

day8 -129

选择图标下载代码在项目中使用

19.定位(重要)

position

标准流：元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

从左到右、从上到下按顺序摆放好
默认情况下，互相之间不存在层叠现象

通过position可以让元素脱离标准流,从正常的文档中取出元素

relative 相对定位【不脱标】

- 定位参照对象是元素自己原来的位置

在不影响其他元素位置的前提下，对当前元素位置进行微调[使用最多的场景]

- 没有脱离标准流，只是激活了top，right，left，bottom属性

absolute：绝对定位【脱标】p141

- 父级元素必须有定位元素才能让top，right，left，bottom属性有效果，常用于在父元素里面的定位，让其在某个位置

脱离标准流，脱标

- 定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口[和fixed一样]
- 为了让自己的绝对定位position：absolute有效果，通常给父级元素添加相对定位，称为子绝父相

fixed：固定定位【脱标】

- 脱标，定位参照对象是视口（viewport）当画布滚动时，固定不动

sticky：粘性定位

- 可以看做是相对定位和固定(绝对)定位的结合体；它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点；当达到这个阈值点时, 就会变成固定(绝对)定位;
- sticky是相对于最近的滚动祖先包含滚动视口的

position值的对比:

20.子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。【父级元素不能脱标，否则子元素的absolute定位没有效果】

父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置position: absolute
简称为“子绝父相”

21.将position设置为absolute/fixed元素的特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束

- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失

不再给父元素汇报宽高数据【由于脱离了标准流的原因】
脱标元素内部默认还是按照标准流布局

22.z-index

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）

  .box1 {
            background-color: red;
            position: absolute;
            top: 40px;
            left: 40px;
            z-index: 1;//仅对定位元素有效
        }

z-index越大，层叠在越上面

23.浮动

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

浮动的规则

元素一旦浮动后, 脱离标准流

- 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
浮动元素之间不能层叠【p151规则3】

- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）【重要】
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

24.清除浮动[重要]

清除浮动的原因:父元素因为子级元素浮动引起的内部高度为0的问题

(28条消息) 清除浮动的4种方式star@星空的博客-CSDN博客清除浮动

最佳方式:给父级添加overflow:hidden --- BFC解决方式

<style>
        .container{
            width: 300px;
           border: 1px solid red;
           overflow: hidden;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

25.布局总结

26.transform

对一个元素进行某些属性的编瞎话，包括旋转，缩放，倾斜和平移等

注意：并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变）

常见的函数transform function有:

平移

transform:translate()

平移：translate(x, y)

- translate的百分比是相对于自身的
- transform:translateX()
- transform:translateY()

缩放

transform:scale()

缩放：scale(x, y)

旋转

transform:rotate()

旋转：rotate()

常用单位deg：旋转的角度（ degrees ）

正数为顺时针，负数为逆时针

形变的原点

比如在进行scale缩放或者rotate旋转时，都会有一个原点。

28.transition动画

弊端：1.只能定义开始状态和结束状态，不能定义中间状态，也就是只有两个状态

2.不能重复执行，除非一再触发动画

transition-property：指定应用过渡属性的名称

- all：所有属性都执行动画；
- none：所有属性都不执行动画；
- CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；

transition-duration：指定过渡动画所需的时间

- 单位可以是秒（s）或毫秒（ms）

transition-timing-function：指定动画的变化曲线

- transition-timing-function - CSS：层叠样式表 | MDN

transition-delay：指定过渡动画执行之前的等待时间

简写：transition:all 1s ease-in

实现鼠标移动到盒子上和离开都有动画：

<style >
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 200px auto;
            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }

        div:hover {
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>

  <body>
    <div></div>
  </body>

29.居中方式（重要）

水平居中

行内级元素：

- 设置父级元素的text-align：center

块级元素

- 设置当前块级元素（宽度）margin ：0 auto

绝对定位

- 元素有的宽度的情况下，left0/right0/margin： 0 auto

flex

- justify-content:center

垂直居中

flex布局【弊端：当前flex布局中所有的元素都会被垂直居中】

- align-item:center

top/translate

- 需要设置页面高度才能使用top的百分比
- 让元素向下移动父元素的50% 让元素向上移动自身的50%

    <style>
        body{
            height: 100vh;
            width: 100vw;
        }
       .container{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
        top: 50%;
        transform: translate(0,-50%);
       }
    </style>

<body>
    <div class="container">
     
    </div>
</body>

30.Animation动画

@keyframes规则
可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配

animation属性

 <style>
@keyframes move {
    0%{
        transform: translate(0,0);
    }
    33%{
        transform: translate(300px,0);
    }
    66%{
        transform: translate(300px,300px);
    }
    100%{
        transform: translate(0px,300px);
    }
}

        .box{
            width: 100px;
            height: 100px;
            background-color: black;
            animation-name: move;//动画名称
            animation-duration: 4s;//动画持续时间
        }
    </style>
<body>
  <div class="box">
  
  </div>
</body>

31.transform/translate/transition

transform是形变

- 一个CSS属性，该CSS属性用于设置形变
- 后面的值是形变的函数，比如scale、rotate、translate；

translate是其中一个transform-function

- 用于对元素进行平移；

transition是过渡的意思

- 它本身也有转变的含义，但是更多表示的是过渡的过程；

32.移动端适配

布局视口【980px】

我们相对于980px布局的这个视口，称之为布局视口；布局视口的默认宽度是980px；

视觉视口

那么显示在可见区域的这个视口，就是视觉视口

设置移动端视口

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

33.移动端适配方案

百分比设置【用的少】
rem单位+动态html的font-size

- rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。
- 媒体查询【弊端多】

- - (28条消息) 什么是媒体查询？dream_lifes的博客-CSDN博客媒体查询

@media(max-width:800px)&&(min-width:500px){
  body{
    background-color:orange
  }
}

- lib-flexible库

vw单位【常用】p284【若使用vw，可以直接放弃使用rem】

flex的弹性布局

34.Flex布局

Flex布局

比例布局

 <style>
    .box{
        display: flex;
    }
    .box1{
        flex: 1;
        height: 120px;
        background-color: pink;
    }
    .box2{
        flex: 1;
        height: 120px;
        background-color: black;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>

比例布局