css盒子模型学习打卡

mac2026-01-30  4

努力学习 打卡

盒子模型 盒子模型组成 padding 内边框;width 宽;height 高;margin 外边距; border边线 边框 边框颜色 border-top-color 上边框颜色 border-right-color右边框颜色 border-bottom-color下边框颜色 border-left-color左边框颜色 border-color四个边框为同一颜色 边框样式 border-style none hidden dotted 点状 dashed 虚线 solid实线 double 双线

边框粗细 border-width thin medium thick 像素值

同时设置边框的颜色、粗细和样式 border:1px solid #3a6587; border: 1px dashed red;

内边距 padding padding-left padding-right padding-top padding-bottom padding 盒子模型总尺寸=border+padding+margin+内容宽度

外边距 margin margin-top margin-right margin-bottom margin-left margin 网页居中对齐margin:0px auto; 网页居中对齐的必要条件 块元素 固定宽度

圆角边框 border-radius: 20px 10px 50px 30px; 四个属性值按顺时针排列 圆形 利用border-radius属性制作圆形的两个要点 元素的宽度和高度必须相同 圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50% 半圆形 利用border-radius属性制作半圆形的两个要点 制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值 制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值 width: 300px; height: 150px; background-color: #f00; border-radius: 0 0 150px 150px 扇形 利用border-radius属性制作扇形遵循“三同,一不同”原则 “三同”是元素宽度、高度、圆角半径相同 “一不同”是圆角取值位置不同 盒子阴影盒子阴影

加油 胜利在前方

最新回复(0)