分针网—IT教育： Html / CSS常见问题的解决方案

最新推荐文章于 2024-08-13 21:58:24 发布
最新推荐文章于 2024-08-13 21:58:24 发布
阅读量295 收藏
点赞数
分类专栏： html 文章标签： html css 解决方案 教育 it

1. 解决Safari下input光标过大 

 
 

  
  

   
   input
   
    
   
   {
  
  

 
 

 
 

  
  

   
     line
   
   -
   
   height
   
   :
   
    normal
   
   ;
  
  

 
 

 
 

  
  

   
   }

2. 设置浮层 

 
 

  
  

   
   html
   
   ,
   
    body 
   
   {
  
  

 
 

 
 

  
  

   
    
   
   /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满整个页面*/
  
  

 
 

 
 

  
  

   
     width
   
   :
   
    
   
   100
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
     height
   
   :
   
    
   
   100
   
   %
   
   ;
   
     
  
  

 
 

 
 

  
  

   
   }
  
  

 
 

 
 

  
  

   
   .
   
   shade 
   
   {
  
  

 
 

 
 

  
  

   
     width
   
   :
   
    
   
   100
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
     height
   
   :
   
    
   
   100
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
     position
   
   :
   
    fixed
   
   ;
  
  

 
 

 
 

  
  

   
     left
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
     top
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
     background
   
   :
   
    #
   
   000
   
   ;
  
  

 
 

 
 

  
  

   
     opacity
   
   :
   
    
   
   0.3
   
   ;
  
  

 
 

 
 

  
  

   
   }

3. CSS绘制三角形 

 
 

  
  

   
   .caret
   
    
   
   {
  
  

 
 

 
 

  
  

   
       width
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
       height
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
       border
   
   -
   
   top
   
   :
   
    4px solid #
   
   000
   
   ;
  
  

 
 

 
 

  
  

   
       border
   
   -
   
   left
   
   :
   
    4px solid transparent
   
   ;
  
  

 
 

 
 

  
  

   
       border
   
   -
   
   right
   
   :
   
    4px solid transparent
   
   ;
  
  

 
 

 
 

  
  

   
   }

4. 清除浮动

1) 浮动元素父级添加样式 
 
 

  
  

   
   .father
   
    
   
   {
  
  

 
 

 
 

  
  

   
     overflow
   
   :
   
    auto
   
   ;
  
  

 
 

 
 

  
  

   
     
   
   /*overflow: hidden;*/
  
  

 
 

 
 

  
  

   
     zoom
   
   :
   
    
   
   1
   
   ;
   
      
   
   /*解决ie兼容问题*/
  
  

 
 

 
 

  
  

   
   }
2) 父元素后添加伪元素 
 
 

  
  

   
   .clearfix:after
   
    
   
   {
  
  

 
 

 
 

  
  

   
       content
   
   :
   
    
   
   ''
   
   ;
  
  

 
 

 
 

  
  

   
       display
   
   :
   
    block
   
   ;
  
  

 
 

 
 

  
  

   
       height
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
       overflow
   
   :
   
    hidden
   
   ;
  
  

 
 

 
 

  
  

   
       clear
   
   :
   
    both
   
   ;
  
  

 
 

 
 

  
  

   
   }
3) 同样可以使用如下方式（兼容IE） 
 
 

  
  

   
   .clearfix:after
   
    
   
   {
  
  

 
 

 
 

  
  

   
       content
   
   :
   
    
   
   ''
   
   ;
  
  

 
 

 
 

  
  

   
       display
   
   :
   
    table
   
   ;
  
  

 
 

 
 

  
  

   
       clear
   
   :
   
    both
   
   ;
  
  

 
 

 
 

  
  

   
   }
4) 在浮动元素后添加div.clear 
 
 

  
  

   
   .clear
   
    
   
   {
  
  

 
 

 
 

  
  

   
     clear
   
   :
   
    both
   
   ;
  
  

 
 

 
 

  
  

   
     height
   
   :
   
    
   
   0
   
   ;
  
  

 
 

 
 

  
  

   
     overflow
   
   :
   
    hidden
   
   ;
  
  

 
 

 
 

  
  

   
   }

注意点

1) .clearfix 应用在包含浮动子元素的父级元素上
2) 使用clear清除浮动会发生margin重叠显现,使用BFC清除浮动（在浮动元素的父元素上添加overflow: hidden;）则会把整个元素包起来，从而不会发生margin重叠现象

5. 设置元素div3高度为浏览器高度100%

若html结构如下:
body > div1 > div2 > div3
若要使得 div3 占满整个屏幕高度，CSS设置如下: 
 
 

  
  

   
   html, body
   
    
   
   {
  
  

 
 

 
 

  
  

   
     height
   
   :
   
    
   
   100
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
   }
  
  

 
 

 
 

  
  

   
   

  
  

 
 

 
 

  
  

   
   .
   
   div1
   
   ,
   
    div2
   
   ,
   
    div3 
   
   {
  
  

 
 

 
 

  
  

   
       height
   
   :
   
    
   
   100
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
   }
元素的高度100%只相对于父元素

6. CSS书写顺序

1) 位置属性
position, top, right, z-index, display, float
2) 大小
width, height, padding, margin
3) 文字系列
font, line-height, color, text-align
4) 背景
background, border
5) 其他
animation, transition

7. 锚点链接

h5中使用 id 作为锚点链接，如下： 
 
 

  
  

   
   <a href=
   
   "#item1"
   
   ></a>
  
  

 
 

 
 

  
  

   
   <
   
   div id
   
   =
   
   "item1"
   
   >
   
   <
   
   /
   
   div
   
   >

Yahoo军规

1） 尽量减少HTTP请求，将CSS、js、img资源进行合并
2） 使用CDN内容分发网络：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输地更快更稳定（将用户的请求导向到离用户最近的服务器节点（增加服务器副本）上，解决网络拥挤的状况）
3）增加Expire/Cache-Control头:在本地缓存中找到对应资源，若时间未过期，则直接使用此资源，不会发送http请求
4） 启用Gzip压缩
5）将CSS放在顶部
6）将JS放在最下面
7）避免在CSS中使用Expressions
8）将CSS和JS放到外部文件中
9）减少DNS查询
10）压缩CSS和JS
11）避免重定向
12）移除重复的脚本
13）配置实体标签Etag（使用特殊字符串标识某个请求资源版本）
14）使用AJAX缓存

8. 父元素宽度不够导致浮动元素下沉

为父元素添加负值的margin-right 
 
 

  
  

   
   .father
   
    
   
   {
  
  

 
 

 
 

  
  

   
     margin
   
   -
   
   right
   
   :
   
    
   
   -
   
   32px
   
   ;
  
  

 
 

 
 

  
  

   
   }

9. z-index

1）z-index 只针对定位元素 (absolute relative fixed )有效
2）若不同的 z-index元素有嵌套，则显示层级由父元素的z-index决定
3）若不同的 z-index 元素无嵌套，则按照显示顺序以及数值大小决定显示层级

10. 层叠水平（stacking level）——由低到高 (更符合加载功能和视觉呈现)

1）层叠上下文 background/border
2）负 z-index
3）块状水平盒子 block
4）浮动盒子 float
5）水平盒子 inline/inline-block
6）z-index: auto / z-index: 0
7）正 z-index

11. relative

1）relative 定位时，对其他元素不会有影响
2）relative定位时，若同时设置：top bottom : 则只有top有效，bottom无效 left right只有left有效，right无效
3）posittion: relative; 会提高对应元素的z-index

12. 判断有无滚动条 

 
 

  
  

   
   if
   
   (
   
   $
   
   (
   
   "body"
   
   )
   
   .
   
   scrollTop
   
   (
   
   )
   
   <=
   
   0
   
    
   
   )
   
   {
   
     
  
  

 
 

 
 

  
  

   
       
   
   // do()...
  
  

 
 

 
 

  
  

   
   }

13. 滚动条滚动到页面最底部 

 
 

  
  

   
   if
   
    
   
   (
   
   $
   
   (
   
   document
   
   )
   
   .
   
   scrollTop
   
   (
   
   )
   
    
   
   >=
   
    
   
   $
   
   (
   
   document
   
   )
   
   .
   
   height
   
   (
   
   )
   
    
   
   -
   
    
   
   $
   
   (
   
   window
   
   )
   
   .
   
   height
   
   (
   
   )
   
   )
   
    
   
   {

14. 滚动条滚动到指定元素位置 

 
 

  
  

   
   $
   
   (
   
   "html,body"
   
   )
   
   .
   
   animate
   
   (
   
   {
   
   scrollTop
   
   :
   
   $
   
   (
   
   "#elem"
   
   )
   
   .
   
   offset
   
   (
   
   )
   
   .
   
   top
   
   }
   
   ,
   
   1000
   
   )
   
   ;

15. 元素高宽未知时设置水平和垂直居中 

 
 

  
  

   
   div
   
    
   
   {
  
  

 
 

 
 

  
  

   
       position
   
   :
   
    fixed
   
   ;
  
  

 
 

 
 

  
  

   
       top
   
   :
   
    
   
   50
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
       left
   
   :
   
    
   
   50
   
   %
   
   ;
  
  

 
 

 
 

  
  

   
       transform
   
   :
   
    
   
   translate
   
   (
   
   -
   
   50
   
   %
   
   ,
   
    
   
   -
   
   50
   
   %
   
   )
   
   ;
  
  

 
 

 
 

  
  

   
   }

16. 隐藏滚动条

在出现滚动条的元素上添加样式： 
 
 

  
  

   
   .noScrollBar
   
    
   
   {
  
  

 
 

 
 

  
  

   
       overflow
   
   -
   
   x
   
   :
   
    hidden
   
   ;
  
  

 
 

 
 

  
  

   
       overflow
   
   -
   
   y
   
   :
   
    hidden
   
   ;
  
  

 
 

 
 

  
  

   
   }

原文链接：http://www.cnblogs.com/wx1993/p/5765335.html


本文转载自分针网

分针网
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Analogue-Clock-using-js:HTML-CSS-JS
04-08
在本项目"Analogue-Clock-using-js:HTML-CSS-JS"中，开发者创建了一个使用JavaScript、CSS和HTML实现的模拟时钟。这个时钟在网页上动态显示当前时间，展示了前端开发的基本技术和时间渲染的概念。以下是这个项目涉及...
使用 HTML、CSS 和 JavaScript的模拟时钟案例代码
04-14
在本文中，我们将深入探讨如何使用HTML、CSS和JavaScript创建一个模拟时钟的案例。这个项目结合了前端开发的三个核心元素，展示了它们如何协同工作来实现动态视觉效果。 首先，我们从HTML开始，它是网页内容的基础...
c/c++源文件：钟表问题
03-27
问题描述：输入两个数m,n，求m时n分钟分针和时针的夹角时多少度？ 输入：两个数m，n。 输出：时针与分针的夹角。
html+js+css时钟走动效果.zip
07-02
1. **HTML**：定义了一个时钟容器 `.clock`，里面包含了三个子元素，分别表示时针、分针和秒针。 2. **CSS**：定义了时钟的样式，包括大小、边框、位置等。`.hand` 类用于定义时钟指针的样式。 3. **JavaScript**：...
Clock:用js，html和css构建的时钟
04-22
1. **结构元素**：`<div>`元素被用来创建时钟的各个部分，如数字、时针、分针和秒针，它们分别对应JavaScript和CSS中需要操作的元素。 2. **ID和类**：HTML元素上的ID和类用于JavaScript和CSS进行选择和操作，比如`...
【python】使用字符串格式化渲染html
longforone的博客
08-13 376
将 CSS 中的“{}”全部替换为“{{}}”，这种方法是可行的。在 Python 进行字符串格式化时，“{{}}”中的“{}”及其他内容会被当作普通字符串处理，不会被格式化。但当我开启 PyCharm 的代码格式化功能时，原本的“{{}}”会被转换为“{\n{ }\n}”，因此使用起来较为麻烦，甚至不太能用。然而，由于 HTML 模板中存在 CSS 样式，其“{}”语法与 Python 格式化字符串的语法产生了冲突。接着，针对“body”部分使用关键字参数进行字符串格式化，如此一来，看起来也更为直观。
html超文本标记语言 (HyperText Mark up Language)
2302_78076476的博客
08-10 265
HTML（超文本标记语言）是构建网页的标准标记语言。它为网页提供结构和内容，允许开发者创建各种元素，比如文本、图像、链接、表格和表单等。是网页的基本骨架。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 525
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
最新HTML设计搜索表单
业精于勤荒于嬉，行成于思毁于随
08-10 419
页眉中包含表单，表单中只需包含label和Input.
css实现水滴效果图
yinge0508的博客
08-12 798
【代码】css实现水滴效果图。
如何使用css写三角形
z16638522031的博客
08-10 226
在这个示例中，我们首先创建了一个名为.parent-element的div元素，然后通过:before伪元素在其上方创建一个向下指向的黄色三角形。通过调整top值和边框宽度，你可以根据需要自定义三角形的大小和位置。你可以使用一个div元素，然后将其宽度和高度设置为0，接着定义透明和实色边框来实现三角形的形状。根据你需要的三角形样式（例如朝向、大小、颜色等），你可以调整边框的宽度和颜色。这种方法类似于第一种方法，但它允许你在现有的HTML元素上添加三角形形状，而不是使用一个单独的div元素。
使用tailwindcss轻松实现移动端rem适配
felix_alone2012的博客
08-10 430
本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）
uu0216的博客
08-07 1200
我们看到 在CSS引用时，我引用了3个css文件：reset.css ，style.css ，menu-y.css 并且，在引用 menu-y.css 时，还在这行代码的最后给它加了一个 id=cssfile 。为什么这样呢？因为我后面要通过js来改变这个ID的引用文件，达到用户前台切换样式表的目的。所以，这个id 一定不能忘了写。
css rem之2024
小漠007的专栏
08-10 443
为了避免使用js计算，我看到有些网站时用媒体查询给html设置fontSize的，这个方式也不失为一种解决方式，但是需要维护好几个设备宽度，并且并不全面，虽然问题不大，但是并不够完善。这个html fontsize的大小是通过js动态计算的，而这个js的运行时晚于html渲染的，所以会导致一个问题，进入页面时候会看到页面整体缩放一下。我们同一家公司里面的设计稿肯定必须得统一一个标准的，目前主流就是750，如果出现不同尺寸饿设计稿，这时候就应该是工作流程活着标准上面出现了什么问题了，
CSS选择器
不忘初心 方得始终
08-09 865
CSS之所以强大，很大一部分原因都要归结于它的选择器，非常丰富，特别灵活。本文不讲选择器的机制和原理，只对选择器进行汇总，把经常使用的列举出来，作为工具类文章，方便日后参考和查阅。
CSS 垂直居中显示的方法
qq_25416827的博客
08-13 312
* 使容器高度为视口高度 */align-items: center;/* 垂直居中 */justify-content: center;/* 水平居中 */place-items: center;/* 水平和垂直居中 */vertical-align: middle;/* 垂直居中 */line-height: 100px;/* 与容器高度相同 */text-align: center;/* 水平居中 */text-align: center;/* 水平居中 *//* 设定固定高度 */
CSS基础
weixin_45086164的博客
08-09 733
CSS基础
如何使用css给一个盒子加上好看的hover阴影效果
最新发布
ggq53219的博客
08-13 109
属性的值来创建不同的阴影效果，比如改变阴影的颜色、偏移量、模糊半径和扩展半径等。此外，你还可以添加多个阴影效果，只需用逗号分隔不同的阴影值即可。记得，在创建阴影效果时，要考虑到用户体验和页面的整体设计，避免使用过于刺眼或分散注意力的阴影效果。属性添加了一个平滑的过渡效果，这样当阴影变化时，它会以一种平滑的方式发生，而不是突然改变。属性允许你向元素添加阴影效果，你可以通过调整其参数来创建不同的阴影效果。要给一个盒子添加一个好看的hover阴影效果，你可以使用CSS的。），以创建一个更明显的阴影效果。
【CSS】可替换元素的控制属性：object-fit属性和object-position属性
weixin_57208584的博客
08-09 477
功效类似于background-size，但前者不可设置内容宽高的具体数值，而background-size可以。PS：background属性是利用css插入元素的背景图，在使用场景上还是有本质区别的。，有些情况下canvas、audio、object、option、以及。object-position属性规定了可替换元素的内容在框中呈现的。其展现的效果和内容是不受到css控制的，而是由外部资源来决定的。的理解，可以理解为依次移动设置的偏移量，就是最后的位置了。<img>或者<video>
"智慧工厂：工业互联网体系架构与建设方案
总的来说，工业互联网体系架构和建设方案的核心在于实现设备、人和数据的即时互联，通过综合布线系统实现数据的实时分析和优化控制，为智慧工厂的建设提供强大的技术支持。随着工业互联网的不断发展和应用，制造业和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值