CSS进阶（7）- 样式补充

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

样式补充

display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时会附带另一个盒子

元素本身生成的盒子叫做主盒子，
附带的盒子称为次盒子，
次盒子和主盒子水平排列

涉及的css：

1. list-style-type
   设置次盒子中内容的类型

2. list-style-position
   设置次盒子相对于主盒子的位置

3. 速写属性list-style

清空次盒子：list-style:none

图片失效时的宽高问题

若img元素图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

解决方案就是，把img设置为块盒或行块盒

行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒，可替换元素的高度无关

text-align:justify

• left 左对齐
• right 右对齐
• center 居中对齐
• justify 除最后一行外，分散对齐

制作一个三角形

div {
    
    
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: pink;
}

direction和writing-mode

开始start -> 结束 end
左 left -> 右 right

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向

writing-mode：设置文字的书写方向

utf-8字符

你好 -> 你好 (实体字符)

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码