写完了静态京东网页，有一些注意事项需要总结：
- ☆子元素浮动，父元素会撑不开。则会影响后续元素的布局。
解决方案有四种：
- 需要给父元素设置属性: overflow:hidden
- 给父元素设置固定高。
- 将父元素也一起浮动（这个会影响到父元素的同级元素，个人不太建议）
- 在父元素的最后一个子元素后边再多增加一个非浮动的子元素，然后给这个子元素加个clear. 例如
<div class="bigbox">
<div class="smallbox smallbox1"></div>
<div class="smallbox smallbox2"></div>
<div class="smallbox smallbox3"></div>
<div style="clear:both"></div>
</div>
- ☆ 并不是说父元素浮动，子元素也会跟着浮动。两者浮动是否都和对方是否浮动没关系，有四种情况（排除相对和绝对定位）：
- 父元素不浮动，子元素不浮动，子元素可以填充父元素
- 父元素浮动，子元素不浮动，子元素可以填充父元素
- 父元素浮动，子元素浮动，子元素可以填充父元素
- 父元素不浮动，子元素浮动，子元素不可以填充父元素
- ☆position:absolute和flot不能同时用
写网页的时候好几次将这两个同时对一个元素进行操作！！！这两个都是对一个block位置的控制，浮动后可以用margin和padding属性进行定位，但如果用position属性，就用top bottom left right对它进行定位。两个可以实现相同的效果，为什么要两个同时使用呢？若同时使用，flot会不起作用。
- ☆如何消除内联元素之间的默认间距（以span和a为例）
<div class="box">
<span style="background-color: red">金融</span>
<a href="#" style="background-color: red">商业</a>
</div>
结果：
所以说，就算几个内联元素或者水平块元素的大小之和刚好等于它们父元素的大小，还是会放不下的，原因就在这。
inline元素和inline-block元素之间默认有间距，可以通过以下方法消除它们之间的默认间距。
- 可以在html中直接把元素写在一行上，或者把闭合标签和第二个开始标签写在一行，或两行之间添加注释，或直接去掉闭合标签（最后一个闭合标签除外）
- 先设置子元素font-size,再设置父元素font-size：0px;
- 直接给元素flot:left
- ☆绝对定位后的元素，会自动设置display:inline-block,宽度需手动设置。例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>position</title>
<style>
.demo{
position: absolute;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
网页中并没有显示出来这个元素，给它加一个height属性后就可以出来。
在写顺丰静态网页的时候遇到输入文本框，查了资料，顺便总结下
- ☆遇到输入文本框，input和 textarea到底应该选哪一个呢？
<input type="text"/>
<textarea name="" id="" cols="30" rows="10"></textarea>
input标签：
input标签是单行文本框，不会换行，并且居中显示，可以通过size属性指定显示字符的长度（在没有限制宽和高的情况下，value属性可以指定初始值，maxlength属性指定文本框输入的最大长度。可以通过height和width设置宽和高（不会增加行数，还是一行） 例：
<input type="text" style="width: 100px; height: 60px;font-size: 15px" value="我是设置过宽和高的文本框"/>
结果：
textarea标签：
textarea是多行文本输入框（无默认的value属性值），文本区中可以容纳无限数量的文本，其中的文本默认是等宽字体，可以通过rows和cols属性来设置文本框的尺寸，也可以用CSS的height和width属性来设置。例：
<textarea cols="10" rows="4" style="font-size: 10px">我是通过rows和cols设置的宽和高,rows和cols都为6</textarea>
结果：
- ☆box-shade属性和box-radius属性
box-shade属性：
使用方法：
.classname{
box-shadow:[inset] offset-x offset-y blur-radius spread-radius
}
box-shadow参数解释
1：inset
有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。
2：offset-x
横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。
3：offset-y
纵向阴影的大小，值同offset-x。
4：blur-radius
阴影的模糊程度，值越大，阴影越模糊。
5：spread-radius
阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。
box-radius属性：
只有定了具体宽高的元素使用border-radius才会生效。
实现一个圆: radius：50%
☆超出文本省略号显示
*{
width:300px; //给固定宽
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
扫一扫
1993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
