html、css笔记
1、标签：
1）<del></del> 中间画横线
2）<address></address> 地址（斜体）
3）<ol type="1/a/A/I/i" start="必须是数字" reversed="reversed">
<li></li>
</ol>
4）<ul type="disc/square/circle">
<li></li>
</ul>
5）<img src="img/1.jpg" alt="图片出错是出现" title="提示符">
6）<a href="" terget="_blank"></a>
a标签可做锚点功能：<a href="#id1"></a> <a href="#id2"></a>
a 可打电话：<a href="tel:13680756948"></a>
a 可发邮件： <a href="mailto:1141397857@qq.com"></a>
a 协议限定符 <a href="javascript:alert('1');"></a>
7）<form action="" method="">
<input type="" name="需要有name才能提交数据" id="" value="" />
<input type="radio" name="name相同的就成为一组" id="" value="" checked="checked"/>
<select name="">
<option value=""></option>
</select>
</form>
2、固定宽度的div里，加一长串不带空格的英文字母时不会换行的，中文就可以
要让英文换行，必须加空格，空格是文本分隔符
3、 空格
< <
> >
4、css权重 255进制
!important Infinity
行间样式 1000
id 100
class | 属性 | 伪类 10
标签 | 伪元素 1
通配符 0
5、属性选择器 ：[id = "only"]
父子选择器/派生选择器 ： div span a {} 自右向左的顺序
直接子元素选择器 ： div > .deno > em {}
并列选择器 ：div.demo{}
分组选择器 ： div,img {}
6、font-size : 设置字体的高
font-style : italic;
font-family : arial;
text-indent : 2em; 首行缩进
text-decoration : line-through; 中间横线
underline 下划线
7、float
1) 块级元素产生了浮动流。块级元素看不到他们
产生了 bfc 的元素和文本类属性的元素以及文本都能看到浮动元素
2) 清除浮动 clear : both; 这个必须应用在块级元素上才能生效！
3）使父级包住浮动的解决方法：
<div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div> .wrapper { border: 1px solid black; } .content { width: 200px; height: 200px; background-color: #00FFFF; float: left; } .wrapper::after { //利用伪元素清除浮动 content : “”; clear : both; display : block; }
8、inline-block: 文本类元素，能被文字分隔符分隔
例如几个img之间就会有空隙，所以最好的办法是把分隔符去掉。
9、行级元素：span strong em a del
块级元素：div， p ul li ol form address
行级块元素 img
10、五环
<div class="plat"> <div class="circlel"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> * { margin: 0; padding: 0; } .plat { width: 380px; height: 186px; position: absolute; //居中 top: 50%; left: 50%; margin-top: -93px; margin-left: -190px; } .circlel,.circle2,.circle3,.circle4,.circle5 { position: absolute; width: 100px; height: 100px; border: 10px solid red; border-radius: 50%; } .circlel { border-color: red; top: 0; left: 0; } .circle2 { border-color: green; top: 0; left: 130px; z-index: 1; } .circle3 { border-color: yellow; top: 0; right: 0; } .circle4 { border-color: blue; bottom: 0; left: 62.5px; } .circle5 { border-color: purple; bottom: 0; right: 62.5px; }
11、两栏布局
<div class="right"></div> <div class="left"></div> * { margin: 0; padding: 0; } .right { width: 100px; height: 100px; background-color: #8B008B; position: absolute; right: 0; } .left { height: 100px; background-color: #00FFFF; margin-right: -100px; }
12、bug1: margin 塌陷
<div class="wrapper"> <div class="content"></div> </div> .wrapper { width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; } .content { margin: 50px; height: 50px; margin-left: 50px; margin-top: 150px; //子元素的margin-top大于父元素的，这时子元素不会相对于父元素向下移动，而是带着父元素一起向下移动 }
解决方法：1、在父元素上加 border-top: 1px soild black; 但这方法不专业！不使用
2、bfc( block format context )
如何触发bfc：
(1) position : absolute; --> 把元素变成了 inline-block
(2) display : inline-block;
(3) float : left; --> 把元素变成了 inline-block
(4) overflow : hidden;
要 根据实际形况选择
13、bug2: margin 合并
<div class="demo1"></div> <div class="demo2"></div> .demo1{ width: 100%; height: 50px; margin-bottom: 200px; } .demo2{ margin: 100%; height: 50px; margin-top: 2000px; }
//两个盒子相隔的距离仍为 200px, 这个问题不需要解决，只需要给其中一个盒子设置margin ,并将数值调整到两个盒子需要间隔的距离即可。
14、文字溢出处理
单行文本：
p { width: 200px; height: 20px; line-height: 20px; border: 1px solid black; white-space: nowrap; //阻止文字换行 overflow: hidden; text-overflow: ellipsis; //文字超出容器宽度，用 ... 表示 }
多行文本：
p { width: 200px; height: 60px; line-height: 20px; border: 1px solid black; overflow: hidden; }
15、图片代替文字的方法
<a href="http://www.taobao.com" target="_blank" style="color: #f40;">淘宝网</a>
a {
display: inline-block;
text-decoration: none;
color: #f40;
width: 190px;
border: 1px solid black;
background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
background-size: 190px 90px;
height: 0px; //第一种方法
padding-top: 90px;
overflow: hidden;
height: 90px; //第二种方法
text-indent: 200px;
white-space: nowrap;
overflow: hidden;
}
16、两边边距随页面缩小而缩小，中间内容不变
<div class="wrapper"> <div class="content"></div> </div> .wrapper { height: 100px; } .content { margin: 0 auto; width：1200px; height: 100px; }
