盒子模型&浮动

本文介绍了CSS中的盒子模型,包括内容、边框、内边距和外边距的设置,以及如何通过复合样式简化边框定义。此外,文章详细讲解了块级元素的水平居中方法,并探讨了浮动布局的重要性,特别是浮动元素的特性,如脱离标准流、一行显示和行内块元素特性。最后,文章提到了清除浮动的必要性和多种清除浮动的方法,如额外标签法、overflow属性以及伪元素方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

盒子模型

盒子模型的组成:content(内容)、border(边框)、padding(内边距)、margin(外边框)。
对边框border的设置:边框宽度、边框样式、边框颜色。
边框宽度:border-width value以像素为单位。
边框样式:border-style value有none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。常用的有solid、dotted、dashed三种。
边框颜色:border-color 边框的颜色可以用预设的颜色值,比如red、black、green等,也可以用16进制数表示
对于边框的设置可以采用复合形式书写:
border: 1px solid red;参数没有顺序限制,谁写在前谁写在后面都可以。
对于边框的宽度也可以单设某一个边或者某几个边,用属性border-top/left/bottom/right进行设置。
根据css的三大特性中的层叠行性,在需要设置三边相同,一边宽度不同时,可以先对四个边进行设置,然后对单独的那一个边进行设置。

    div {
   
            width: 300px;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值