一、谈谈你对盒模型的认识
1.盒模型是什么
- 盒模型又叫“框模型”。它规定了元素显示的基础。它假设任何一个HTML标签都存在一个元素框:在元素的中央是内容区,在内容区的外面是内边距,在内边距的外面是边框,在边框的外面是外边距。
2.用途
- 盒模型用于计算元素在文档中占据的空间大小。box-sizing属性规定了两种计算元素尺寸的方法:一种是内容盒,一种是边框盒。
3.怎么办?
- 在移动端的项目中,我们经常使用边框盒模型,因为它的计算方法更加方便,适合移动端灵活多变的特点。
二、CSS的三大特性
- 继承性:元素的属性值可以传递给后代元素。
- 层叠性:
- 特殊性
三、哪些属性可以继承
可以继承的属性
- 字体属性组
- 文本属性组
- 列表属性
不能继承的属性
- 盒模型:宽高、内边距、外边距、边框、背景
- 布局模型:浮动、定位、盒模型(Flexbox)、网格(grid)
四、列表
1、列表是什么
列表是相关项目的集合。
2、在HTML中有几种列表?
1.无序列表:不强调列表项目顺序的列表
2.有序列表:强调列表项目顺序的列表
3.定义列表:
dl:定义列表 dt:定义列表标题 title dd:定义列表项
3、列表属性
list-style-position 规定列表项符号的位置。
语法:
ul{
list-style-position:outset | inside
}
outset:把列表的项目符号放在li元素外部
inside:把列表的项目符号放在li元素内部
list-style-type 规定列表项符号的类型
语法:
ul{
list-style-type:disc | circle | square | none
}
list-style-image 使用图片设置列表项符号
list-style 复合属性。用于把位置、类型、图片三个属性写在一个声明里