CSS盒子模型

本文详述了CSS中的关键特性,包括边框样式、颜色和宽度,内边距与外边距的设置方法,以及如何创建圆角、阴影效果。此外,还介绍了清除默认边距、解决外边距合并问题和文本阴影的运用。

1.边框border

边框可以分开设置样式 只需将下列border改为border-top/bottom/left/right

1.1边框样式border-style

主要使用的有:
solid - 定义实线边框
dotted - 定义点线边框
dashed - 定义虚线边框
double - 定义双边框

border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。
除非设置了 border-style 属性,否则其他 CSS 边框属性都不会有任何作用

1.2边框颜色border-color

1.3边框宽度border-width

边框会放到盒子内,所以边框宽度会影响盒子的实际宽度

1.4边框的复合写法

border: 5px solid black; 没有顺序区别

1.5合并相邻的边框

border-collapse: collapse;
可以用于在表格中两个td相邻导致边框变粗

2.内边距padding

padding拥有用于为元素的每一侧指定内边距的属性:
padding-top
padding-right
padding-bottom
padding-left

padding也会影响盒子的实际大小,若先指定height/width再指定内边距,盒子会被撑大.不指定h/w,padding不会撑大盒子.
若盒子中字数不一样多,可以只设置padding-l/r,不设置width来让每个盒子保持同样内边距,使整体美观.

复合写法

(1)如果 padding 属性有四个值:
padding: 25px 50px 75px 100px;
上内边距是 25px
右内边距是 50px
下内边距是 75px
左内边距是 100px
即为顺时针顺序
(2)如果 padding 属性设置了三个值:
padding: 25px 50px 75px;
上内边距是 25px
右和左内边距是 50px
下内边距是 75px
(3)如果 padding 属性设置了两个值:
padding: 25px 50px;
上和下内边距是 25px
右和左内边距是 50px
(4)如果 padding 属性设置了一个值:
padding: 25px;
所有四个内边距都是 25px

3.外边距margin

依然拥有用于为元素的每一侧指定外边距的属性:
margin-top
margin-right
margin-bottom
margin-left

margin的复合写法意义与padding相同

使盒子水平居中

  1. 盒子必须指定宽度
  2. 将盒子左右外边距都设置为auto

从父类继承外边距

margin: inherit
使 <p class="ex1"> 元素的外边距继承自父元素(<div>):

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

外边距合并(塌陷)

对两个有嵌套关系的块元素,父子元素都有上外边距,此时父元素会使用较大的那个上外边距,而子元素不会有上外边距(塌陷问题).

解决方案:

  1. 可以为父元素定义任意上边框。
  2. 可以为父元素定义任意上内边距。
  3. 可以为父元素添加overflow:hidden。

4.清除内外边距

网页默认内外边距不同,故在布局前首先要清除网页元素默认边距
CSS的第一行代码:

* {
	     padding: 0;
	     margin: 0;
  }

CSS3新增:

5.圆角边框border-radius

border-radius: length;
length值越大,越趋近与圆或椭圆

可以分开四个属性写,第一个值为左上角,其他按顺时针顺序.

5.1圆形

设置一个正方形盒子,将length设置为正方形边长的一半或50%

5.2圆角矩形

设置一个矩形盒子,将length设置为高的一半

5.3椭圆

设置一个矩形盒子,将length设置为50%

6.盒子阴影box-shadow

在这里插入图片描述
默认是外阴影(outset),但不可以设置最后一个参数为outset,否则阴影会无效

盒子阴影不占空间,不影响其他盒子排列

7.文字阴影text-shadow

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KeeeepReal

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值