标签：高度   应该   滚动   边框   lang   idt   splay   单位   ack   

css盒子模型

外边距 margin

定义方式

1. 单独定义一边
   • margin-top：定义盒子顶部的边距
   • margin-bottom：定义盒子底部的外边距
   • margin-left：定义盒子左边的外边距
   • margin-right：定义盒子右边的外边距
2. 复合定义
   • margin：上 左 下 右；- 写四个值
   • margin：上下 左右；- 写两个值
   • margin：上下左右；- 写一个值
   • 注：每个值中间用空格分隔。

margin的值可以设置为负值

居中设置

margin: 0 auto;

外边距合并

相邻的两个盒子的上下边距外边距会合并，按最大的的外边距显示

内边距

语法和margin类似

box-sizing

box-sizing: content-box|border-box|inherit;

边框

边框的定义

边框的定义的简写（最常用）

依次写宽度，样式，颜色；中间用空格分开

border:1px solid blue;

边框样式

单独设置一条边的样式，宽度

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 | % 等单位。也支持四个边分别设置。

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 控制元素的显示机制。

块级元素和行内元素

块级元素：

• 独占一行，不能与其他元素并列，能接受宽高，如果不设置宽度，那么宽度为父级元素的100%大小
• 常见的有：p , span , a , b , i , u , em

行内元素：

• 与其他行内元素并排，不能设置宽高，如果不设置宽度，那么就是文字的宽度

• div , h1~h5 , li , dt ,dd

visibility隐藏元素

控制元素的显示隐藏，在隐藏后空间位也保留。即使不可见的元素也会占据页面上的空间

可能的值

overflow控制溢出

可能的值

盒子尺寸

可以使用多种方式为元素设置宽、高尺寸。

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