CSS-盒子模型

盒子模型的重要组成部分

  • 内容区域content:width , height
  • 内边距:内边框和内容区域的距离Padding
  • 边框线:Border
  • 外边距:Margin

Border (边框线)

属性:Border

属性值:边框线粗细px 线条样式 颜色(不区分先后顺序,中间用空格隔开)

线条样式的属性值:

  • solid 实线
  • dashed 虚线
  • dotted 点线
css 复制代码
  div{
       border:red 5px solid;
     }

Border-radius (圆角)

作用:设置元素的外边框为圆角

属性:border-radius

属性值:数字px 或 百分比 (属性值是圆角半径)

设置圆的半径为15px

css 复制代码
  div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 15px;
     }

可以看到盒子的边框已经发生改变

正圆-盒子

将半径设置为盒子的宽高一半,宽高相等

css 复制代码
     div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 50px;
     }
胶囊-盒子

将圆的半径设置为盒子的高度一半

css 复制代码
​
     div{
       width:200px;
       height: 100px;
       background-color: red;
       border-radius: 50px;
     }

​
同时给四个角赋值
css 复制代码
 div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 15px  25px  15px 30px;
     }

每个角的像素都不同

Padding (内边距)

作用:设置内容与盒子边缘之间的距离

属性:paddding

属性值:数字px

css 复制代码
 div{
       padding:50px;
       background-color: red;
     }

Margin (边缘距离)

作用:拉开两个盒子之间的距离

属性:Margin

属性值:数字px

css 复制代码
     div{
       width:400px;
       height: 400px;
       margin: 50px;
       padding:50px;
       background-color: red;
     }

可以清楚的看到边缘距离是50

设置单方向线

属性:盒子属性-方向名词(例如设置左边框border-left)

  • 左边:left
  • 右边:right
  • 顶部:top
  • 底部:bottom

属性值:边框线粗细px 线条样式 颜色(不区分先后顺序,中间用空格隔开)

css 复制代码
     div{
       border-left:red 5px solid;
     }

box-shadow (盒子阴影)

作用:给元素设置阴影效果

属性:box-shadow

属性值:x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影(前两个属性值必填)

相关推荐
小远yyds17 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205873 小时前
web端手机录音
前端