CSS盒模型的认识
2022-11-22 本文已影响0人
Pj浩
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（）属性导入即可
