CSS布局方式总结

本文总结了CSS布局的四种主要方式:盒子布局,浮动布局,定位布局和弹性盒子。详细介绍了盒子模型的构成及常用属性,浮动布局的float属性和clear解决方案,定位布局的position属性,以及弹性盒子的display、flex-direction、flex-wrap等关键属性的设置和作用。
摘要由CSDN通过智能技术生成
  1. 盒子布局
  2. 浮动布局
  3. 定位布局
  4. 弹性盒子
  5. 其他

1 盒子布局

关于盒子模型:网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。(源自百度百科,我还是写不出这么客观严谨的东西)

构成: 边界(margin)、边框(border)、填充(padding)、内容(content)

1.1 常用属性

不知道记不记得住,但是应该可以加深印象。
在这里插入图偷懒片描述
上图可以很清楚的反应每个属性的用途。(不知道什么意思就翻译吧)

  • boder: 边框,引号内按四个按上右下左的顺序。
    (在vscode里面打出border后会显示很多其他的如下图,按所需进行选择)
    在这里插入图片描述
    当然也可以按照边框粗细、板框类型、边框颜色的顺序打。如下:
    在这里插入图片描述
    .css
#baishu{
   
    width: 200px;
    height: 200px;
    border: 1px dashed orange ;
    }

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="..\css新\shiyan.css">
</head>
<body>
    <div
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值