个人做游戏网站,娄底网站建设报价,网站建设 漳州,潍坊网站制作建设目录 复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 CSS 三大特性继承性层叠性优先级 背景属性背景色背景图背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性 显示模式显示模式块级元素行内元素行内块元素 转换显示模式 结构伪类选择器结构伪类选择器… 目录 复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 CSS 三大特性继承性层叠性优先级 背景属性背景色背景图背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性 显示模式显示模式块级元素行内元素行内块元素 转换显示模式 结构伪类选择器结构伪类选择器nth-child(公式) 伪元素选择器盒子模型组成边框线内边距尺寸计算外边距边距问题外边距-合并现象外边距-塌陷问题行内元素-内外边距问题 清除默认样式元素溢出圆角圆角应用正圆形状胶囊形状 阴影 复合选择器
定义由两个或多个基础选择器通过不同的方式组合而成
作用更准确、更高效的选择目标元素标签
后代选择器
后代选择器选中某元素的后代元素所有后代
格式
父选择器 子选择器{CSS 属性
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv span{color: red;}/style/headbodyspan这是一个span标签/spandivspan这是div标签中的span标签/span/div/body
/html结果如下 子选择器
子代选择器选中某元素的子代元素
格式
父选择器子选择器{CSS 属性
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyledivspan{color: red;}/style/headbodydivspan大儿子span/spanpspan孙子span/span/pspan小儿子span/span/div/body
/html结果如下
并集选择器
并集选择器选中多组标签设置相同的样式
格式
选择器1,选择器2,...,选择器N{CSS 属性
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv,p,span{color: red;}/style/headbodydivdiv标签/divpp标签/pspanspan标签/span/body
/html结果如下 交集选择器
交集选择器选中同时满足多个条件的元素
格式
选择器1选择器2{CSS 属性
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylep.box{color: red;}/style/headbodyp classboxp标签使用了类选择器/ppp标签/pdiv classboxdiv标签使用了类选择器/div/body
/html结果如下
注意事项
选择器之间连写没有任何符号如果交集选择器中有标签选择器标签选择器必须写在最前面
伪类选择器
伪类选择器伪类表示元素状态选中元素的某个状态设置样式
格式
鼠标悬停状态
选择器:hover{CSS 属性
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylea:hover{font-size: 30px;color: red;}/style/headbodya href#这是没有鼠标悬停的a标签/abra href#这是有鼠标悬停的a标签/a/body
/html结果如下
伪类-超链接
超链接一共有四个状态
选择器作用:link访问前:visited访问后:hover鼠标悬停:active点击时激活
注意事项如果要给超链接设置以上四个状态要按 lvha 的顺序书写
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylea:link{color: orange;}a:visited{color: black;}a:hover{color:yellow}a:active{color:gray}/style/headbodya href#这是一段文字/a/body
/html结果如下 屏幕录制 2025-03-07 171505 CSS 三大特性
继承性
子级默认继承父级的文字控制属性
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylebody{font-size: 30px;font-family: 楷体;color: red;}/style/headbodydiv樱花飘落的速度是每秒五厘米而我对你的思念始终追不上季节的更迭。/divp咖啡杯沿的温度逐渐冷却书页间夹着的旧车票还留着那年雨季的褶皱。/pspan地铁里陌生人的一个微笑像极了某个黄昏你转身时发梢掠过的风。/span/body
/html结果如下
注意事项当子级有自己的样式的时候优先生效自己的样式就不会对父级的样式生效
层叠性
特点
相同的属性会覆盖后面的 CSS 属性覆盖前面的 CSS 属性不同的属性会叠加不同的 CSS 属性都生效
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{font-size: 30px;color: red;}div{color: purple;font-family: 楷体;}/style/headbodydiv萤火虫提着灯笼穿过月光在旧砖墙的皱纹里种下星辰的碎片。/div/body
/html结果如下
优先级
优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则
规则选择器优先级高的样式生效
公式通配选择器 标签选择器 类选择器 id 选择器 行内样式 important选中标签的范围越大优先级越低 !important 提高权重将优先级提到最高 !DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle*{color: purple !important;}.style1{color: red;}/style/headbodydivp这是一段文字1/pp classstyle1这是一段文字2/p/div/body
/html结果如下
叠加计算规则
叠加计算如果是复合选择器则需要权重叠加计算
规则行内样式id 选择器个数类选择器个数标签选择器个数
从左向右依次比较个数同一级个数多的优先级高如果个数相同则向后比较!important 权重最高在继承中变为无效继承权重最低
背景属性
背景色
属性名background-color
属性
颜色表示方式属性值说明使用场景颜色关键字颜色英文单词red、green、blue…学习测试rgb 表示法rgb(r, g, b)rgb 表示红绿蓝三原色取值0 - 255了解rgba 表示法rgba(r, g, b, a)a 表示透明度取值0 - 1开发使用实现透明色十六进制表示法#RRGGBB#000000#ffcc00简写#000#fc0开发使用从设计稿复制
格式
选择器{background-color: red;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylep{background-color: red;}/style/headbodyp这是一段文字/p/body
/html结果如下 背景图
网页中使用背景图实现装饰性的图片效果
属性名background-image
属性值url(背景图路径)
格式
选择器{background-image: url(./images/1.png);
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 504px;height: 495px;background-image: url(./img/1.png);}/style/headbodydiv这是一段文字/div/body
/html结果如下
注意事项背景图默认是平铺的效果
背景图平铺方式
属性名background-repeat
属性值
no-repeat不平铺repeat平铺默认效果repeat-x水平方向平铺repeat-y垂直方向平铺
格式
选择器{background-repeat: no-repeat;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;font-size: 80px;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-x;font-size: 80px;}.y{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-y;font-size: 80px;}/style/headbodydiv这是不平铺/divp这是水平平铺/pp classy这是垂直平铺/p/body
/html结果如下
背景图位置
属性名background-position
属性值水平方向位置 垂直方向位置
关键字 left左侧right右侧center居中top置顶bottom置底 偏移量数字 px正负都可以 水平方向正数向右负数向左垂直方向正数向下负数向上
格式
选择器{background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: right center;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: 126px 123.75px;}/style/headbodydiv/divp/p/body
/html结果如下
注意事项
background-position: 0 0 和 background-position: left top 为默认的左上角关键字取值方式写法可以颠倒取值顺序可以只写一个关键字另一个方向默认居中数字只写一个值表示水平方向垂直方向为居中
背景图缩放
属性background-size
属性值
关键字 cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见contain等比例缩放背景图片以完全装入背景区可能背景区部分空白 百分比根据盒子尺寸计算图片大小数字 单位例如 px
格式
选择器{background-size: contain;background-size: cover;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.size1{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: contain;}.size2{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: cover;}/style/headbodyp classsize1/pp classsize2/p/body
/html结果如下
背景图固定
作用背景图不会随着元素的内容滚动
属性名background-attachment
属性值fixed
格式
选择器{background-attachment: fixed;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylebody{background-image: url(./img/3.png);background-repeat: no-repeat;background-position: center top;background-size: contain;background-attachment: fixed;}body p{font-size: 20px;font-family: 楷体;font-weight: bold;text-indent: 2em;}h1{font-family: 楷体;text-align: center;}/style/headbodyh1孔雀东南飞/h1p序曰汉末建安中庐江府小吏焦仲卿妻刘氏为仲卿母所遣自誓不嫁。其家逼之乃投水而死。仲卿闻之亦自缢于庭树。时人伤之为诗云尔。/pp孔雀东南飞五里一徘徊。/pp“十三能织素十四学裁衣十五弹箜篌十六诵诗书。十七为君妇心中常苦悲。君既为府吏守节情不移。贱妾留空房相见常日稀。鸡鸣入机织夜夜不得息。三日断五匹大人故嫌迟。非为织作迟君家妇难为妾不堪驱使徒留无所施。便可白公姥及时相遣归。”/pp府吏得闻之堂上启阿母“儿已薄禄相幸复得此妇结发同枕席黄泉共为友。共事二三年始尔未为久。女行无偏斜何意致不厚”/pp阿母谓府吏“何乃太区区此妇无礼节举动自专由。吾意久怀忿汝岂得自由东家有贤女自名秦罗敷可怜体无比阿母为汝求。便可速遣之遣去慎莫留”/pp府吏长跪告“伏惟启阿母今若遣此妇终老不复取”/pp阿母得闻之槌床便大怒“小子无所畏何敢助妇语吾已失恩义会不相从许”/pp府吏默无声再拜还入户。举言谓新妇哽咽不能语“我自不驱卿逼迫有阿母。卿但暂还家吾今且报府。不久当归还还必相迎取。以此下心意慎勿违吾语。”/pp新妇谓府吏“勿复重纷纭。往昔初阳岁谢家来贵门。奉事循公姥进止敢自专昼夜勤作息伶俜萦苦辛。谓言无罪过供养卒大恩仍更被驱遣何言复来还妾有绣腰襦葳蕤自生光红罗复斗帐四角垂香囊箱帘六七十绿碧青丝绳物物各自异种种在其中。人贱物亦鄙不足迎后人留待作遗施于今无会因。时时为安慰久久莫相忘”/pp鸡鸣外欲曙新妇起严妆。著我绣夹裙事事四五通。足下蹑丝履头上玳瑁光。腰若流纨素耳著明月珰。指如削葱根口如含朱丹。纤纤作细步精妙世无双。/pp上堂拜阿母阿母怒不止。“昔作女儿时生小出野里。本自无教训兼愧贵家子。受母钱帛多不堪母驱使。今日还家去念母劳家里。” 却与小姑别泪落连珠子。“新妇初来时小姑始扶床今日被驱遣小姑如我长。勤心养公姥好自相扶将。初七及下九嬉戏莫相忘。” 出门登车去涕落百余行。/pp府吏马在前新妇车在后。隐隐何甸甸俱会大道口。下马入车中低头共耳语“誓不相隔卿且暂还家去吾今且赴府不久当还归。誓天不相负”/pp新妇谓府吏“感君区区怀君既若见录不久望君来。君当作磐石妾当作蒲苇蒲苇纫如丝磐石无转移。我有亲父兄性行暴如雷恐不任我意逆以煎我怀。” 举手长劳劳二情同依依。/pp入门上家堂进退无颜仪。阿母大拊掌不图子自归“十三教汝织十四能裁衣十五弹箜篌十六知礼仪十七遣汝嫁谓言无誓违。汝今何罪过不迎而自归” 兰芝惭阿母“儿实无罪过。” 阿母大悲摧。/pp还家十余日县令遣媒来。云有第三郎窈窕世无双。年始十八九便言多令才。/pp阿母谓阿女“汝可去应之。”/pp阿女含泪答“兰芝初还时府吏见丁宁结誓不别离。今日违情义恐此事非奇。自可断来信徐徐更谓之。”/pp阿母白媒人“贫贱有此女始适还家门。不堪吏人妇岂合令郎君幸可广问讯不得便相许。”/pp媒人去数日寻遣丞请还说有兰家女丞籍有宦官。云有第五郎娇逸未有婚。遣丞为媒人主簿通语言。直说太守家有此令郎君既欲结大义故遣来贵门。/pp阿母谢媒人“女子先有誓老姥岂敢言”/pp阿兄得闻之怅然心中烦。举言谓阿妹“作计何不量先嫁得府吏后嫁得郎君否泰如天地足以荣汝身。不嫁义郎体其往欲何云”/pp兰芝仰头答“理实如兄言。谢家事夫婿中道还兄门。处分适兄意那得自任专虽与府吏要渠会永无缘。登即相许和便可作婚姻。”/pp媒人下床去诺诺复尔尔。还部白府君“下官奉使命言谈大有缘。” 府君得闻之心中大欢喜。视历复开书便利此月内六合正相应。良吉三十日今已二十七卿可去成婚。交语速装束络绎如浮云。青雀白鹄舫四角龙子幡。婀娜随风转金车玉作轮。踯躅青骢马流苏金镂鞍。赍钱三百万皆用青丝穿。杂彩三百匹交广市鲑珍。从人四五百郁郁登郡门。/pp阿母谓阿女“适得府君书明日来迎汝。何不作衣裳莫令事不举”/pp阿女默无声手巾掩口啼泪落便如泻。移我琉璃榻出置前窗下。左手持刀尺右手执绫罗。朝成绣夹裙晚成单罗衫。晻晻日欲暝愁思出门啼。/pp府吏闻此变因求假暂归。未至二三里摧藏马悲哀。新妇识马声蹑履相逢迎。怅然遥相望知是故人来。举手拍马鞍嗟叹使心伤“自君别我后人事不可量。果不如先愿又非君所详。我有亲父母逼迫兼弟兄。以我应他人君还何所望”/pp府吏谓新妇“贺卿得高迁磐石方且厚可以卒千年蒲苇一时纫便作旦夕间。卿当日胜贵吾独向黄泉”/pp新妇谓府吏“何意出此言同是被逼迫君尔妾亦然。黄泉下相见勿违今日言” 执手分道去各各还家门。生人作死别恨恨那可论念与世间辞千万不复全/pp府吏还家去上堂拜阿母“今日大风寒寒风摧树木严霜结庭兰。儿今日冥冥令母在后单。故作不良计勿复怨鬼神命如南山石四体康且直”/pp阿母得闻之零泪应声落“汝是大家子仕宦于台阁。慎勿为妇死贵贱情何薄东家有贤女窈窕艳城郭阿母为汝求便复在旦夕。”/pp府吏再拜还长叹空房中作计乃尔立。转头向户里渐见愁煎迫。/pp其日牛马嘶新妇入青庐。奄奄黄昏后寂寂人定初。“我命绝今日魂去尸长留” 揽裙脱丝履举身赴清池。/pp府吏闻此事心知长别离。徘徊庭树下自挂东南枝。/pp两家求合葬合葬华山傍。东西植松柏左右种梧桐。枝枝相覆盖叶叶相交通。中有双飞鸟自名为鸳鸯。仰头相向鸣夜夜达五更。行人驻足听寡妇起彷徨。多谢后世人戒之慎勿忘/p/body
/html结果如下 屏幕录制 2025-03-08 013552 背景复合属性
属性名background
属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定不区分顺序
格式
选择器{background: red url(./img/1.png) no-repeat right center/cover;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 600px;height: 400px;background: red url(./img/1.png) no-repeat right center/cover;}/style/headbodydiv这是一段字/div/body
/html结果如下
显示模式
显示模式
显示模式标签元素的显示方式
作用布局网页的时候根据标签的显示模式选择合适的标签摆放内容
块级元素
特点
独占一行高度默认是父级的 100%添加宽高属性生效
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.div1{background-color: red;}.div2{height: 60px;background-color: gray;}/style/headbodydiv classdiv1这是一段字/divdiv classdiv2这是一段字/div /body
/html结果如下
行内元素
特点
一行可共存多个宽高跟内容宽高一致添加宽高属性不生效
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}/style/headbodyspan classspan1这是span标签/spanspan classspan2这是span标签/span/body
/html结果如下
行内块元素
特点
一行可共存多个宽高与内容宽高一致添加宽高属性生效
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}img{width: 100px;height: 100px;}/style/headbodyspan classspan1这是span标签/spanimg src./img/1.png alt/body
/html结果如下 转换显示模式
属性名display
属性值
block块级inline-block行内块inline行内
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 200px;height: 200px;background-color: red;display: inline;}span{width: 200px;height: 200px;background-color: gray;display: inline-block;}img{width: 100px;height: 100px;display: block;}/style/headbodydiv这是一段字/divdiv这是一段字/divspan这是span标签/spanspan这是span标签/spanimg src./img/1.png altimg src./img/1.png alt/body
/html结果如下 结构伪类选择器
结构伪类选择器
作用根据元素的结构关系查找元素
选择器说明E:first-child查找第一个 E 元素E:last-child查找最后一个 E 元素E:nth-child(N)查找第 N 个 E 元素第一个元素 N 值为 1
格式
选择器:first-child{background color: red;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyleli:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}li:nth-child(2){background-color: rgb(174, 174, 235);}/style/headbodyulli床前明月光疑是地上霜。—— 李白《静夜思》/lili独在异乡为异客每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》/lili欲穷千里目更上一层楼。—— 王之涣《登鹳雀楼》/li/ul/body
/html结果如下 nth-child(公式)
作用根据元素的结构关系查找多个元素
功能公式偶数标签2n奇数标签2n12n-1找到 5 的倍数的标签5n找到第 5 个以后的标签n5找到第 5 个以前的标签-n5
格式
选择器:nth-child(2n){background color: red;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyleli:nth-child(2n-1){background-color: rgb(174, 174, 235);}li:nth-child(2n){background-color: rgb(235, 235, 157);}li:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}/style/headbodyulli床前明月光疑是地上霜。—— 李白《静夜思》/lili独在异乡为异客每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》/lili欲穷千里目更上一层楼。—— 王之涣《登鹳雀楼》/lili问君能有几多愁恰似一江春水向东流。—— 李煜《虞美人》/lili大江东去浪淘尽千古风流人物。—— 苏轼《念奴娇・赤壁怀古》/lili寻寻觅觅冷冷清清凄凄惨惨戚戚。—— 李清照《声声慢》/lili落红不是无情物化作春泥更护花。—— 龚自珍《己亥杂诗》/lili黑夜给了我黑色的眼睛我却用它寻找光明。—— 顾城《一代人》/lili你站在桥上看风景看风景人在楼上看你。—— 卞之琳《断章》/li/ul/body
/html结果如下
伪元素选择器
作用创建虚拟元素伪元素用来摆放装饰性的内容
选择器说明E::before在 E 元素里面的最前面添加一个伪元素E::after在 E 元素里面的最后面添加一个伪元素
注意事项
必须设置content: 属性用来设置伪元素的内容如果没有内容则引号留空即可伪元素默认是行内显示模式权重和标签选择器相同
格式
选择器::before{content: ;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 275px;height: 50px;background-color: #f7b7b7;}div::before{content: 寻寻觅觅;}div::after{content: 凄凄惨惨戚戚。;}/style/headbodydiv冷冷清清/div/body
/html结果如下
盒子模型
作用布局网页摆放盒子和内容
组成
盒子模型重要组成部分
内容区域width height内边距padding出现在内容与盒子边缘之间边框线border外边距margin出现在盒子外面 代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 100px;height: 100px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;margin: 20px;}/style/headbodydiv这是一段文字这是一段文字这是一段文字这是一段文字/div/body
/html结果如下 边框线
属性名border
属性值边框线粗细 线条样式 颜色不区分顺序
常用线条样式
属性值线条样式solid实线dashed虚线dotted点线
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.div1{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px solid black;display: inline-block;}.div2{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dashed black;display: inline-block;}.div3{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dotted black;display: inline-block;}/style/headbodydiv classdiv1这是一段文字这是一段文字这是一段文字这是一段文字/divdiv classdiv2这是一段文字这是一段文字这是一段文字这是一段文字/divdiv classdiv3这是一段文字这是一段文字这是一段文字这是一段文字/div/body
/html结果如下
设置单方向边框线
属性名border-方位名词
属性值边框线粗细 线条样式 颜色不区分顺序
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 100px;height: 100px;background-color: #f7b7b7;border-right: 2px solid black;border-top: 4px dotted red;border-left: 2px dashed blue;border-bottom: 4px solid yellow;}/style/headbodydiv这是一段文字这是一段文字这是一段文字这是一段文字/div/body
/html结果如下
内边距
作用设置内容与盒子边缘之间的距离
属性名padding / padding-方位名词
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 100px;height: 100px;background-color: #f7b7b7;padding-left: 20px;padding-right: 40px;padding-top: 10px;padding-bottom: 50px;}/style/headbodydiv这是一段文字这是一段文字这是一段文字这是一段文字/div/body
/html结果如下
内边距多值写法
取值个数示例含义一个值padding: 10px;四个方向内边距均为 10px两个值padding: 10px 80px;上下10px左右80px三个值padding: 10px 40px 80px;上10px左右40px下80px四个值padding: 10px 20px 40px 80px;上10px右20px下40px左80px
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 100px;height: 100px;background-color: #f7b7b7;padding: 10px 20px 40px 80px;}/style/headbodydiv这是一段文字这是一段文字这是一段文字这是一段文字/div/body
/html结果如下
注意事项从上开始顺时针转一圈如果当前方向没有数值取值跟对边一样
尺寸计算
默认情况
盒子尺寸 内容尺寸 border 尺寸 内边距尺寸
结论给盒子加 border/padding 会撑大盒子
解决方法
手动做减法减掉 border/padding 的尺寸内减模式box-sizing:border-box
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 200px;height: 200px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;box-sizing: border-box;}/style/headbodydiv这是一段文字/div/body
/html结果如下
外边距
作用拉开两个盒子之间的距离
属性名margin
提示与 padding 属性值写法、含义相同
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 200px;height: 200px;background-color: #f7b7b7;margin: 20px;}/style/headbodydiv这是一段文字/div/body
/html结果如下
注意事项外边距不会撑大盒子
外边距版心居中
通过左右两边添加相同的外边距使版心居中
格式
选择器{margin: 0 auto 0;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 800px;height: 512px;background-color: #f7b7b7;margin: 0 auto 0;}/style/headbodydivimg src./img/2.png alt/div/body
/html结果如下
注意事项版心居中盒子一定要有宽度
边距问题
外边距-合并现象
场景垂直排列的兄弟元素上下 margin 会合并
现象取两个 margin 中较大值生效
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.div1{width: 200px;height: 100px;background-color: #f0a3a3;margin-bottom: 20px;}.div2{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}/style/headbodydiv classdiv1这是一段字/divdiv classdiv2这是一段字/div/body
/html结果如下
外边距-塌陷问题
场景父子级的标签子级的添加上外边距会产生塌陷问题
现象导致父级一起向下移动
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.father{width: 400px;height: 400px;background-color: #f0a3a3;}.son{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}/style/headbodydiv classfatherdiv classsonson/div/div/body
/html结果如下
解决方法
取消子级 margin父级设置 padding规避问题父级设置 overflow: hidden父级设置 border-top
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle.father{width: 400px;height: 400px;background-color: #f0a3a3;padding-top: 50px;box-sizing: border-box;}.son{width: 200px;height: 100px;background-color: #b4a3f0;}/style/headbodydiv classfatherdiv classsonson/div/div/body
/html结果如下
行内元素-内外边距问题
场景行内元素添加 margin 和 padding无法改变元素垂直位置
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylespan{margin: 50px;padding: 20px;}/style/headbodyspan这是一行字/span/body
/html结果如下
解决方法给行内元素添加 line-height 可以改变垂直位置
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylespan{margin: 50px;padding: 20px;line-height: 100px;}/style/headbodyspan这是一行字/span/body
/html结果如下
清除默认样式
清除标签默认的样式比如默认的内外边距
格式
*{margin: 0;padding: 0;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyle*{margin: 0;padding: 0;}/style/headbodyh1标题/h1p文本内容/pulli列表内容/li/ul/body
/html结果如下
去掉列表项目符号
格式
选择器{list-style: none;
}代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestyleli{list-style: none;}/style/headbodyulli列表内容/lili列表内容/lili列表内容/lili列表内容/li/ul/body
/html结果如下
元素溢出
作用控制溢出元素的内容的显示方式
属性名overflow
属性值
hidden溢出隐藏scroll溢出滚动无论是否溢出都显示滚动条位置auto溢出滚动溢出才显示滚动条位置
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{width: 200px;height: 200px;background-color: #f0a3a3;overflow: auto;}/style/headbodydiv雨丝斜斜地穿过玻璃幕墙在地面洇开细碎的光斑。咖啡馆里飘着焦糖玛奇朵的甜香邻座姑娘的笔记本摊开在《雪国》某页窗外的樱花正与书页上 银河倾泻进瞳孔 的句子重叠。地铁报站声从地底传来时自动贩卖机突然吐出一罐过期的橘子汽水金属拉环 咔嗒 轻响惊飞了檐下打盹的灰鸽。暮色漫过街道时修鞋匠终于为最后一只旧皮鞋钉上铜掌锤子与铁砧碰撞的节奏恰好吻合十字路口红绿灯交替的频率。/div/body
/html结果如下 屏幕录制 2025-03-08 175915 圆角
作用设置元素的外边框为圆角
属性名border-radius
属性值圆角半径 数字 px 百分比
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 80px 20px 80px 20px;}/style/headbodydiv/div/body
/html结果如下
注意事项从左上角顺时针开始赋值没有赋值的角与对角的值相同
圆角应用
正圆形状
给正方形盒子设置圆角属性值为宽高的一半50%
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 50%;}/style/headbodydiv/div/body
/html结果如下
注意事项圆角最大值是 50%超过 50% 不会生效
胶囊形状
给长方形盒子设置圆角属性值为盒子高度的一半
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;}/style/headbodydiv/div/body
/html结果如下
阴影
作用给元素设置阴影效果
属性名box-shadow
属性值X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内/外阴影
注意事项
X 轴偏移量和 Y 轴偏移量必须书写默认是外阴影内阴影需要添加 inset
代码示例
!DOCTYPE html
html lang enheadmeta charset UTF-8titleTitle/titlestylediv{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;box-shadow: 2px 5px 10px 2px black inset;}/style/headbodydiv/div/body
/html结果如下
