html笔记

样式重置

/*写css之前必须进行样式重置*/

*{

margin:0;

padding:0;

}

---

盒子模型的传参

margin:10px;//给一个参数 四个方向都会设置值

margin:10px 20px;//给两个参数 第一个top,bottom 第二个right,left

margin:10px 20px 30px;//第一个top 第二个right,left 第三个bottom

margin:10px 20px 30px 40px;//top right bottom left

---

html标签分类

块标签 ：独占一行、能够设置width，height

div、h1~h6、p、ul、li、dl、dt、dd

内联标签 :并排显示、不能设置宽和高、不能设置margin-top与margin-bottom

a、span、em、strong

内联块：并排显示、能够设置width、height

img、input、button

---

标签分类的原理

div{

diaplay:block;//底层属性，写不写都有

}

span{

display:inline;//底层属性，写不写都有

}

img{

width:100px;

margin-left:inline-block;//底层属性，写不写都有

}

标签之间的display属性是可以相互转换的

---

水平居中

让内联元素和内联块元素水平居中

1.改变元素自身的display属性 display:blcok; margin-left:auto; margin-right:auto;

2.给他爹text-align:centenr;

---

css选择器

后代选择器

.parent>p{

color:red;

}

选中全部的后代

.parent p{

background-color:green;

}

分组选择器//以逗号隔开

div,p,.one{

color:red;

}

伪类选择器

p:hover{

background-color:#eee;

}

---

选择器的优先级排序

id>class>元素选择器

---

选择器的权重

嵌套的越深，权重越高

.child{

color:red;

}

.parent .child{

color:green;

}

*************************

hh

---

背景

背景重复

background-repeat:no-repeat;

背景位置

background-position:center;

background:red url(***) no-repeat center;//颜色 图片 重复 位置

---

文本

文本修饰

text-decoration:none;

文本缩进

text-indent:40px;    //lorem可快速写一段话

颜色

color:red/#fff/rgb(71,196,121)

字体

font-family:    //可设置多种字体，以便浏览器不支持某种时有后补

font-style:italic;//斜体

font-weight:900;//字体宽度

---

列表

list-style:none;

---

css的继承

子元素不设置width，它会继承父元素的width（仅仅发生在块元素之间）

父元素不设置height，它会继承子元素的height（仅仅发生在块元素之间）