欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-10 11:52:29
...

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

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

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;
相关标签: html5 css