CSS盒模型的认识

1.盒模型

盒模型又叫“框模型”。它假设任何一个HTML标签都存在一个元素框。它规定了HTML的元素显示

• 在元素框中央是内容区
• 在内容区外是内边距
• 在内边距外是边框
• 在边框外是外边距

2.用途

盒模型用于计算元素在文档中占据的内容大小，通过box-sizing属性的两个属性值有两种计算方式：

• content-box ：默认值内容盒
• border-box ：边框盒

3.怎么办？

在移动端的项目中，我们经常使用边框盒模型，因为它的计算方法更方便，适合移动断灵活多变的特点。

css三大特点

1.继承性 ：把元素属性值传递给后代的机制叫做继承性。
不能继承的属性如下:

盒模型：宽高内边距外边距背景

布局模型：浮动，定位，flexbox，gird

• 1.display:规定元素应该生成的框的类型.
• 2.文本属性: vertical-align text-decoration
• 3.盒子模型的属性 : width height margin border padding
• 4.背景属性: background background-color background-image
• 5.定位属性 float-clear position top right bottom left min-width min-height max-width max-height overflow clip

能继承的属性如下:

字体属性组

文本属性组

列表属性

• 1.字体系列属性：
  font font-family font-weight font-size font-style

• 2.文本系列属性

  • 2.1内联元素
    color line-height word-spacing letter-spacing text-transform

  • 2.2块级元素
    text-indent text-align

• 3.元素的可见性
  visbility

• 4.表格布局属性
  caption-side border-collapse border-spacing empty-cells table-layout
  2.层叠性：
  3.特殊性：

一.列表是什么？

列表是相关项目的集合。

二.HTML中有几种列表

1.无序列表：不强调列表项目顺序的列表 ul默认有40px左内边距，上下16的外边距
2.有序列表：强调列表项目顺序的列表 ol默认有40px左内边距，上下16的外边距
3.定义列表：
dl：定义列表
dt：定义列表标题 title
dd：定义列表项 默认有40px左外边距

三.列表属性

list-style-position 规定列表项符号的位置

语法：

ul{
list-style-position:inside | outside
}

属性值：

• outside: 把列表的项目符号放在里元素外部
• inside: 把列表的项目符号放在里元素内部

list-style-type 规定列表符号的类型

单词：lower （小写）
语法：

ul{
list-style-type:disc | square | circle | none | lower-roman | lower-greek | lower-alpha | lower-latin | decimal | decimal-leading-zero
}

属性值：

• disc: 实心圆体 （默认）
• square ：实体方心
• circle： 空心圆
• none：无
• lower-roman;古罗马
• lower-greek;希腊排序
• lower-alpha;字母排序
• lower-latin;字母排序
• decimal;数字排序，默认
• decimal-leading-zero;01开头的排序

list-style-lmage 使用图片设置列表项符号

.td{
 list-style-image: url(./542be893253d06a70f666c4cc10a92e.jpg);
}

用url（）属性导入即可

list-style : 复合属性，用于把位置 类型 图片三个属性写在一个声明里。