1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--内容回顾 9 html：语义化的标签 10 div：块级标签 页面进行分割 11 span：行内标签 12 img 13 ul ol dl 他的孩子只能是li 14 a：href 链接地址 15 table 16 form 17 input 18 **************display、浮动、定位、z-index************* 19 行内标签：display：inline; 20 （1）在一行内显示 21 （2）不能设置宽高 22 （3）它的宽和高是内容的宽高 23 块级标签：display:block; 24 （1）独占一行 25 （2）可以设置宽高 26 （3）它的宽是父盒子的宽度100%； 27 行内块标签：img input display:inline-block; 28 （1）在一行内显示 29 （2）可以设置宽高 30 31 32 通过display属性对标签进行转化 none|inline-block|block 33 css选择器： 34 基础选择器和高级选择器 35 基础选择器： 36 标签选择器：选择标签的共性 37 类选择器：.box{} 38 id选择器：#box{} 只能选择器的特性，主要是为了js 39 *通配符选择器：重置样式 40 高级选择器器： 41 后代选择器 div p{} 42 子代选择器 div>p{} 43 组合选择器 44 div,ul,dl,,form{} 45 交集选择器 46 一个标签选择器 一个类选择器 47 伪类选择器：“爱恨准则” 48 a:hover{} 49 伪元素选择器：p：first-letter{} 第一个字符设置样式 50 p：：befer{ 51 content：‘阿根廷’ 52 } 53 p：after{ 54 content：‘.’； 55 display：block； 56 visibility：hidden 隐藏当前插入的内容 57 } 58 权重问题： 59 数数 60 行内的样式 > 内接样式 >外接样式 61 再去比较权重问题 62 id > 类 > 标签 63 继承来的属性权重为0，谁描述的近谁优先 64 继承和权重 65 记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。 66 但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。 67 盒模型：标准文档流 68 margin：调整兄弟之间的距离 69 padding：调整父子标签之间的位置，注意计算盒模型的大小 70 margin垂直方向的塌陷问题：塌陷只发生在垂直方向，不会再平行方向 标准文档流 71 标准文档流：标准文档流有很多限制，需要脱标：浮动 绝对定位 固定定位 72 浮动的现象： 73 脱标：脱离标准文档流 74 浮动的元素互相贴靠 75 浮动的元素会有字围效果 76 浮动永远不是一个盒子在浮动 77 浮动元素不区分行内或者块标签 78 浮动带来的好处：实现元素并排 可以按照自己的规则走（设置盒模型的宽高） 79 浮动带来的问题：固定高度可以解决浮动和标准流的问题 但是固定高度后续如果更改应该怎么办？ 80 所以不可以设置固定高度 需要根据浮动的高度匹配设置 81 清除浮动的四种方法：给父盒子设置固定高度 导航栏 尾部固定栏 82 内墙法 ：给最后一个浮动的元素添加一个块级标签，并且该标签设置属性clear：both 83 伪类选择器： 84 /*新浪首页清除浮动伪元素方法*/ 85 .clearfix:after{ 86 /*必须要写这三句话*/ 87 content: '.'; 88 clear: both; 89 display: block;} 90 content: "."; 91 display: block; 92 height: 0; 93 clear: both; 94 visibility: hidden 95 直接给父盒子添加一个：overflow：hidden 96 overflow ： visible 默认值。内容不会被修剪，会呈现在元素框之外。 97 hidden 内容会被修剪，并且其余内容是不可见的。 98 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 99 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 100 inherit 规定应该从父元素继承 overflow 属性的值。 101 脱标中的margin不会发生塌陷问题 不管水平和垂直方向。 102 浮动带来的问题： 103 标准流下的标签，兄弟之间使用margin调整位置，父子之间使用padding调整位置 104 脱标下的标签，可以使用margin和padding 105 浮动的盒子 margin：0 auto 不起任何作用 106 使用margin：0 auto;注意点： 107 1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center; 108 2.只有标准流下的盒子 才能使用margin:0 auto; 109 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了 110 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; 111 css单位选择：px绝对单位 em是相对单位 根据父盒子的字体大小设置单位 112 rem是只根据html的font-size来调整页面所有标签的盒模型大小 113 百分比单位 100% 114 line-height:单行文本可以使用这个垂直居中，使用多行文本不方便使用这个居中可以使用其他方法或者padding 115 圆：border-radius 设置这个属性可以切圆 116 使用background-position 把想要的图片切图 117 background-image:url(./1.jpg) 118 background-repeat: repeat|no-repeat|repeat-x|repeat-y 119 background-position: x y; 120 x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整 121 x和y如果是负值，切背景图，注意：一定要有明确的width和height "精灵图技术" 122 123 为什么要有精灵图技术？ 124 audio 125 video 126 script 127 link 128 a 129 img标签 src属性 得往后端发get请求 130 .jieyi{ 131 border: 1px solid red; 132 215px; 133 height: 215px; 134 background-image: url('./xinyuan.jpg'); 135 /*background-image: url(./1.jpg);*/ 136 background-repeat: no-repeat; 137 /*background-position: -182px -270px;*/ 138 border-radius: 50%; 139 background-attachment: fixed; 140 margin-left: 100px; 141 margin-top: 20px; 142 143 } 144 --> 145 146 </body> 147 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*div:after{*/ 8 /*content: '';*/ 9 /*display: block;*/ 10 /*!*visibility: hidden; 隐藏所有内容*!*/ 11 /*height: 100px;*/ 12 /* 100px;*/ 13 /*background-color: red;*/ 14 /*}*/ 15 /*div{*/ 16 /*margin: 0px;*/ 17 /*padding: 0;*/ 18 /*color: red;*/ 19 /* 100px;*/ 20 /*height: 100px;*/ 21 /*background-color: #333333;*/ 22 /*text-align:center;*/ 23 /*line-height: 0px;*/ 24 /*}*/ 25 /*p{*/ 26 /*display: block;*/ 27 /*-webkit-margin-before: 0px;*/ 28 /*-webkit-margin-after: 0px;*/ 29 30 /*}*/ 31 /*body{margin: 0px;*/ 32 /*padding: 0px;}*/ 33 /*div{*/ 34 /* 100px;*/ 35 /*height: 100px;*/ 36 /*background-color: red;*/ 37 /*text-align: center;*/ 38 /*line-height: 16px;*/ 39 /*}*/ 40 /*div{*/ 41 42 /* 100px;*/ 43 /*height: 100px;*/ 44 /*padding: 30px;*/ 45 /*background-color: red;*/ 46 /*margin: 10px;*/ 47 /*border: 10px violet solid;*/ 48 /*}*/ 49 /*html{font-size: 10px}*/ 50 /*body{*/ 51 /*!*font-size: 20px;*!*/ 52 /*}*/ 53 /*div{*/ 54 /* 10rem;*/ 55 /*height: 10rem;*/ 56 /*border: 1px solid red;*/ 57 /*text-indent: 1rem;*/ 58 /*}*/ 59 .circle{ 60 width: 100px; 61 height: 100px; 62 background-color: red; 63 border-radius: 100%; 64 } 65 </style> 66 </head> 67 <body> 68 <!--<div>--> 69 <!--文字文字文字文字文字文字文字文字文字文字文字文字文字文字--> 70 <!--</div>--> 71 <div class="circle"> 72 73 </div> 74 </body> 75 </html>