解决Safari下input光标过大

  1. input {
  2. line-height: normal;
  3. }

设置浮层

  1. html, body {
  2. /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满整个页面*/
  3. width: 100%;
  4. height: 100%;
  5. }
  6. .shade {
  7. width: 100%;
  8. height: 100%;
  9. position: fixed;
  10. left:;
  11. top:;
  12. background: #000;
  13. opacity: 0.3;
  14. }

CSS绘制三角形

  1. .caret {
  2. width:;
  3. height:;
  4. border-top: 4px solid #000;
  5. border-left: 4px solid transparent;
  6. border-right: 4px solid transparent;
  7. }

文字超出显示省略号

  1. /*<p class='text-ellipsis'></p>*/
  2. .text-ellipsis {
  3. overflow: hidden;
  4. white-space: nowrap;
  5. text-overflow: ellipsis;
  6. }

清除浮动

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

  1. .father {
  2. overflow: auto;
  3. /*overflow: hidden;*/
  4. clear: both;
  5. zoom:; /*解决ie兼容问题*/
  6. }

2.父元素后添加伪元素

  1. .clearfix:after {
  2. content: '';
  3. display: block;
  4. height:;
  5. overflow: hidden;
  6. clear: both;
  7. }

3.同样可以使用如下方式(兼容IE)

  1. .clearfix:after {
  2. content: '';
  3. display: table;
  4. clear: both;
  5. }
  1. 注:使用 display: block/table;是因为定义 display block table 的元素前后会自动添加换行符。(HTML DOM display 属性
    4.在浮动元素后添加 div.clear
  1. .clear {
  2. clear: both;
  3. height:;
  4. overflow: hidden;
  5. }

5. 在浮动元素后面添加 br 元素

  1. <br clear="all">

注意:

1. clearfix 应用在包含浮动子元素的父级元素上

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

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

若html结构如下:

  1. body > div1 > div2 > div3

若要使得  div3 占满整个屏幕高度,CSS设置如下:

  1. html, body {
  2. height: 100%;
  3. }
  4.  
  5. .div1, div2, div3 {
  6. height: 100%;
  7. }

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

CSS书写顺序

  1. /* 位置属性 */
  2. position, top, right, z-index, display, float
  3.  
  4. /* 大小 */
  5. width, height, padding, margin
  6.  
  7. /* 文字系列 */
  8. font, line-height, color, text-align
  9.  
  10. /* 背景 */
  11. background, border
  12.  
  13. /* 其他 */
  14. animation, transition

锚点链接

h5中使用 id 作为锚点链接,如下:

  1. <a href="#item1"></a>
  2. <div id="item1"></div>

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

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

  1. .father {
  2. margin-right: -32px;
  3. }

判断有无滚动条

  1. if($("body").scrollTop()<=0 ){
  2. // do()...
  3. }

滚动条滚动到页面最底部

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

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

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

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

  1. div {
  2. position: fixed;
  3. top: 50%;
  4. left: 50%;
  5. transform: translate(-50%, -50%);
  6. }

隐藏滚动条

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

  1. .noScrollBar {
  2. overflow-x: hidden;
  3. overflow-y: hidden;
  4. }

Html / CSS常见问题 解决方案的更多相关文章

  1. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  2. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  3. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  4. JWT 身份认证优缺点分析以及常见问题解决方案

    本文转载自:JWT 身份认证优缺点分析以及常见问题解决方案 Token 认证的优势 相比于 Session 认证的方式来说,使用 token 进行身份认证主要有下面三个优势: 1.无状态 token ...

  5. CSS 常见问题笔记

    CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...

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

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  7. web移动端常见问题解决方案 (转)

    总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...

  8. 移动端web常见问题解决方案

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...

  9. CSS Bugs 解决方案

    说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...

随机推荐

  1. SCU3312 Stockholm Knights(最大流)

    题目大概说一个n×m的格子中,'.'代表空地,'#'代表障碍,'K'代表骑士,'D'代表目的地.骑士每走一步花一条,每一步可以往(+2,+3)(-2,+3)...八个方向走,问占领所有目的地最少要几天 ...

  2. BZOJ4310 : 跳蚤

    首先求出后缀数组,得到本质不同的子串的个数. 然后二分答案,每次先通过后缀数组求出第$mid$小的子串,然后贪心进行检验. 检验的时候,从后往前贪心,每次加入一个后缀,如果不能加了,那就划为一段. 时 ...

  3. JS来操作hover

    hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <s ...

  4. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  5. 12.编写一个Java项目,定义包,在包下定义包含main方法的类,在main方法中声明8种基本数据类型的变量并赋值,练习数据类型转换。

    注意:float虽然是4个自减,但是它的取值范围却比8个字节的long要大. float和double只能用来作科学计算或者是工程计算,但在商业计算中我们要用java.math.BigDecimal, ...

  6. gif 录制 屏幕 工具

    写博客或者提出问题时,很多时候需要gif才能说明问题 window录制攻略 https://pan.baidu.com/s/1gdCX1Gf mac录制攻略 第一步:打开mac内置的播放器QuickT ...

  7. NBU7.0 Image Cleanup作业在没有配置hot catalog backup的情况下失败,Status=1

    Issue NBU7.0 Image Cleanup作业在没有配置hot catalog backup的情况下失败,Status=1 Error NBU7.0 Image Cleanup作业失败, D ...

  8. HP StorageWorks MSL2024 Tape Libraries - Robotic Error Sub-Codes

    Robotic error sub-codes Mechanical initialization failure 02 Connection to slave robotic failed 03 E ...

  9. 移动Web应用开发入门指南——视觉篇

    视觉篇 智能移动设备由于发展历史短,但更新速度快,从而导致移动设备的物理属性差异巨大,其中一部分物理属性影响视觉,另一部分影响到交互.兼容或性能.对人类来说,至少有80%以上的外界信息通过视觉获得,视 ...

  10. emacs notepad notepad++ 撤销比较

    以前使用编辑器都是直接上手,未读过什么的文档了解.所谓撤销只是使用,也不了解究竟撤销到何处,阅读了emacs的文档才知道有许多区别呢. 输入this is a pen,然后一个个字符地删除到this ...