html/css——静态网页开发遇到的问题及解决方法(壹)

1、截取的网页为什么比原网页要大？
原因：有可能是 本身电脑的缩放布局超出100%。
要点：一般网页是不可能超出1100~1300px之间的，用ps测量时，超出了，要马上引起注意！！！
解决办法：
2、ps中，给原图划 标尺线时，总会耗时比较长
原因：我们直接给原图拉标尺线，把图放大，一块为1px，标尺线，会出现在1px的任何地方，不容易，精准的拉到位。
解决办法：可以用选框工具做辅助，因为选框不会出现在1px，的任意地方，只会，在1px与1px之间。


3、网页查看(ctrl+shitf+I)出现如下情况，该如何解决？
4、如何设置，才能才能固定多行文本的宽高？
注意：多行文本标签开始标签与结束标签，不能用enter换行写。

5、下拉框，想要多选时，怎样设置？
解决方法：a、属性size的值大于一；b、在select开始标签中，再加属性multiple=“multiple” 即可。
6、在表单中，如何点击文字，就会选中输入框？
解决方法：用label标签，属性for的值，必须和input中的id名一致。

<label for="name">姓名</label>
<input id="name" type="text" placeholder="请输入姓名"/>

7、表单元素中，提交时，输入框中，不能为空，如何设置？
解决方法：验证，某个表单元素的内容是否为空，在input中添加属性required/required=“required”.即可。

<input type="text" placeholder="请输入用户名" required/>

8、标签自带的盒子模型：
a、 浏览器默认的margin值为8px！
解决办法： margin:0;
b、 h1~h6标签 自带外边距
解决办法： margin:0;
c、 p段落标签 自带一个 字体的 外边距
解决办法：margin:0;
d、 button input 自带边框 内边距 (并且，鼠标选中时，会出现选框。)
解决办法： border:0; padding:0;

e、 ul,ol,li dl,dt,dd,自带 内边距 外边距（还自带特有的列表样式）
解决办法：margin:0 padding:0; list-style:none;


9、取下文字下划线
text-decoration:none;(underline下划线；overline 上划线；line-through 中划线)
10、如何解决行内元素与行内块元素，代码换行造成的间隙
解决方法：给父级元素设置font-size:0; 子级单独设置
11、上下两盒子设置垂直方向的margin值，上盒子的下间隙，和下盒子的上间隙不会同时显示，只会显示数值大的。尽量使用margin-bottom来设置2元素间的间隙
12、块元素的的第一个子盒子设置margin-top值会作用到父级上
解决方法：
方法一：给父级设置border-top；
方法二：给父级设置over-flow:hidden;
方法三：给父级设置padding