day02-html进阶

1、去掉无序列表默认样式（ul,ol,dl都可以使用）

ul, ol{
list-stye:none;  // 去掉小圆点
margin: 0;
padding: 0;
}

2、选择器

<div class=“d1" id=“div1”>哈哈哈</div> // id如果设置相同不会报错，但是开发中不要重复
div{} // 标签选择器，直接用标签名选择
.d1{} // 类选择器，通过class选中元素
#div1{} // id选择器，通过id选择器找到元素，并设置样式
div p {color: red;} // 层级选择器，根据层级关系选择
.d1,.d2,.d3{} // 组选择器，相同的样式，统一设置，用逗号隔开
.d1:hover{} // 伪类选择器，悬浮状态的样式
.d1:before{} // 伪元素选择器，在d1标签前添加新的内容，特有样式content
.d1:after{} // 伪元素选择器，在d1标签后添加新的内容，特有样式content

3、文本属性

text-align: center; // 文字的水平对齐方式 left center right
text-indent:10px; // 首行缩进10px;
text-decoration: none; // 去掉下划线 默认值是underline
font-style:italic; // 斜体 默认值是normal
font-weight; bold; // 粗体 默认值是normal
line-height:23px; // 行高
font-family:”Microsoft Yahei”; // 字体
font: bold italic 15px/23px “Microsoft Yahei”; // 粗体 斜体 字号15px／行高23px 字体微软雅黑
word-wrap:break-word; // 设置后纯英文或数字，正常换行
word-break:break-all; // 让单词不单独占一行

4、overflow元素溢出样式

overflow:hidden; // 隐藏溢出的部分
overflow: scroll; // 添加滚动条，无论元素是否溢出，滚动条都有
overflow: auto; // 有溢出时，才有滚动条

5、盒子模型

元素就像一个盒子，宽高的计算如下：
宽= width + padding左右 + border左右
高= height + padding上下 + border上下

6、margin技巧

margin: 0 auto; // 距离上下0，左右居中。等同于代码margin-left:auto; margin-right:auto;
margin-top:-10px; // 设置为负值 反向移动 可以让盒子交错在一起
margin特性：margin上下重叠，左右不重叠，可以通过float去除这种特性。

7、margin-top塌陷

子元素设置margin-top，效果却是父元素margin-top起作用。解决如下：
方式一：给父元素设置border；
方式二：设置overflow：hidden；
方式三：（推荐）使用伪元素选择器设置.clearfix:before{content:””;display:”table”}

8、表单

<form action=“”， method=“"></form> // 表单，action提交的地址http://www.baidu.com，method提交的方式post，get
<label for=“name”>用户名：</label><input type=“text” id=“name”>// label的for属性和标签的id关联 点击label input标签就会有焦点
<input type="text" name="name”> //name属性 指定提交数据的key值
<input type="password" id="psw" name="psw”> // 密码输入框
<input type="radio" name="sex" value="0”>男 // 单选框，name相同 单选框才能有互斥效果
<input type="checkbox" name="interest" value="eat”>吃// 多选框，name需要相同，才能获取多个值
<input type="file”> // 选取文件
<textarea name="desc" id="" cols="30" rows="10”></textarea> // 多行文本输入框，resize:none;取消自由拖拽
<select><option value=“1”>北京</option></select> // 下拉框，option中的value属性，就是select的值
<input type="submit" value="注册”> // 提交按钮，提交表单
<input type="reset" value="重置1”> // 重置按钮，清空数据

9、input标签

<input type=”text”> // input没有结尾标签。特有属性placeholder, value； 特有的样式，outline:none,
type=“text” // 类型有text，button, password，radio，checkbox，file，submit
padding:0;border:0,outline:none; //去掉input自带样式