歳月雲流
  • 动态日历

    Loading...

    分类雷达图

    Loading...

    发布统计图

    Loading...

    分类统计图

    Loading...

    标签统计图

    Loading...

  • 闲言碎语
    闲言碎语
    从你的内在感受你的身体,把它当作单一的能量场来感觉,就好像你在用你的整个身体倾听或阅读一样。请你在未来的几天或几周内练习这个方法。
    April 11th, 2022 at 11:18 am
    克制是男人的魅力
    March 31st, 2022 at 12:56 pm
    就算做了自己,也会有人讨厌和喜欢,不过那都是思维的事情,doesn't matter
    March 30th, 2022 at 10:13 am
enlightener you only live once
  • 晚上好,注意早点休息

  • 导航
  • 首页
  • 朋友
  • 相册
  • 归档
  • 关于
    • 关于我
    • 留言本
  • 组成
  • 分类
    • 分类
    • 6课程
    • 1效率
    • 1思
    • 2杂
    • C++
      • 1C++11新特性
  • 页面
    • 页面
    • 闲言碎语
    • 知乎好文
  • 友链
    • 友链
    • Xherlock
    • 逍遥子

Web-盒子模型

  • 博主: enlightener
  • 发布时间:2022 年 03 月 15 日
  • 4177 次浏览
  • 71 条评论
  • 3749字数
  • 分类: 课程
  1. 首页
  2. 正文  
  3. 分享到:

盒子模型

选择器的补充

  • 属性选择符:基于HTML标签的属性选择元素。
  • 伪类选择符:根据元素的状态或者元素的某种结构来选择元素。
  • 伪元素选择符:根据元素中特殊位置选择元素。

1.属性选择符

属性名选择符

标签名[属性名]

image-20211005181933136
image-20211005181933136
image-20211005182004149
image-20211005182004149
属性名值选择符

标签名[属性名="属性值"]

image-20211005182223457
image-20211005182223457
image-20211005182237369
image-20211005182237369

2.伪类选择符

  • 伪类:伪标签,不存在的标签,没有任何元素附加到这类标签上。

  • 两种类型:

    1、UI伪类:根据元素所在的状态确定元素,比如链接是否被访问过;

    2、结构伪类:根据元素的某种结构关系确定元素,比如元素在一组元素中的位置确定元素;

UI伪类选择符:
  • 链接伪类
  • :focus伪类
  • :target伪类
①链接伪类:
  • link:链接等待用户点击的状态;
  • visited:用户此前已经点击过链接;
  • hover:用户鼠标悬停在链接上;
  • focus:链接拥有焦点(Tab键选中)的时候;
  • active:链接正在被点击(鼠标在元素上按下,还没被释放)

注意:链接拥有上述多个伪类选择符时,应该按照上面的顺序定义选择符(中间可以缺项,但顺序一定要对),否则可能定义的伪类样式无法生效!!!(L→V→H→F→A)

链接伪类实例

image-20211009214627643

image-20211009214627643
image-20211009214927751
image-20211009214927751

②:focus伪类:

e:focus:一个元素在获得焦点是选择这个元素,e表示HTML中的任意元素,比如p,h1,section等。

image-20211009215531336
image-20211009215531336
image-20211009215544623
image-20211009215544623
③:target伪类:

e:target:如果用户点击一个指向页面中其他元素的链接,则选中的目标为选中的元素。改变锚链接指向元素的样式。

(补:要用锚链接,就要为目标元素设置id(不能用class),然后锚链接用\,href里不用url,而是用id值,eg:href="#lg1")

image-20211009215730149 image-20211009224454138 image-20211009215922019 image-20211009215833661
结构伪类选择器:

结构伪类根据元素所处的位置选择元素,通常用于序列型的元素,比如列表。

  • e:first-child
  • e:last-child
  • e:nth-child(n),n可以为数值,也可以输入odd(奇数)或even(偶数)。

例子:

image-20211009222702613 image-20211009222640689 image-20211009222747045

3.伪元素选择符

伪元素:是指元素当中的某一个位置,根据选择符选择元素中的这个位置的元素或是位置对应的空间。

(有些版本的语法是一个“:”,有些版本语法是两个“:”,即“::”)

  • e::first-letter;
  • e::first-line;
  • e::before;
  • e::after;
::first-letter

e::first-letter:用于确定元素第一个字符。

image-20211009223623229

image-20211009223623229
image-20211009223629780
image-20211009223629780

::first-line

e::first-line:用于确定元素的第一行。

image-20211009223704704 image-20211009223718829
::before & ::after

这两类伪元素可以用于在元素的前后位置添加特殊的内容。

image-20211009223906522

image-20211009223906522
image-20211009223912711
image-20211009223912711

继承

祖先与后代:html中的元素会根据标签的嵌套关系呈现一种层次性的结构,这种层次性的结构从上向下呈现一种倒立的树状结构,上面的元素称为下层元素的祖先,下层元素称为上层元素的后代。

继承:后代的样式在没有设定的情况下默认使用最近祖先的样式的这种方式。

备注:并不是所有样式都可以继承,后面讲到的和盒子模型相关的边框,边距以及定位的内容就不能继承。

层叠

层叠:

是指样式表的层叠,当一个元素有多个样式来源时,最终确定元素最终使用哪种样式的。

样式的来源:

  • 浏览器的默认样式表;
  • 用户样式表;
  • 网页作者链接样式表;
  • 网页作者内嵌样式表;
  • 网页作者行内样式表;

层叠顺序规则

  • 找到元素的的每一个样式申明;
  • 按照样式的顺序和权重确定元素的样式;(!Important(这个是最高优先级),2种顺序:样式表顺序、)
  • 按照元素的特征度对样式进行排序
  • 顺序决定权重:两条规则,如果优先级相同,后定义的优先级高。

特指度计算

特指度根据I-C-E公式计算:
I:表示ID,选择符有一个ID,I就加1;
C:表示Class,选择符有一个类,C就是加1;
E:表示标签名,选择符有一个标签名,E就加1
Attention : 0-1-12与 0-2-0相比,是0-2-0大

实例:

image-20211028104744001 image-20211028105430354

盒子模型

盒子模型

1.在html页面中,每个元素都可以看成是一个盒子(box),而这个盒子占据一定的页面空间。
2.我们可以通过调整这些盒子的距离和大小,来让我们的网页显得更加清晰。
3.这些盒子都不是孤立存在的,而是会互相影响的,我们要理解盒模型的话,必须得搞定两个地方:(1)盒子的内部结构。(2)盒子之间的相互关系。

image-20211028105527841

image-20211028105527841
image-20211028105552568
image-20211028105552568

边框属性

对于元素盒子的边框,可以使用三种属性对边框进行修饰:边框的颜色、边框的厚度与边框的线条风格。
border-color: 颜色名字,rgb,#xxxxxx,rgba
border-width: thick、thin、medium、百分比,像素值
border-style: none,dotted,dashed…
Attention:无论是盒子,内边距还是外边距都有四个方向(上,右,下,左)

image-20211028105916363

盒子边距

  • 内边距:就是内容到边框之间的距离。我们用padding表示。(padding-top,padding-right,padding-bottom,padding-left)
  • 外边距:就是边框到另一个元素之间的距离。我们用margin表示。(margin-top,margin-right,margin-bottom,margin-left)
image-20211028110208755 image-20211028110401306

外边距叠加

外边距叠加:在垂直方向上,两个元素的之间的距离由外边距最大的值确定,这种现象称为外边距叠加。

image-20211028111052426

盒子模型-无宽度-content

Content部分:

  1. 可以通过height,width确定内容的大小,如果不设置默认就是父元素的大小。这种设置只是元素内容的高度与宽度。
  2. 如果没有设置盒子的宽度,其值为auto,该值默认为其父元素的值。

image-20211028111831362

image-20211028111831362
image-20211028111903274
image-20211028111903274

盒子模型-有宽度-content

image-20211028111548284

image-20211028111548284
image-20211028111604942
image-20211028111604942

块元素与行内元素

  • 块级元素 :div,p form , ul, li, ol, dl, address, filedset, table,hr
  • 行内元素: span, strong, em , img, a, input, label, select, textarea,cite;
差异:
  • 块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化;
  • 块级元素可以设置 width, height属性,行内元素设置width, height无效【注意:块级元素即使设置了宽度,仍然是独占一行的】
  • 块级元素可以设置margin 和 padding. 行内元素的水平方向的,padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

浮动

浮动与清除
  • 标准流:html文档的文本布局。它是从上到下,从左到右的展示方式。
  • 在标准流中,块级元素独自占用一行,垂直放置。行级元素(内联元素)在水平方向从左到右排列。
浮动

将元素从标准流里面取出来,浮动的框可以向左或向右移动,直到它的外边缘碰到包含父元素的框或另一个浮动框的边框为止。

作用:

  1. 实现传统文档中的文字绕排图片的作用;
  2. 让原来上下堆叠的块状元素可以变成作用排列,实现布局中的左右分栏;
实例(直接贴老师PPT的图)

image-20211028113356731

image-20211028113356731
image-20211028113412201
image-20211028113412201

image-20211028113440989

image-20211028113440989
image-20211028113456674
image-20211028113456674
image-20211028113651792
image-20211028113651792

image-20211028113850880

image-20211028113850880
image-20211028114012989
image-20211028114012989

最后修改:2022 年 03 月 19 日
© 允许规范转载

赞赏作者

  • 支付宝
  • 微信
如果觉得我的文章对你有用,请随意赞赏
  • 下一篇
  • 上一篇

71 条评论

Loading...

  1. darpddwklm  
    May 24th, 2025 at 09:16 am

    家族史之谜埋葬的过去

    回复
  2. umorzvryza  
    May 24th, 2025 at 09:15 am

    致命著作

    回复
  3. koxiekyllr  
    May 24th, 2025 at 09:12 am

    我的世界大电影

    回复
  4. kpeabwvdkg  
    May 24th, 2025 at 09:11 am

    姜味关系

    回复
  5. dzbdkkyftt  
    May 24th, 2025 at 09:09 am

    罪孽成佛

    回复
  6. oghvdryeyg  
    May 24th, 2025 at 09:07 am

    大风杀

    回复
  7. piralsahov  
    May 24th, 2025 at 09:06 am

    小银幕大电影

    回复
  8. hczhidytnv  
    May 22nd, 2025 at 12:44 am

    扭曲的虔诚

    回复
  9. itnodkffgh  
    May 22nd, 2025 at 12:37 am

    女心理师之心迷水影

    回复
  10. xbjxrffyta  
    May 19th, 2025 at 02:28 am

    我的世界大电影

    回复
  11. flbjekwqzv  
    May 19th, 2025 at 02:27 am

    律法之地

    回复
  12. djsojxxxzn  
    May 19th, 2025 at 02:24 am

    因为爱还未终结

    回复
  13. iygwluwyif  
    May 19th, 2025 at 02:22 am

    马克萨斯群岛的顺风处

    回复
  14. oajemlgibc  
    May 19th, 2025 at 02:21 am

    花木兰

    回复
  15. utgnsgxryx  
    May 16th, 2025 at 01:45 pm

    爱上罗姗

    回复
  16. nguqpmribk  
    May 16th, 2025 at 01:44 pm

    肥女孩

    回复
  17. zqgefefpwr  
    May 16th, 2025 at 01:43 pm

    鬼娃回魂3

    回复
  18. egtbjatkjo  
    May 16th, 2025 at 01:41 pm

    刺客公会

    回复
  19. rnjtcimqmx  
    May 16th, 2025 at 01:39 pm

    莱拉

    回复
  20. aafyhetmro  
    May 16th, 2025 at 01:37 pm

    欲海情魔1967

    回复
  21. ppomguhcdv  
    May 16th, 2025 at 01:34 pm

    狄亚伯洛大决斗

    回复
  22. ukthlwgnmx  
    May 16th, 2025 at 01:32 pm

    独行月球

    回复
  23. lwimgulxem  
    May 16th, 2025 at 01:08 pm

    友谊我和你

    回复
  24. rgsufbcmej  
    May 16th, 2025 at 01:05 pm

    孤寂午后

    回复
  25. oyxbixbvfm  
    May 16th, 2025 at 01:02 pm

    小孩不笨3

    回复
  26. qlcaiipgxn  
    May 16th, 2025 at 01:01 pm

    钢之炼金术师

    回复
  27. qwiyvanogu  
    May 16th, 2025 at 12:58 pm

    防线秘密护送

    回复
  28. vaaswosmns  
    May 16th, 2025 at 12:56 pm

    一路惊喜

    回复
  29. qaswwavtoc  
    May 16th, 2025 at 12:06 pm

    冥妻

    回复
  30. ryhjqbysql  
    May 16th, 2025 at 12:01 pm

    误杀瞒天记

    回复
  31. hwlthgdxya  
    May 16th, 2025 at 11:57 am

    蓝天使

    回复
  32. zmvzdqpdln  
    May 16th, 2025 at 11:55 am

    弹头奇兵

    回复
  33. cpijhpjkvr  
    May 16th, 2025 at 11:54 am

    与神同行2因与缘

    回复
  34. rocrmztuoj  
    May 15th, 2025 at 10:53 pm

    东北美发天团

    回复
  35. iakgabijqm  
    May 15th, 2025 at 10:41 pm

    年年夏日

    回复
  36. ubqkrlyzgu  
    May 15th, 2025 at 10:40 pm

    大幕拉开

    回复
  37. lfuucjxggi  
    May 15th, 2025 at 10:37 pm

    人鱼童话

    回复
  38. rktcafzdhl  
    May 13th, 2025 at 04:22 am

    传送法

    回复
  39. nxvojkyjes  
    May 13th, 2025 at 04:21 am

    自由时间

    回复
  40. sxwxkrfwxl  
    May 13th, 2025 at 04:19 am

    击雪

    回复
  41. ekupchobpd  
    May 13th, 2025 at 04:17 am

    倚天屠龙记之九阳神功

    回复
  42. bjinezdxoz  
    May 13th, 2025 at 04:15 am

    威廉斯姊妹港

    回复
  43. bjcyxuzyud  
    May 13th, 2025 at 04:13 am

    狂暴2资本的惩罚

    回复
  44. eltlsdaust  
    May 13th, 2025 at 04:11 am

    罪魁祸首

    回复
  45. ormcqecjqe  
    May 10th, 2025 at 06:23 pm

    黄金诡事录

    回复
  46. fpbzqycwpy  
    May 10th, 2025 at 06:21 pm

    暴走财神6

    回复
  47. ddwbwdqfpb  
    May 10th, 2025 at 06:20 pm

    伟大遗产

    回复
  48. hkshfmdhip  
    May 10th, 2025 at 06:18 pm

    人生大事

    回复
  49. druqimocqc  
    May 10th, 2025 at 06:16 pm

    沙丘

    回复
  50. smwqetdarw  
    May 10th, 2025 at 06:09 pm

    第三将来时

    回复
  51. ggychteift  
    May 10th, 2025 at 06:07 pm

    米歇尔布托美丽真心话

    回复
  52. wzlwhfsqoc  
    May 10th, 2025 at 06:05 pm

    猫步2回归的猫

    回复
  53. yhnsafxzsx  
    May 10th, 2025 at 06:03 pm

    热搜

    回复
  54. ifepkefmgo  
    May 10th, 2025 at 06:01 pm

    警魂

    回复
  55. mxbgasoste  
    May 10th, 2025 at 05:59 pm

    荣耀之谁与争锋

    回复
  56. yavhtmgbqu  
    May 5th, 2025 at 01:35 am

    大法医宋慈系列之偷梁换柱

    回复
  57. xdsqstdbow  
    May 5th, 2025 at 01:33 am

    故事

    回复
  58. xbvqzewxgb  
    May 5th, 2025 at 01:32 am

    HeyJoe

    回复
  59. loatjmcrbr  
    May 5th, 2025 at 01:30 am

    黑袋行动

    回复
  60. ftmupnobsx  
    May 5th, 2025 at 01:29 am

    我何爷爷

    回复
  61. enshldxenh  
    May 5th, 2025 at 01:28 am

    迷途的羔羊

    回复
  62. xzhmqolxvn  
    May 5th, 2025 at 01:26 am

    大蛇2

    回复
  63. hieekakgcr  
    April 30th, 2025 at 04:08 am

    最佳损友闯情关粤配

    回复
  64. ipvwxvznoa  
    April 29th, 2025 at 05:30 pm

    共同的语言

    回复
  65. dfbcqopzhc  
    March 3rd, 2025 at 04:08 pm

    建议标注关键步骤的注意事项。

    回复
  66. kbbwarzumq  
    March 2nd, 2025 at 10:34 pm

    文章的叙述风格独特,用词精准,让人回味无穷。

    回复
  67. yvbrfkpwat  
    March 2nd, 2025 at 02:34 pm

    以终为始的思考方式为行业指明方向。

    回复
  68. rgjyynzmza  
    March 1st, 2025 at 05:44 am

    这是一篇佳作,无论是从内容、语言还是结构上,都堪称完美。

    回复
  69. nbazweckif  
    March 1st, 2025 at 01:03 am

    字里行间流露出真挚的情感,让人感同身受,共鸣不已。

    回复
  70. okeqbhyeps  
    December 15th, 2024 at 06:32 am

    《缘份》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/42788.html

    回复
  71. njpvnsxcex  
    November 13th, 2024 at 01:43 am

    《神秘二重唱》日韩综艺高清在线免费观看:https://www.jgz518.com/xingkong/112747.html

    回复

发表评论 取消回复

🎲
  • 热门文章
  • 最新评论
  • 随机文章
热门文章
  • 复盘解决一c++环境相关的问题的全过程

    评论数: 83
  • 好康的

    评论数: 80
  • Typecho搭建博客

    评论数: 75
  • 解决c++环境问题后导致我steam打不开游戏了

    评论数: 72
  • Web-盒子模型

    评论数: 71
最新评论
  • extodeeryf
    罗伯特唐尼自成一格
  • fqtiivfpoj
    桑苏扎德克内迪梅
  • darpddwklm
    家族史之谜埋葬的过去
  • wckmzncvvv
    唐人街制造
  • ebihajizvf
    巴佐迪
随机文章
  • 好康的场景

    评论数: 65
  • B站YJango学习观系列

    评论数: 55
  • C++11 范围for语句

    评论数: 60
  • LINUX常用操作

    评论数: 61
  • 两年没登录博客,怎么评论区这么多广告

    评论数: 70
博客信息
  • 17文章数目
  • 1127评论数目
  • 3年120天运行天数
  • 1 年前最后活动
文章标签
Web
文章目录
  • 盒子模型
    • 选择器的补充
      • 1.属性选择符
        • 属性名选择符
        • 属性名值选择符
      • 2.伪类选择符
        • UI伪类选择符:
          • ①链接伪类:
          • ②:focus伪类:
          • ③:target伪类:
        • 结构伪类选择器:
      • 3.伪元素选择符
        • ::first-letter
        • ::first-line
        • ::before & ::after
    • 继承
    • 层叠
      • 层叠:
      • 层叠顺序规则
      • 特指度计算
    • 盒子模型
      • 盒子模型
      • 边框属性
      • 盒子边距
      • 外边距叠加
      • 盒子模型-无宽度-content
        • 盒子模型-有宽度-content
      • 块元素与行内元素
        • 差异:
      • 浮动
        • 浮动与清除
        • 浮动
        • 实例(直接贴老师PPT的图)

Web-盒子模型

enlightener • 2022 年 03 月 15 日
文章目录
Powered by Typecho | Theme by handsome © 2025 Copyright 
flandre.png
夜/日间模式
固定头部
固定导航
折叠导航
置顶导航
盒子模型
深色模式(自动)