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轴偏移量 模糊半径 扩散半径 颜色 内外阴影(前两个属性值必填)

相关推荐
生椰拿铁You1 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生13 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap27 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish35 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记2 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端