xiaoqiyan 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
27 文章
0 评论
13968 浏览
0 当前访客
ღゝ◡╹)ノ❤️

前端学习之CSS Day07 盒子模型与排版

清除所有默认样式

*{

** **padding: 0;

** **margin: 0;

}

border 边框

border: 1px solid red;

border-width:边框的厚度

border-style:边框的类型

border-left-style:只修改左边的类型,其他同理

solid:实线
​
none:消失
​
dashed:虚线
​
dotted:点线
​
double:双实线

border-color:边框颜色 hex,rgb,文字都可以

border-top:上边框

border-left:左边框

border-right:右边框

border-bottom:下边框

边框会增大实际的高度和宽度

padding内边距

边框以内,内容以外的区域

** 内容的宽高写死了,改变内边距,盒子的大小会发生改变**

一个参数

padding:10px;上下左右各10

两个参数

padding:10px 20px;上下10 左右20

三个参数

padding:10px 20px 30px;上10 左右20 下30

四个参数

padding:10px 20px 30px 40px ; 上10 右20 下30 左40

可以制作竖行文本

margin外边距

盒子和其他盒子的距离

上下的时候外边距会合并:两个互相踹的时候取最大值

左右的时候不会合并,叠加

盒子在父级容器里左右居中:左右设置auto(记住要有宽度才行)

(整体宽度—自身宽度)/2分别赋值给左右即可

不能通过margin的方式设置垂直居中

盒子的组成结构

外边距

边框

内边距

内容

width 宽度

内容的宽度

height 高度

内容的高度


标题:Python
作者:肖祺彦
地址:url

评论
取消