【CSS】-尺寸与边框

一、尺寸属性

1. 宽度、高度

属性 作用
width 宽度
min-width 最小宽度
max-width 最大宽度
height 高度
min-height 最小高度
max-height 最大高度

2. 页面中允许设置尺寸的元素

  • 所有的块级元素都允许设置尺寸(div、p、h1、u1、d1)
  • 行内块元素允许设置尺寸(表单控件元素(单选按钮,复选框)),行内块元素(radio、checkbox)除外
  • 本身具备width和height的HTML元素(img、table)

3. 溢出处理

什么时候出现溢出:内容多元素小时产生溢出,默认溢出是纵向溢出

  • 属性:overflow, overflow-x, overflow-y
  • 取值:visible,hidden,scroll,auto

【CSS】-尺寸与边框
二、边框

1. 边框属性

简写方式 border: width style color;
style边框样式 solid实线,dotted虚线-点,doshed虚线-线
color边框颜色 transparent透明

单边定义:border-top/right/bottom/left:width style color;

单边属性设置:border-方向-属性:值

【CSS】-尺寸与边框
2. 边框倒角-将元素四个角,由直角转换为圆角

border-radius:值; 举例:border-radius:20px;

3. 边框阴影

【CSS】-尺寸与边框
【CSS】-尺寸与边框

三、轮廓与边距

1. 轮廓-指边框的边框,绘制边框外围的一条线

outline:width style color;
outline:none/0;取消轮廓

2. 内、外边距

【CSS】-尺寸与边框
四、框模型

1. 背景属性

  • 背景颜色

background-color:pink;

  • 背景图片:

background-image:url(’…/Images/背景.jpg’);