前端 | 零碎知识点-问题-技巧总结（1）

文章目录

• • 父元素适应浮动的子元素高度
  • 布局设置样式不生效问题
  • 修改代码后浏览器界面未变化
  • 提高图片加载性能
  • 简单实现响应式布局
  • 布局常用技巧
  • 常用样式设置

父元素适应浮动的子元素高度

当子元素设置浮动时，父元素要想将其包裹，一般需要为其指定宽、高。
但如果是动态网页，服务器需从数据库中动态获取数据，记录数是动态变化的。
这个时候，固定写死的宽、高就起不到很好的效果。
解决这一问题很简单的方式是：为父元素设置如下属性即可：

overflow: auto

或者

overflow: hidden

布局设置样式不生效问题

很有可能是使用了类选择器，其优先级没有子代选择器高，这时可以考虑改用 id 选择器。
遇到布局问题时多用浏览器的 F12 来查看相应组件的样式并调试。

修改代码后浏览器界面未变化

一般是由浏览器缓存引起的，可以尝试 ctrl+f5 强制刷新，加载最新的资源文件。

提高图片加载性能

通常是将所有图标放在一张大的图片中，然后通过 background-image 引入背景图片，测量出所需图标距离图片左上角的距离，最后通过 background-position 进行图标定位并设置好控件的宽度高度等。

简单实现响应式布局

html 文件中删除掉自动生成的如下两行语句：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">

最外层用一个大的 div 包裹内容，其宽度用可设为固定值

里面控件的尺寸需要用百分比设置

布局常用技巧

1. 一般可以在表单控件（如文本框）外添加一个 label 标签，通过引入 for 属性，可以实现点击文字选项自动聚焦到输入框中。
2. 实现输入框文本居中可以将高度 height 与行高 line-height 设为一致。
3. 布局时为了定位方便，可以先将 div 等元素的边框加上，或者填充背景，这样便可以较好地调整内外边距大小，布局完成后去掉边框或背景等即可。

常用样式设置

表单控件

提示文本：

placoholder = "xxx"

自动聚焦

autofocus = "autofocus"

必填字段

required = "required"

实例 demo

 <label for="tel">
     <span>
         <span class="mark">*</span>
         我的手机号码：
     </span>
 </label>
 <label>
     <input type="text" name="tel" id="tel" class="keyInput" 
     placeholder="输入手机号" autofocus="autofocus" required="required"
     pattern="^1[3-9]\d{9}">
 </label>

字体样式

修改全局字体样式

body {
    font-family: Arial, '微软雅黑';
    font-size: 14px;
}

表格控件

取消单元格边框线冲突

border-collapse: collapse;

设置表格偶数行的样式

tr:nth-child(even) {
    background-color: aquamarine;
}

设置表头（第一行）样式

tr:first-of-type {
    height: 40px;
    color: red;
    font-size:16px;
}

高频设置-表格边框线、文本居中

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

超链接

去下划线

text-decoration: none;