搜索到
23
篇与
的结果
-
三大特性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> </head> <body> <!-- 1.层叠性 概念：如果发生了样式冲突，就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖） 2.继承性 概念：元素会自动拥有其父元素，或其祖元素上所设置的某些样式 规则：优先继承离得近的 常见的可继承属性：text-xxx font-xxx line-xxx color 3.优先级 !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式 并集选择器计算权重时，每一个部分是分开算的 --> </body> </html> -
选择器的优先级 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 */ #sunxiaochuan { color: blue; } .slogan { color: yellow; } h2 { color: red; } * { color: green; } </style> </head> <body> <h2 id="sunxiaochuan" class="slogan" style="color: blueviolet;">孙笑川</h2> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 权重计算：(a,b,c) */ /* a：ID选择器的个数 b：类、伪类、属性 选择器的个数 c：元素、伪元素 选择器的个数 注：行内样式权重大于所有选择器 !important 的权重大于行内样式，大于所有选择器，权重最高 */ #test { color: purple; } /* (1,0,0) */ #jialidun { color: orange; } /* (0,2,1) 从左到右依次比较大小，当前位胜出后，后面的不再对比 */ .container span.slogan { color: red; } /* (0,1,3) */ div>p>span:nth-child(1) { color: green; } .slogan { color: blue !important; } </style> </head> <body> <div class="container" id="test"> <p> <span id="jialidun" class="slogan">家里蹲大学</span> <span>欢迎新同学</span> </p> </div> </body> </html>
-
复合选择器 1. 交集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>2. 并集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>3. 后代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> ul li { color: red; } ol li { color: green; } ul li a { color: orange; } ol li a { color: gray; } .subject li.yuwen { color: blue; } .subject div.yuwen { color: chocolate; } </style> </head> <body> <ul> <li>抽烟</li> <li>喝酒</li> <li> <a href="#">烫头</a> </li> <!-- <div> <li>踢球</li> </div> --> </ul> <hr/> <ol> <li>张三</li> <li>李四</li> <li> <a href="#">王五</a> </li> </ol> <hr/> <ol class="subject"> <li class="yuwen">语文</li> <div class="yuwen">学科介绍：学好语文</div> <li>数学</li> <li>英语</li> </ol> </body> </html>4. 子代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子代选择器</title> <style> /* 只选择儿子 div中的子代a元素 */ div>a { color: red; } div>p>a { color: skyblue; } .foot>a { color: gray; } </style> </head> <body> <div> <a href="#">张三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">赵六</a> <div class="foot"> <a href="#">孙七</a> </div> </p> </div> </body> </html>5. 兄弟选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>兄弟选择器</title> <style> /* 相邻兄弟选择器 */ /* 找到跟div紧紧相邻的p元素，兄弟选择器只往下看，不往上看（睡在我下铺的兄弟） */ /* div+p { color: red; } */ /* 通用兄弟选择器 */ /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟） */ div~p { color: red; } li+li { color: orange; } </style> </head> <body> <div>语文</div> <p>数学</p> <p>英语</p> <p>物理</p> <hr/> <ul> <li>主页</li> <li>秒杀</li> <li>订单</li> <li>我的</li> </ul> </body> </html>6. 属性选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 1.选中具有title属性的元素 */ /* [title] { color: red; } */ /* 2.选中具有title属性，且属性值为yuwen的元素 */ /* [title="yuwen"] { color: red; } */ /* 3.选中具有title属性，且属性值以字母y开头的元素 */ /* [title^="y"] { color: red; } */ /* 4.选中具有title属性，且属性值以字母n结尾的元素 */ /* [title$="n"] { color: red; } */ /* 3.选中具有title属性，且属性值包含字母n的元素 */ [title*="n"] { color: red; } </style> </head> <body> <div title="yuwen">语文</div> <div title="shuxue">数学</div> <div>英语</div> <div>物理</div> </body> </html>7. 伪类选择器—概念<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_概念</title> <style> /* 伪类：很像类，但不是类（class），是元素特殊状态的一种描述 */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> </body> </html>8. 伪类选择器—动态伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_动态伪类</title> <style> /* 顺序：lvha */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } /* 选中的是鼠标悬浮状态的a元素 */ a:hover { color: skyblue; } /* 选中的是激活状态的a元素 */ a:active { color: green; } span:hover { color: pink; } span:active { color: yellowgreen; } input:focus { color: orange; background-color: green; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> <span>孙笑川</span> <br> <input type="text"> <br> <input type="text"> <br> <input type="text"> </body> </html>9. 伪类选择器—结构伪类1<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_1</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的第一个儿子p元素 结构2*/ /* div>p:first-child { color: red; } */ /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/ /* div p:first-child { color: red; } */ p:first-child { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构2 --> <!-- <div> <span>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构3 --> <p>测试一</p> <div> <p>测试二</p> <marquee> <p>测试三</p> <p>张三：98分</p> </marquee> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> </body> </html>10. 伪类选择器—结构伪类2<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_2</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:last-child { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:nth-child(3) { color: red; } */ /* 选中的是div的偶数个儿子p元素（按照所有子元素计算的） 结构2 */ /* 关于n的值： 1. 0或不写：什么都不选中（几乎不用） 2. n：选中所有的子元素（几乎不用） 3. 1 ~ 正无穷的整数：选中对应序号的子元素 4. 2n或even： 选中序号为偶数的子元素 5. 2n + 1：选中序号为奇数的子元素 6. -n + 3：选中前三个 */ /* div>p:nth-child(2n) { color: red; } */ /* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:first-of-type { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:last-of-type { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算） 结构3 */ div>p:nth-of-type(3) { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构2 --> <!-- <div> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <p>第5个</p> <p>第6个</p> <p>第7个</p> <p>第8个</p> <p>第9个</p> <p>第10个</p> </div> --> <!-- 结构3 --> <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <span>测试2</span> <p>王五：78分</p> <p>赵六：68分</p> <span>测试3</span> <p>孙七：58分</p> <span>测试4</span> <p>老八：48分</p> </div> </body> </html>10. 伪类选择器—结构伪类3<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_3</title> <style> /* 选中div中倒数第n个的儿子p元素（按照所有兄弟元素计算） 结构1 */ /* div>p:nth-last-child(3) { color: red; } */ /* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟元素计算） 结构1 */ /* div>p:nth-last-of-type(2) { color: red; } */ /* 选中的是没有兄弟的span元素 结构2 */ /* span:only-child { color: red; } */ /* 选中的是没有同类型兄弟的span元素 结构2 */ /* span:only-of-type { color: red; } */ /* 选中的是html根元素 */ /* :root { background-color: gray; } */ /* 选中的是没有内容的div元素（空格也算元素，所以div空标签内不能有空格，不然选不中） */ div:empty { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> <span>测试2</span> </div> --> <!-- 结构2 --> <!-- <div> <span>测试1</span> </div> <div> <span>测试2</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构3 --> <div></div> </body> </html>12. 伪类选择器—否定伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_否定伪类</title> <style> /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */ /* div>p:not(.fail) { color: red; } */ /* 选中的是div的儿子p元素，但是排除title属性值以“不及格”开头的 */ /* div>p:not([title^="不及格"]) { color: red; } */ /* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */ div>p:not(:first-child) { color: red; } </style> </head> <body> <!-- 结构1 --> <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p class="fail" title="不及格">孙七：58分</p> <p class="fail" title="不及格">老八：48分</p> </div> </body> </html>13. 伪类选择器—UI伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_UI伪类</title> <style> /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } /* 选中的是可用的input元素 */ input:enabled { background-color: green; } </style> </head> <body> <input type="checkbox"> <input type="radio" name="gender"> <input type="radio" name="gender"> <input type="text"> <input type="text" disabled> </body> </html>14. 伪类选择器—目标伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_目标伪类</title> <style> div { height: 900px; background-color: lightcyan; } div:target { background-color: green; } </style> </head> <body> <a href="#one">去看第1个</a> <a href="#two">去看第2个</a> <a href="#three">去看第3个</a> <a href="#four">去看第4个</a> <a href="#five">去看第5个</a> <a href="#six">去看第6个</a> <div id="one">第1个</div> <br> <div id="two">第2个</div> <br> <div id="three">第3个</div> <br> <div id="four">第4个</div> <br> <div id="five">第5个</div> <br> <div id="six">第6个</div> </body> </html>15. 伪类选择器—语言伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_语言伪类</title> <style> /* 根据指定的语言来选择元素 */ div:lang(en) { color: red; } :lang(zh-CN) { color: green; } </style> </head> <body> <div>语文</div> <div lang="en">数学</div> <p>英语</div> <span>科学</div> </body> </html>16. 伪元素选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /* 伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置 */ /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 16px; } /* 选中的是div中的第一行文字 */ div::first-line { background-color: yellow; } /* 选中的是div中被鼠标选择的文字 */ div::selection { background-color: green; color: red; } /* 选中的是input元素中的提示元素 */ input::placeholder { color: skyblue; } /* 选中的是p元素最开始的位置，随后创建一个子元素（必须配合conten使用） */ p::before { content: "￥"; } p::after { content: ".00"; } </style> </head> <body> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium dicta, dolorem suscipit dolores amet iusto tenetur in necessitatibus inventore porro veritatis molestias reiciendis iste veniam repellendus at quaerat soluta!</div> <input type="text" placeholder="请输入内容"> <p>199</p> <p>299</p> <p>399</p> </body> </html>
-
-
-
样式表的优先级 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <link rel="stylesheet" href="../01_CSS的编写位置/position.css"> <style> h1{ color: red; font-size: 100px; } </style> </head> <body> <!-- 行内样式 > 内部样式 = 外部样式 内部样式、外部样式优先级相同，且后写的会覆盖前写的 同一个样式表中，优先级也和编写顺序有关 --> <!-- <h1 style="color: aquamarine;">你好，孙笑川</h1> --> <h1>你好，孙笑川</h1> </body> </html>
-
CSS的编写位置 行内样式**<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置1_行内样式</title> </head> <body> <h1 style="color: green; font-size: 60px;">你好，孙笑川！</h1> </body> </html>2. 内部样式<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置2_内部样式</title> <style> h1{ color: lightgreen; font-size: 60px; } h2{ color: orange; font-size: 30px; } p{ color: lightcoral; font-size: 25px; } img{ width: 400px; } </style> </head> <body> <h1>你好，孙笑川！</h1> <h2>大家好，我是药水哥！</h2> <p>北京欢迎你</p> <p>上海欢迎你</p> <p>广州欢迎你</p> <img src="../images/IMG_0003.JPG" alt="照片"> </body> </html>3. 外部样式position.cssh1{ color: lightgreen; font-size: 60px; } h2{ color: orange; font-size: 30px; } p{ color: lightcoral; font-size: 25px; } img{ width: 400px; }<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位置2_内部样式</title> <link rel="stylesheet" href="./position.css"> </head> <body> <h1>你好，孙笑川！</h1> <h2>大家好，我是药水哥！</h2> <p>北京欢迎你</p> <p>上海欢迎你</p> <p>广州欢迎你</p> <img src="../images/IMG_0003.JPG" alt="照片"> </body> </html>
-
定位 5.1 相对定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <!--相对定位： 相对于自己原来的位置进行偏移 --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ background: #5f85ff; border: 1px dashed orange; position: relative; top: -10px; left: 20px; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; } #third{ background: #ff23bd; border: 1px dashed limegreen; position: relative; bottom: -10px; right: 20px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>相对定位：position: relative;相对于原来的位置，进行指定的偏移（它任然在标准文档流中，原来的位置会被保留） top: -10px; bottom: -10px; left: 20px; right: 20px;Demo：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 1px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: lightblue; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: lightsalmon; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; background: #5f85ff; } </style> </head> <body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div> </body> </html>5.2 绝对定位基于xxx定位：上下左右1、在没有父级元素定位的情况下，相对于浏览器定位2、父级元素定位存在时，相对于父级元素进行偏移3、在父级元素范围内移动相对于父级或浏览器的位置进行指定偏移，绝对定位后，不在标准文档流中，原来的位置不被保留<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; position: relative; } #first{ background: #5f85ff; border: 1px dashed orange; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; position: absolute; left: 2px; } #third{ background: #ff23bd; border: 1px dashed limegreen; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>5.3 固定定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1200px; } /*绝对定位：相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } /*fixed 固定定位*/ div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>5.4 z-index图层opacity: 0.5; 背景透明度#content{ width: 500px; padding: 0; margin: 0; overflow: hidden; font-size: 18px; line-height: 25px; border: 1px solid black; } ul,li{ padding: 0; margin: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 500px; height: 25px; top: 401px; } .tipText{ color: white; /*z-index: 999;*/ } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ filter: alpha(opacity=50);/*IE8及以前用filter代替opacity*/ }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="content"> <ul> <li><img src="image/bg.jpg" alt=""></li> <li class="tipText">强风吹拂！</li> <li class="tipBg"></li> <li>时间：16点31分</li> <li>地点：bilibili</li> </ul> </div> </body> </html>
-
浮动 1.1标准文档流块级元素：独占一行h1~h6,p,div,列表……行内元素：不独占一行span,a,img,strong……行内元素可以被包含在块级元素中，反之不行1.2 display<!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联（可以有行内元素的属性），在一行 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>注：display也是实现行内元素排列的一种方式，但通常情况下float使用较多。1.3 floatdiv{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer01{ border: 1px solid red; display: inline-block; float: right; } .layer02{ border: 1px solid red; display: inline-block; float: right; } .layer03{ border: 1px solid red; display: inline-block; float: right; } .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; }1.4 父级边框塌陷问题clear/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */ .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; clear: right; }解决方案：1、增加父级元素的高度#father{ border: 1px solid cornflowerblue; height: 800px; }2、增加一个空的div标签，清除浮动.clear{ clear: none; margin: 0; padding: 0; } <div class="clear"></div>3、overflow/*在父级元素中，增加一个 overflow: hidden；方法*/ #father{ border: 1px solid cornflowerblue; overflow: hidden; }4、在父类添加一个伪类：after#father:after{ content: ''; display: block; clear: both }小结：浮动元素后面增加空div简单，但需注意代码中尽量避免空div设置父元素的高度如果元素有固定高度，会被限制overflow在下拉的一些场景中避免使用父类添加一个伪类：after（推荐使用）display：方向不可以控制float：浮动起来后会脱离标准文档流，需解决父级边框塌陷问题
-
盒子模型 1.1 什么是盒子模型margin：外边距padding：内边距border：边框1.2 边框1、边框的粗细2、样式3、颜色1.3 内外边距<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外边距的作用：居中元素 margin: 0 auto; --> <style> #box{ width: 300px; border: 2px solid red; margin: 0 auto; } /* 顺时针旋转 margin: 0; margin: 0 1px; margin: 0 1px 2px 3px; */ h2{ font-size: 18px; background: orangered; line-height: 30px; color: white; } form{ background: lightgray; } input{ border: 1px solid black; } div:nth-of-type(1){ margin: 2px 2px; } </style> </head> <body> <div id="box"> <h2>登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> </form> </div> </body> </html>盒子的计算方式：margin + border + padding +内容的宽度1.4 圆角边框 <style> div{ width: 100px; height: 100px; border: 1px solid red; border-radius: 10px; } </style>1.5 盒子阴影<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border-radius: 50px; box-shadow: 5px 5px 100px yellow; } </style> </head> <body> <div style="width: 500px;height: 500px;text-align: center"> <img src="image/1.JPG" alt=""> </div> </body> </html>
