标签：盒子 定义 margin 模型 元素 边框 radius border css
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;
}
标签：盒子,定义,margin,模型,元素,边框,radius,border,css 来源： https://www.cnblogs.com/zhc2020Blog/p/12639277.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。