标签：高度 应该 滚动 边框 lang idt splay 单位 ack
css盒子模型
外边距 margin
定义方式
- 单独定义一边
- margin-top：定义盒子顶部的边距
- margin-bottom：定义盒子底部的外边距
- margin-left：定义盒子左边的外边距
- margin-right：定义盒子右边的外边距
- 复合定义
- margin：上 左 下 右；- 写四个值
- margin：上下 左右；- 写两个值
- margin：上下左右；- 写一个值
- 注：每个值中间用空格分隔。
margin的值可以设置为负值
居中设置
margin: 0 auto;
外边距合并
相邻的两个盒子的上下边距外边距会合并，按最大的的外边距显示
内边距
语法和margin类似
box-sizing
box-sizing: content-box|border-box|inherit;
| 值 |
描述 |
| content-box |
盒子的总的高度和宽度不包括内边距和边框。 |
| border-box |
盒子的总的宽度与高度包括内边距与边框。 |
| inherit |
规定应从父元素继承 box-sizing 属性的值。 |
边框
边框的定义
边框的定义的简写（最常用）
依次写宽度，样式，颜色；中间用空格分开
border:1px solid blue;
边框样式
| 类型 |
描述 |
| none |
定义无边框。 |
| dotted |
定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed |
定义虚线。在大多数浏览器中呈现为实线。 |
| solid |
定义实线。 |
| double |
定义双线。双线的宽度等于 border-width 的值。 |
| groove |
定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge |
定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset |
定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset |
定义 3D outset 边框。其效果取决于 border-color 的值。 |
单独设置一条边的样式，宽度
border-top-style：solid；
border-top-width: 1px;
一次定义四个边
h2 {
border-style: double;
}
样式顺序为上、右、下、左，可以分别进行定义
h2 {
border-style: outset solid dotted double;
border-width: 8px;
}
定义边框圆角
使用 border-radius 规则设置圆角，可以使用px | % 等单位。也支持四个边分别设置。
| 选项 |
说明 |
| border-top-left-radius |
上左 |
| border-top-right-radius |
上右 |
| border-bottom-left-radius |
下载 |
| border-bottom-right-radius |
下右 |
h2 {
border-radius: 10px;
border: solid 2px red;
}
通过边框绘制圆
div {
width: 100px;
height: 100px;
border: solid 3px red;
border-radius: 50%;
}
定义不同边
border-radius: 10px 30px 50px 100px;
轮廓线
元素在获取焦点时产生，并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。
线条样式
轮廓线的线条样式的值同border
display
控制显示隐藏
使用 display 控制元素的显示机制。
| 选项 |
说明 |
| none |
隐藏元素 |
| block |
显示为块元素 |
| inline |
显示为行元素，不能设置宽/高 |
| inline-block |
行级块元素，允许设置宽/高 |
块级元素和行内元素
块级元素：
- 独占一行，不能与其他元素并列，能接受宽高，如果不设置宽度，那么宽度为父级元素的100%大小
- 常见的有：p , span , a , b , i , u , em
行内元素：
-
与其他行内元素并排，不能设置宽高，如果不设置宽度，那么就是文字的宽度
-
div , h1~h5 , li , dt ,dd
visibility隐藏元素
控制元素的显示隐藏，在隐藏后空间位也保留。即使不可见的元素也会占据页面上的空间
可能的值
| 值 |
描述 |
| visible |
默认值。元素是可见的。 |
| hidden |
元素是不可见的。 |
| collapse |
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit |
规定应该从父元素继承 visibility 属性的值。 |
overflow控制溢出
可能的值
| 选项 |
说明 |
| hidden |
溢出内容隐藏 |
| scroll |
显示滚动条（有些浏览器会一直显示，有些在滚动时显示） |
| auto |
根据内容自动处理滚动条 |
盒子尺寸
可以使用多种方式为元素设置宽、高尺寸。
| 选项 |
说明 |
| width |
宽度 |
| height |
高度 |
| min-width |
最小宽度 |
| min-height |
最小高度 |
| max-width |
最大宽度 |
| max-height |
最大高度 |
| fill-available |
撑满可用的空间 |
| fit-content |
根据内容适应尺寸 |
fill-available
在chrome 浏览器中使用前缀 -webkit 书写样式。
span {
background: #e67e22;
display: inline-block;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
css盒子模型
标签：高度 应该 滚动 边框 lang idt splay 单位 ack
原文地址：https://www.cnblogs.com/zhc2020Blog/p/12639277.html