开发中经常遇到的一些css样式问题
1、经常会遇到子元素浮动了,父元素就会探索到一个合适的值现在值是0,就要清除浮动操
<div class="search clearfix">
<div class="le"><img src="../static/images/logo2.png" alt=""></div>
<div class="mid">
<input type="text">
</div>
<div class="ri">
<img src="../static/images/posi.png" alt="">
<div>东莞市</div>
<img src="../static/images/bottom.png" alt="">
</div>
</div>
常用的清除浮动方法:
①、.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{*zoom:1;}
②、.clearfix:after {
content:"\200B";/*Unicode字符里有一个“零宽度空格”,也就是U+200B,它本身是不可见的,所以可以省略掉 visibility:hidden */
display:block;
height:0;
clear:both;
}
.clearfix{*zoom:1;}
另一种最新式方法:
④、.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after { clear:both; }/* For IE 6/7 */
.clearfix{*zoom:1;}
2、有时候经常两个模块会出现小缝隙,很可能是字体导致的,在外层加个font-size:0;进行处理
3、有时候需要内容适应窗口变化进行适应性
.ri > div{
word-wrap: break-word; /*允许对长的不可分割的单词进行分割并换行到下一行*/
word-break: break-all; /*规定非中文的换行规则,允许内容自动在单词内换行*/
overflow: hidden; /*超出的内容隐藏*/
text-overflow: ellipsis; /*超出的内容显示省略符号,clip直接修剪文本,string使用给定的字符串代表被修剪的文本*/
}
个人总结的,后面有补充的可以在评论区评论,稍后更新
开发中经常遇到的一些css样式问题的更多相关文章
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 后端数据中含有html标签和css样式,前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 项目开发中如何规范自己的CSS
1.CSS规范 - 分类方法 CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样 ...
- js中如何去获取外部css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- 多个css样式合并到一个“目录”css文件中
执行访问jsp后发现没有效果 同样的代码,在html中效果对比如下: 具体原因:不清楚,暂时记着~~~在jsp中不支持@import这种css样式的引用
- react中怎么写css样式?
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
- 利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作
由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范 ...
随机推荐
- Exadata中Infiniband交换机升级
Infiniband交换机的软件补丁包,随着软件版本的不同,其发布方式也有所变化,从如下图表可以看出,1.3.3-2这个版本是一个分水岭,这个版本及以前的版本,补丁包是单独下载的,而之后的版本,inf ...
- ie-"此更新不适应于此电脑"
cmd-dos命令 expand –F:* C:\update\Windows6.1-KB2533623-x64.msu C:\update\ dism.exe /online /Add-Packag ...
- 安装php过程中的错误和解决方式 configure: error: jpeglib.h not found
centos6.5 32位系统: checking for the location of libpng... yeschecking for the location of libXpm... no ...
- JS键盘事件之键控Div
自上次做的鼠标拖动Div之后,看到fgm.cc的例子,发现用键盘操控Div貌似也是十分有趣,这些DOM操作随着jquery的没落,虽然渐渐少用了,不过有些DOM操作还是必不可少的.现在是虽然数据为王( ...
- C# DataTable转List<T>--利用反射
/// <summary> /// 利用反射将Datatable转换为List<T>对象 /// </summary> /// <typeparam name ...
- web应用,http协议简介,web框架
一.web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...
- linux下拼接字符串的代码
DATA_DIR=/home/liupan/.navinsight/gm result="" for i in $(ls -a $DATA_DIR) do if [ $i != & ...
- 【Linux】Xshell-Linux常用命令
(1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...
- 原型设计工具 Axure RP 7.0下载地址及安装说明
Axure RP是产品经理必备的原型制作工具,因为很多同学是新手,在这里整理一下axure7.0的下载.安装和汉化流程,希望能够帮到大家. Axure RP是美国Axure Software Solu ...
- Maven的学习资料收集--(十)Myeclipse下创建Maven的Web项目
先要在MyEclipse中对Maven进行设置: 到此Maven对MyEclipse的支持设置完毕. 下面我们在MyEclipse中创建一个Maven标准的Web工程: New --> We ...