DC's blog DC's blog
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)

DC

愿我一生欢喜,不为世俗所及.
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)
  • html

  • css

    • css选择器
    • css属性设置
    • css网页布局之浮动流
    • css网页布局之定位流
    • css样式实践
    • flex
    • css复习
  • javascript

  • jquery

  • UI库

  • 第一次学vue

  • 第二次学vue

  • 前端
  • css
DC
2023-02-21

css复习

引入: link外链式引入css
选择器: ID 类选择器 标签 *
       div,p   div p   div>p   div+p   div~p
       序列选择器 - 选中同级别的第几个,常用于 li、p标签上
       属性选择器 - 根据标签的属性名 or 属性名=属性值 查找
       伪类选择器 - 鼠标未访问悬浮点击已访问input和a标签的样式
                  focus只给input标签使用
       伪元素选择器 - 标签内容前后、内容第一个字..
CSS三大特性: 只有以**color、font-、text-、line-开头的属性**才可以继承 ; 优先级
      

容器级文本级标签: 前者可嵌套任意标签,后者只能嵌套文字、图片、超链接.
块级和行内元素: 
    (布局都用块级、行内用于内容的展示)
    块级元素独占一行,块级可设置宽高 p ul li dl dd 
       - ★宽默认跟父元素一样宽,高默认根据内容撑开,若设置百分比宽,父级直到html元素的高都得设置百分比.
    行内设置也没有,宽高会根据内容撑开 span strong
    行内块级别可设置宽高,不会独占一行 img input
display属性: display:none/block/inline/inline-block;  
               - display:"none"与visibility:hidden的区别
字体属性: 字体的大小、颜色 font-size color
文本属性: 垂直水平居中
        div {
            width: 100px;
            height: 200px;
          
            text-align: center;  /* 水平 */
            line-height: 200px;  /* 垂直 */
            text-decoration: none;  /* 通常用来去除a标签的下划线 */
            text-indent: 10px; /* 在水平垂直居中的基础上首行缩进 */
        }
背景属性: background-color
        - 注意:背景图片和插入图片的区别
        - 背景图片的两个应用场景 
        - 精灵图/雪碧图
★ 盒子模型
  content内容 padding内边距 border边框 外边距margin
  要理解一个逻辑: 
     1> 给一个盒子设置宽和高是在给该盒子的内容设置宽和高!!
     2> 给盒子增加padding border不会影响内容区域的尺寸.但会增加整个盒子的大小!!
     3> 盒子div1嵌套了盒子div2 - div2就是div1的内容;div2的margin相当于div1的padding!!
     So,给子盒子增加margin(等同于父盒子增加padding)、子盒子增加border 都会增加父盒子的大小!!
     Q: 那如何在子盒子设置了padding border后,父盒子的大小不变呢?
     A: 很容易想到的是减少子盒子内容区域的大小.也就是减少子盒子的width和hight的尺寸.
        有一个css属性可快速达到这个效果: `box-sizing: border-box;`
     同理,在父盒子设置padding后,保证父盒子不变,得通过减少子盒子的宽高实现.
  内容:
     内容可能是文本也可能是子盒子
  外边距:
     标签与标签之间的距离就是外边距,说白了,外边距是标签边框与标签边框的距离.
     外边距的那一部分是没有背景颜色的,默认是透明的
     外边距合并现象 - 水平叠加、垂直合并(取大的那个)
  居中问题
     1> 让一行内容在盒子中垂直水平居中
     2> 让多行内容在盒子中垂直水平居中
     3> 让子盒子在父盒子中垂直水平居中
  magin-top塌陷问题: 
     父盒子里的<第一个>子盒子默认是紧贴在父盒子的左上角的.若子盒子设置了margin-top,那么会将父盒子往下拉.
     eg: div1 > div2 > (div3+div4)
            div3设置margin-top=10px,那么会导致div2距离div1的上边距为10px.
            div4设置margin-top=10px,会导致div4距离div3上边距为10px.不会有什么塌陷问题.
            (外边距嘛,边框与边框之间的距离,div4的上边距指的是div4的上边框距离div3下边框之间的距离!!)
         若div2本就设置了距离div1上边距为20px
            div3设置margin-top=10px,不会有变化.
            div3设置margin-top=30px,会让div2距离div1的上边距为30px,也就是多加了10px.
     解决方案 - 给父盒子添加css属性, `overflow: hidden; ` 
     参考博客: https://blog.csdn.net/Hukaihe/article/details/51298665

        
        
浮动
   浮动会有个先后顺序,中途会改变后浮动盒子在标准流的位置,然后后浮动的盒子再浮动.
   浮动起来的盒子,是不管在标准流中的时候是块状行内什么类型的元素,都可以设置宽度和高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
flex
js基础语法开篇

← flex js基础语法开篇→

最近更新
01
deepseek本地部署+知识库
02-17
02
实操-微信小程序
02-14
03
教学-cursor深度探讨
02-13
更多文章>
Theme by Vdoing | Copyright © 2023-2025 DC | One Piece
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式