欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css总结之盒子模型/链接/尺寸/定位/浮动/溢出/光标

程序员文章站 2022-03-10 20:01:38
...

盒子模型

css总结之盒子模型/链接/尺寸/定位/浮动/溢出/光标
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

链接

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
这四个链接状态是:

  1. a:link - 正常,未访问过的链接
  2. a:visited - 用户已访问过的链接
  3. a:hover - 当用户鼠标放在链接上时
  4. a:active - 链接被点击的那一刻

外边距

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

内边距

属性 说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

css总结之盒子模型/链接/尺寸/定位/浮动/溢出/光标
margin, padding简写方式:
一个值,指的是四边
二个值,指的是上下,左右
三个值,指的是上,左右,下
四个值,指的是上,右,下,左

尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

定位

position 属性指定了元素的定位类型。
position 属性的五个值:

属性值 说明
static 默认值 没有定位
relative 相对于原本的位置的定位,相对定位
fixed 相对浏览器窗口的定位,固定定位
absolute 相对于最近的已定位的父元素定位,没有父元素,则相对html,绝对定位
sticky 基于用户的滚动位置来定位,粘性定位
属性 说明
bottom 定位元素的下边距
left 定位元素的左边距
top 定位元素的上边距
right 定位元素的右边距

浮动

属性 说明
clear 清除浮动:left, right, both, none ,本身有用,不影响其他元素
float 浮动:left, right, non

清除浮动的副作用(父标签塌陷问题)
主要有三种方式:

  1. 固定高度
  2. 伪元素清除法
  3. overflow:hidden

伪元素清除法(使用较多):

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

溢出

overflow 设置当元素的内容溢出其区域时发生的事情。
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

脱离文档流:
  绝对定位,固定定位
不脱离文档流:
  相对定位

层叠顺序

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

光标

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

描述
url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
相关标签: css