码迷,mamicode.com
首页 > Web开发 > 详细

css盒子模型

时间:2020-04-05 22:25:03      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:高度   应该   滚动   边框   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;
描述
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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!