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自带样式