<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<!-- 画梯形 -->
<style type="text/css">
.bd { width: 100px;
height: 100px;
background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style> <!-- 画三角形 --> <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; } /*吃球球的小球*/ /*.bd { border-radius: 50%; border-right: 50px solid transparent; }*/ </style> </head> <body> <div class="bd"></div> </body> </html> 盒模型overflow <<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>盒模型overflow</title> <!-- 显示区域只能由父级大小决定 --> <style type="text/css"> /*子集区域大于父级*/ .sup { width: 100px; height: 100px; /*默认值*/ /*border: 3px none black;*/ /*清除边框*/ /*border: 0;*/ /*border: none;*/ /*最简单的设置*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red;
} 对父级进行overf设置 .sup { 以滚动的方式允许子级所有的内容显示 overflow: auto; overflow: scroll; 只允许子级在父级所在区域的部分显示，超出的部分隐藏 overflow: hidden; } </style> </head> <body> <!-- displ：block大环境下 --> <div class="sup"> <div class="sub"></div> </div> <div class="sup"> alk fja klj ffj af..... </div> </body> </html>
复习1 <<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复习</title> <!-- head中css样式控制body中显示的标签 --> <style type="text/css"> /*通过选择器控制对应标签*/ /*选择器的各种分类*/ /*选择器的组合与优先级*/ .d1 { width: 200px; height: 200px; background-color: red; } /*文本*/ .d1 { font: 700 50px/200px "STsong"，"微软雅黑"; text-align: center; color: #d0f; letter-spacing: 10px; } /*边框*/ .d1 { /*边框设置大小颜色*/ border: 7px solid orange; } /*边界元角*/ .d1 { /*"/"符号是横向和纵向分开*/ border-radius: 10px 20px 30px/ 20px 10px; } /*背景*/ .d1 { /*图片所放的文件夹加图片名字格式 平铺 居中 颜色* / background: url('img/alert.png') no-repeat center red; } </style> </head> <body> <!-- 常用标签 --> <!-- 功能性标签 --> <!-- 标签架构 -->
<div class="d1">文本</div> </body> </html>
display
<<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>盒模型display</title> <!-- 默认值 --> <style type="text/css"> /*块：1.独行显示 2、支持宽高，宽默认适应父级，高默认由子级或内容撑开 3、设置宽高后，一定采用设置的宽高*/ /*内联：1.同行显示 2、不支持宽高*/ /*内联块：1、同行显示，之间有间距 2、支持宽高，宽高由内容撑开 3、设置宽高后，一定采用设置的宽高但只设置其中一个，另一个会根据内容等比缩放*/ /*嵌套规则*/ /*块可以嵌套所有类型（p一般只允许嵌套内联）*/ /*内联一般只嵌套内联*/ /*内联块一般只作为最内层级*/ div { /*块*/ display: block; /*auto自适应父级可用content的宽度*/ width: auto; /*默认0*/ height: 0px; } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; /*宽和高都可以是auto*/ width: auto; height: auto; } </style>
<style type="text/css"> /*验证宽高限制*/ .sup { width: 100px; height: 100px; background-color: orange; } .sub { width: 200px; height: 200px; background-color: blue; } .s1, .s2 { width: 200px; height: 200px; background-color: brown; } img { width: 300px; height: 300px; } </style> </head> <body> <div></div> <span></span> <!-- 路径前面加个. --> <img src="./img/icon.jpg" alt=""> <img src="./img/icon.jpg" alt=""> <div class="sup"> <div class="sub"></div> </div> <div class="s1">123</div> <div class="s2">456</div>
</body> </html>
margin
<<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> 前提：sup显示区域宽全屏，高200px，sub显示区域宽高各100px 需求1、sup左上右顶格显示 html, body { body 默认具有margin：8px margin: 0; } .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } 需求2：sub在sup的水平中央显示 .sub { 上下0，左右auto zuto，左右auto，自适应（平分）剩余可布局空间 margin: 0 auto; } 需求3：sub在sup的垂直中央显示 垂直会遇到margin父子坑 .sup { height: 100px; padding: 50px 0; } .sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; } 需求4：sub在sup的水平居右显示 .sub { margin-left: auto; 可以通过right调位置 margin-right: 0; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> </html>
盒模型之样式支持 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>样式支持</title> <style type="text/css"> a { color: #333; text-decoration: none; display: block; } </style> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: red; } 水平居中 display对margin的支持 block支持所有margin布局 inline与inline-block只支持margin上下布局 .sub { display: block; margin: 0 auto; } 垂直居中 .sup { 去除高度设置 padding: 50px 0; } </style> 水平垂直居中这种方法比较实用 <style type="text/css"> .box { width: 500px; height: 500px; background: url(图片位置) no-repeat center orange; } </style> </head> <body> 认识a标签的操作 需求：具有页面转跳功能的图片 <a href=""> <img src="图片位置" alt=""> </a> 图片在sup水平垂直中央显示 part1 <div class="sup"> <img class="sub" src="" alt=""> </div> part2 <div class="box"></div> </body> </html>
层级结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级结构</title> <style type="text/css"> .d5 { width: 200px; height: 100px; background: red; } .d2, .d3, .d4 { width: 80px; height: 40px; background: orange } /*.d4 { margin-left: 160px; margin-top: -80px; }*/ .d3 { margin-left: 80px; margin-top: -40px; } .d4 { margin-left: 160px; margin-top: -40px; } /*没有层级结构情况下:*/ /*1.盒子布局间相互影响程度很大*/ /*2.要严格遵循从上至下布局顺序进行布局*/ /*问题点:牵一发动全身*/ </style> <style type="text/css"> .menu { width: 200px; height: 100px; background: red; } .html, .css, .js { width: 80px; height: 40px; background: orange } .nav { width: calc(80px * 3); height: 40px; } .css { margin-top: -40px; margin-left: 80px; } .js { margin-top: -40px; margin-left: 160px; } /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/ </style> </head> <body> <!-- 无层次结构 --> <!-- <div class="d1">w3c</div> <div class="d2">html</div> <div class="d3">css</div> <div class="d4">js</div> <div class="d5">menu</div> --> <!-- 有层次结构 --> <div class="title">w3c</div> <div class="nav"> <div class="html">html</div> <div class="css">css</div> <div class="js">js</div> </div> <div class="menu">menu</div> </body> </html>
隐藏
<<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>隐藏</title> <style type="text/css"> 盒子间会相互影响 div { width: 200px; height: 200px; } .d1 { background-color: red; 以背景颜色透明度隐藏，显示内容不需要掌握 盒子还在，内容或子级标签均会被显示 background-color: transparent; } .d2 { background-color: orange; 以盒子透明度隐藏:0~1 0:完全透明，1：完全不透明; 盒子真正意义上透明，但盒子区域占位还在 opacity: 0 } .d3 { background-color: cyan; 将盒子从文档中移除，盒子的区域占位消失，当盒子重新获得显示方式，该盒子依旧在消失位置显示 display: none; } 通过悬浮body让d3重新显示 1、明确控制的对象 2、确定对该对象的修饰 2、找出修饰与对象的关系 body：hover 与.d3是父子关系 用空格分开 .d1：hover .d3 兄弟关系用~分开 .di:hover ~ .d3 {
} </style> </head> <body> <div class="d1">123</div> <div class="d2">456</div> <div class="d3"></div> </body> </html>
w3c总结 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>w3c</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/top.css"> </head> <body> <div class="wrap"> <div class="top"> <div class="start"> <h1 class="title"></h1> <div class="search"> <div class="sc_position"> <div class="s_p_border"></div> <div class="s_p_btn">GO</div> </div> </div> </div> <div class="nav"> <div class="n_tt1"></div> <div class="n_tt2"></div> <div class="n_tt3"></div> <div class="n_tt4"></div> <div class="n_tt5"></div> <div class="n_tt6"></div> <div class="n_tt7"></div> </div> </div> <div class="main"></div> <div class="end"></div> </div> </body> </html>
reset.css html, body { margin: 0; padding: 0; } .wrap { width: 1200px; /*高度不设:由内容撑开*/ } h1 { margin: 0; }
top.css .top { /*宽度找父级:wrap*/ /*height: 148px;*/ /*子级都设置高度后,反过来可以省略父级的高度*/
background: red } .start { /*宽度找父级:wrap*/ /*height: 100px;*/ /*子级都设置高度后,反过来可以省略父级的高度*/
/*统一颜色*/ background-color: #fdfcf8; } .title { /*有明确显示宽度,自己设置*/ width: 500px; height: 100px; background: url('../img/w3c/bg.png') no-repeat 0 -150px; } .title:hover { /*只修改精灵图定位*/ background-position: 0 -250px; } .search { width: 300px; /*height: 100px;*/ /*background-color: orange;*/ /*margin-left: auto; margin-right: 0; margin-top: -100px;*/ margin: -100px 0 0 auto; } .sc_position { width: 280px; height: 40px; /*background-color: cyan;*/ } /*实现sc_position在search垂直居中*/ .search { /*宽度不变*/ /*高度为子级同高,自己不做设置*/ /*通过padding实现居中*/ padding: calc((100px - 40px) / 2) 0; } .s_p_border { width: calc(100% - 50px); /*height: 40px;*/ height: 36px; /*background-color: yellow;*/ border: 2px solid #333; border-radius: 5px; } .s_p_btn { width: 40px; height: 40px; background-color: brown; margin: -40px 0 0 auto; font: 700 18px/40px "微软雅黑"; text-align: center; color: #fff; cursor: pointer; border-radius: 4px; /*不允许选中文本*/ user-select: none; }
.nav { /*宽度找父级:wrap*/ height: 48px; }
来源：https://www.cnblogs.com/zhouhao123/p/9789115.html