文章目录 01-结构伪类选择器 02-结构伪类选择器-公式用法 03-伪元素选择器 04-盒子模型-组成 05-盒子模型-边框线 06-盒子模型-单方向边框线 07-盒子模型-内边距 08-盒子模型-padding多值写法 09-盒子模型-尺寸计算 10-盒子模型-版心居中 11-清除默认样式 12-元素溢出overflow 13-外边距合并现象 14-外边距塌陷问题 15-行内元素的垂直内外边距 16-圆角的基本使用 17-圆角-特殊场景 18-扩展-盒子阴影 19-综合案例-产品卡片 20-综合案例-新浪新闻1
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> / * li: first- child{ background- color: blue; } * / / * li: last- child{ background- color: red; } * / / * li: nth- child( 3 ) { background- color: purple; } * / < / style>
< / head>
< body> < ul> < li> li1< / li> < li> li2< / li> < li> li3< / li> < li> li4< / li> < li> li5< / li> < li> li6< / li> < / ul>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> / * n从0 开始 * / li: nth- child( 2n) { background- color: rebeccapurple; } li: nth- child( 2n+ 1 ) { background- color: blue; } li: nth- child( 5n) { background- color: palegoldenrod; } / * 第五个往后的 * / li: nth- child( n+ 5 ) { background- color: aqua; } li: nth- child( - n+ 5 ) { background- color: brown; } < / style>
< / head>
< body> < ul> < li> 1 < / li> < li> 2 < / li> < li> 3 < / li> < li> 4 < / li> < li> 5 < / li> < li> 6 < / li> < li> 1 < / li> < li> 2 < / li> < li> 3 < / li> < li> 4 < / li> < li> 5 < / li> < li> 6 < / li> < / ul>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 300px; height: 300px; background- color: pink; } / * 必须包含content 否则伪元素选择器不生效 * / div: : before{ content: "老鼠" ; width: 100px; height: 100px; background- color: red; display: block; } div: : after{ content: "大米" ; width: 100px; height: 100px; background- color: purple; display: inline- block; } < / style>
< / head>
< body> < div> ai< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> / * 盒子模型：内容区域+ 内边距+ 外框线+ 内边距 * / div{ width: 200px; height: 200px; background- color: pink; padding: 20px; border: 1px solid margin: 50px; } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 200px; height: 200px; background- color: pink; / * border: 1px solid / * border: 2px dashed red; * / / * border: 3px dotted purple; * / border: 1px solid } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 200px; height: 200px; background- color: pink; border- top: 3px solid border- right: 1px solid red; border- left: 3px solid purple; border- bottom: 1px solid orange; } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 200px; height: 200px; background- color: pink; / * padding: 20px; * / padding- top: 10px; padding- bottom: 40px; padding- right: 30px; padding- left: 15px; padding: 10px 20px 30px 40px; } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 300px; height: 300px; background- color: red; / * 四个值：上 右 下 左 * / / * padding: 10px 20px 30px 40px; * / / * 三个值：上 左右 下 * / padding: 10px 20px 80px; / * 两个值：上下 左右 * / padding: 10px 30px; / * 记忆方法：从上开始顺时针转 ，如果没有值看对面 * / } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < !- - 盒子尺寸= height* width+ 2 * padding+ 2 * border - - > < style> div{ width: 200px; height: 200px; / * 手动减法 * / / * width: 160px; * / / * height: 160px; * / background- color: purple; padding: 20px; / * 内减模式：不需要手动减法，加padding和border不会撑大盒子 * / box- sizing: border- box; } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 1000px; height: 200px; background- color: pink; / * margin不会撑大盒子 * / / * margin: 50px; * / / * margin- left: 50px; * / / * margin: 50px 100px; * / margin: 0 auto; / * 做版心居中的前提是盒子一定要有宽 * / } < / style>
< / head>
< body> < div> div< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } li{ / * 去掉列表前面的小点点 * / list - style: none; } < / style>
< / head>
< body> < h1> 标题< / h1> < p> ppp< / p> < ul> < li> lili< / li> < / ul>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ width: 200px; height: 100px; background- color: pink; overflow: hidden; / * overflow: scroll; * / / * overflow: auto; * / } < / style>
< / head>
< body> < div> dkfkmckckdcmd kdkmckfmcccccccccccccccccccccccccccckffffffffffffla; jgittttttttttttttttttttttttttttttvmiajgittcnddddddacnnnnnnnnnnn< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> . one{ height: 200px; width: 200px; background- color: pink; margin- bottom: 50px; } . two{ height: 200px; width: 200px; background- color: red; margin- top: 50px; } / * 上下盒子的边距自动合并成最大值 * / < / style>
< / head>
< body> < div class = "one" > number one< / div> < div class = "two" > number two< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> . father{ height: 200px; width: 200px; background- color: pink; / * 规避问题 * / / * padding- top: 50px; * / / * box- sizing: border- box; * / / * 溢出隐藏 * / / * overflow: hidden; * / border- top: 1px solid } . son{ height: 100px; width: 100px; background- color: red; margin- top: 50px; } < / style>
< / head>
< body> < div class = "father" > < div class = "son" > son< / div> < / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> span{ margin: 20px; padding: 30px; line- height: 50px; / * 内外边距对垂直方向不起作用 * / } < / style>
< / head>
< body> < span> jdjjc< / span> < span> dkmkmks< / span>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ height: 200px; width: 200px; margin: 20px auto; background- color: pink; / * border- radius: 20px; * / / * 圆角赋值的时候 从左上角顺时针取值，没有取值的角与对焦取值相同 * / / * 四值：左上 右上 右下 左下 * / / * border- radius: 10px 20px 30px 40px; * / / * 三值：左上 右上= 左下 右下 * / / * border- radius: 10px 30px 80px; * / / * 两值：左上+ 右下 右上+ 左下 * / border- radius: 10px 80px; } < / style>
< / head>
< body> < div> dk< / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> img{ height: 200px; width: 200px; / * border- radius: 100px; * / border- radius: 50 % ; } div{ height: 100px; width: 200px; border- radius: 50px; background- color: pink; } < / style>
< / head>
< body> < img src= "./20.jpg" alt= "" > < div> < / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> div{ margin: 50px auto; width: 200px; height: 80px; background- color: red; / * X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 * / box- shadow: 2px 5px 10px 1px rgba( 0 , 0 , 0 , 0.5 ) inset; } < / style>
< / head>
< body> < div> < / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } body{ background- color: } . product{ margin: 50px auto; padding- top: 40px; border- radius: 10px; width: 270px; height: 253px; text- align: center; background- color: } . product img{ height: 100px; width: 100px; } . product h4{ / * 盒子模型 * / margin- top: 20px; margin- bottom: 12px; / * 文字样式 * / font- size: 18px; color: / * 圆角阴影 * / } . product p{ font- size: 12px; color: } < / style>
< / head>
< body> < div class = "product" > < img src= "./20.jpg" alt= "" > < h4> c d恨不得菲律宾sj c< / h4> < p> dsk发你觉得你dncd< / p> < / div>
< / body>
< / html>
< !DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> Document< / title> < !- - 这个案例是把内容上的小图标当成背景图片，然后在设置相应盒子的左内边框 - - > < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } li{ / * text- decoration: none; * / list - style: none; } a{ text- decoration: none; } . news{ width: 360px; height: 200px; / * background- color: pink; * / margin: 50px auto; } . news . hd{ height: 34px; background- color: border: 1px solid border- left: none; } . news . hd a{ margin- top: - 1px; display: block; border- top: 3px solid border- right: 1px solid width: 48px; height: 34px; background- color: text- align: center; line- height: 32px; color: font- size: 14px; } . news . bd { padding: 5px; } . news . bd li{ background- image: url( . / min . png) ; background- repeat: no- repeat; background- position: 0 center; padding- left: 30px; } . news . bd li a{ background: url( . / 1715311197067 . png) no- repeat 0 center; padding- left: 60px; color: font- size: 12px; line- height: 24px; } . news . bd li a: hover{ color: } < / style>
< / head>
< body> < !- - 新闻区域：标题+ 内容 - - > < div class = "news" > < div class = "hd" > < a href= "#" > 新闻< / a> < / div> < div class = "bd" > < ul> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < li> < a href= "#" > shj jb 上次从大家觉得从基督教的基督教的< / a> < / li> < / ul> < / div> < / div>
< / body>
< / html>
