对于大的背景图片
background: url(.....) no-repeat top center；
每次写样式前一定要先清除所有的默认样式
* {
margin: 0;
padding: 0;
}
让块级盒子水平居中对齐
margin: 100px auto;
行内元素必须转换为块元素才能设置宽和高
display: block；
但是如果又想为行内元素设置宽和高，还希望保持在同一行，可以转化为行内块元素
display: inline-block;
加小竖线的方法|但是这样的效果是斜线，因此需要修改em的样式
<em>|<em>
font-style: normal;
input表单中，单选款或者复选框必须指定name属性，且值相同。而且还可以使用label标签将要选择的内容放在一起进行选择
<input type="radio" name="sex" id="nan"><label for="nan"><img src="./images/man.jpg">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="./images/women.jpg">女</label>
浮动布局中，要想让一个子元素浮动，其他的子元素也必须设置为浮动
清除li标签的小圆点
li{
list-style: none;
}
清除a标签的下划线
a{
text-decoration: none;
}
子代选择器：只选择亲儿子，不选择孙子
.header>a
虚线边缘
border-bottom: 1px dotted #ccc;
当设置了盒子的宽度或者高度时，对其使用padding会撑开盒子，具体要看是哪个方向padding了，这个时候应该计算一下，修改被撑开的高度或者宽度
文字垂直居中
height: 40px;
line-height: 40px;
当导航栏字数不一致时，可以通过设置padding来保持各个块之间的距离相等
文字加粗和不加粗
font-size: 400; //不加粗
font-size: 700; //加粗
段落首行缩进2字符
p{
/* 首行缩进2字符 */
text-indent: 2em;
}
button是由边界的，如果要用图片作为按钮的背景，应该先去掉button的border
border: 0;
input、button等属于行内块元素，行内块元素并排的时候之间会有空隙， 所以需要改成浮动，就可以紧密连在一起了
背景半透明
background: rgba(0, 0, 0, 0.3);
导航栏通常使用li+a的标签组合进行完成
盒子阴影
box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.3);
形成一个两行的方块，并且方块中间有间距
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
/* 把li的父亲ul修改的足够宽，使得一行能装开5个盒子就不会换行了 */
.box_bd ul{
width: 1225px;
}
.box_bd ul li{
float: left;
width: 228px;
height: 270px;
margin-right: 15px;
margin-bottom: 15px;
}
设置浮动后，父元素高度塌陷，可以指定父元素的高度，或者清除浮动，在父元素上加上清除浮动的类名
<ul class="clearfix">
<li></li> /*li全部设置了浮动*/
<li></li>
</ul>
/* 清除浮动代码 */
.clearfix::before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
出现外边距合并问题时，将margin改成padding就不出现问题了
自定义列表标签
<dl>
<dt>title</dt>
<dd><a href="#">1</a></dd>
<dd><a href="#">2</a></dd>
<dd><a href="#">3</a></dd>
<dd><a href="#">4</a></dd>
<dd><a href="#">5</a></dd>
</dl>
注意使用并集选择器合并相同的样式代码
相对定位：
相对的是自己原来的位置
不脱标，保留原来的位置
绝对定位：
相对的是祖先的定位，如果祖先元素没有定位，则相对document文档来移动，如果祖先元素有定位，则相对于最近一级有定位的祖先元素进行移动
脱标，不保留原来的位置（可以用来压着别的图片）
因此在使用的时候要注意：子绝父相
固定定位
相对的是可视窗口
脱标，不保留原来的位置
如何固定在版心右侧位置:
1.让固定定位的盒子left: 50%.走到浏览器可视区(也可以看做版心)的一半位置。
2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。
<style>
.w{
width: 800px;
height: 1400px;
background-color: pink;
}
.fixed{
position: fixed;
left: 50%; /*1.走到浏览器可视区(也可以看做版心)的一半位置*/
margin-left: 400px; /*2.走版心宽度的一半*/
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
定位总结：
绝对定位的盒子居中：
加了绝对定位的盒子不能通过margin:0 auto水平居中，通过以下方法实现水平和垂直居中。
box {
position: absolute;
/*1.left走50%父容器宽度的一半*/
left: 50%;
top: 50%
/* 2. margin 负值往左边走自己盒子宽度的一半*/
margin-left: -100px;
margin-top: -100px
width: 200px;
height: 200px ;
background-color: pink ;
}
定位特殊特性
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小，不会占满一整行了
脱标的盒子不会触发外边距合并的问题：如浮动元素、绝对定位、固定定位元素
浮动元素只会压住它下面标准流的盒子,但是不会压住盒子里面的文字(图片)，可作文字环绕效果，但是绝对定位(固定定位)会压住下面标准流所有的内容。
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
