css 一些特殊样式解决
css 特殊样式解决
- 一、前言
- 二、小问题
- 2.1 img 标签，图片为空时 去掉默认边框
- 2.2 子元素的 margin 会突破父元素
- 2.3 input 输入框的高度与 button 还有 select 都是不同的，怎么让他们变得一致。
- 2.4 首行缩进
- 2.5 怎么让 Chrome支持小于12px 的文字
- 2.6 两个 div 一个固定宽度，另一个填充满窗口
- 2.7 文本省略
- 2.8 margin 与 width:100% 的问题
- 2.9 felx 布局与 line-hieght
- 2.10 文本靠底部对其
一、前言
html ，css 特殊的问题。
二、小问题
2.1 img 标签，图片为空时 去掉默认边框
这个是谷歌高版本加的特性，当图片的src加载失败，就会这样显示，但是很丑，反而让我们需要额外的写 css 去掉这个样式。
如果 img 给了固定的宽高，并且初始 src 为 null，或者是 src 错误显示 alt 时，img 标签就会存在默认边框，很丑的。需要解决掉。
标签下面的两个属性可以解决，具体就看自己是怎么写的，哪个比较好解决。
/* 1 */
img[src=""] {display: none;
}/* 2 */
img:not([src]) {opacity: 0;
}/* 3 */
img[src=""]{
opacity: 0;
}/* 4 */
<img src="abc.jpg" οnerrοr="src='123.jpg'" />/* 5 */
<img src="error.jpg" οnerrοr="whenError(this)">
<script>
function whenError(a){a.οnerrοr=null;a.src='http://avatar.csdn.net/1/E/E/1_qq_27080247.jpg';console.log('图片出错的时候调用默认的图片');
}
</script>
2.2 子元素的 margin 会突破父元素
# 问题1：
# 父元素与外界的边界原来希望是 10px 的，但是由于 `第一个子元素`设置的 margin-top:20px; 导致这个父元素与外界的边界变成 20px 了。
# 或者是 `最后一个子元素`设置的 margin-bottom:20px;导致这个父元素与外界的边界变成 20px 了。
<div style="height:200px;width:200px;background:red;">
</div>
<div style="height:200px;width:200px;background:gray;margin-top:10px;" ><div style="height:100px;width:100px;background:gold;margin-top:50px;"></div>
</div>
# 问题 2：
# 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。
`<div style="height:200px;width:200px;background:gray;"> ``<div style="height:100px;width:100px;background:gold;margin-top:50px;"></div>`
`</div>`
这个 bug 原因：
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
所有毗邻的两个或更多盒元素的 margin 将会合并为一个 margin 共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding 或 Border分隔。
“嵌套”的盒元素也算“毗邻”，也会 Collapsing Margins。
解决办法：
1、修改父元素的高度，增加 padding-top 样式模拟（padding-top：1px；常用）。或者对应的是 padding-bottom 样式
2、为父元素添加 overflow：hidden; 样式即可（完美）！！！！！！！！！！！！！！！！！！！！！这个简单好用
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
2.3 input 输入框的高度与 button 还有 select 都是不同的，怎么让他们变得一致。
原因：其实是因为 padding 导致的，修改 padding 也可以的，但是我们还是直接使得盒子模型是 border-box 就不需要考虑 padding 的问题了。
<style>input,select {height: 50px;}input{box-sizing: border-box;}</style><div>如何解决input和select的宽高不一致问题</div><input type="text"><input type="button" value="22222"><select name="" id=""></select>
2.4 首行缩进
text-indent: 2em; /* 首行缩进 */
2.5 怎么让 Chrome支持小于12px 的文字
谷歌浏览器中，默认的中文汉字最小字体是12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px
<style>p span{font-size:10px;transform: scale(0.8);-webkit-transform:scale(0.8);}
</style><p><span> 10px</span>
</p>
2.6 两个 div 一个固定宽度，另一个填充满窗口
<div class="parents"><div class="div1"></div><div class="div2"></div>
</div>
.parents {display: flex; height: 100px;line-height: 100px;background: pink;text-align: center;.div1 {width: 100px;height: 100%;background: yellow;}.div2 {flex: 1;background: green;height: 100%;}
}
.product-box {width: 100%;margin: 10rpx;display: flex;flex-direction: row;align-items: center;/*flex 的子项在父元素中 垂直方向居中*/text-align: center; /*元素 在 盒子中居中 ，可以被继承*/image {width: 100px; /*flex 的子项设置固定宽度，就不会缩放 flex:0*/}.groupProduct-name {flex: 1;/*flex 的子项 设置为 1 表示的是会缩放*/}.price {width: 100px;/*flex 的子项设置固定宽度，就不会缩放 flex:0*/}
}
2.7 文本省略
单行文本后面多余的部分省略号表示
/* 三行配合完成 */
text-overflow: ellipsis;/* 溢出省略 ellipsis：翻译为 省略*/
white-space: nowrap; /* 文本强制不换行； */
overflow:hidden;/* 溢出部分隐藏 */
2 行文本后面多余的部分省略号表示 (
css3)！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
注意的问题是设置了这样之后，就不能设置高度了，设置了的话会发现，文字太多的话，高度还有的话，就会发现第 3 行就会出来了.
- 如果有布局的需求，就给它的父级去添加高度就好了
- padding 也不能有的，不然第 3 行还是会出来的
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 2; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*//* display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。*//* autoprefixer: off 这一行注释要加上，它是代码的一部分。不然下面一句有的时候不生效，-webkit-box-orient: vertical; 不兼容*//*-webkit-box-orient: vertical; 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*//* -webkit-line-clamp: 2; 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/
2.8 margin 与 width:100% 的问题
.parents{width: 100%;background: red;.child {width: 100%;height: 100px;margin: 20px;background: blue;}
}
/* 看上面的图片， 就知道这样设置是错误的，这个就是 盒子模型的原理了。
除了 ie 浏览器是 box-sizing:boder-box 之外其他的都是 box-sizing:content-box
不管是什么浏览器 margin 都不会包含在 width 里面的。
而我们上面的样式设置中 width: 100%; 已经占满了父元素的 100% 了，还要设置一个 margin: 20px; 当然就会超出了背景颜色是涵盖到 border 边框上，margin 是不包括的。*/
/* 想要得到理想中的效果，可以在父元素去设置 padding 值,父元素的 padding 会包含在 父元素的 width 里面的。*/
.parents{width: 100%;background: red;padding:20px;.child {width: 100%;height: 100px;/* margin: 20px; */background: blue;}
}
/* 子元素之间希望有间隔的话可以设置上下的，不要设置左右的，设置就会超出了呀 margin: 20rpx 0; */
2.9 felx 布局与 line-hieght
2.10 文本靠底部对其
使用相对，绝对定位的办法，其他的办法也有。
.parents {width: 100%;height: 50%;position: relative;.child{position: absolute;bottom: 0;}
}
/* 这个办法，并不成功，至少在微信小程序是不成功的 */
display:table-cell;
vertical-align:bottom;
css 一些特殊样式解决相关推荐
- html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了（中文问题，换行问题，分页，页眉页脚，水印）,html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...
- 十分有用的CSS样式解决y轴滚动条隐藏功能
十分有用的CSS样式解决y轴滚动条功能 一条代码搞定哦 -webkit-scrollbar{ display:none } 虽然这条代码还未正式上线但是可以先使用
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- colordialog通过哪属性取其颜色_IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1...
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- idea修改css，js样式浏览器没更新问题
idea修改css,js样式浏览器没更新问题 最近写项目经常遇到这么个问题,在项目里更改了css源文件,target或者out文件目录下css也更新了,但到了浏览器上就是没更新,具体更没更,大家可以在 ...
- CSS(二)文字样式
CSS之文字样式 一.文本颜色:color 二.缩进:text-indent 三.行高:line-height 四.字母间隔:letter-spacing 五.水平对齐:text-align 六.文本 ...
- CSS 字体文本样式
文章目录 CSS字体文本样式 字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格 综合简写 ...
- css 图片旋转样式
文章目录 前言 一.css 图片旋转样式 总结 前言 提示:这里可以添加本文要记录的大概内容: 一.css 图片旋转样式 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务 ...
- 【读书笔记】【WebKit技术内 幕（二）】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、
文章目录 前言 Something great 第4章 资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈 第5章 HTML解释器和DOM模型 DOM模 ...
最新文章
- 删除除了指定扩展名文件其他全部删除
- 入侵无需密码? 雅虎数据泄露调查新进展
- C# Winform下载文件并显示进度条
- python数据类型的转换_python 数据类型间转换
- 工作215：点击按钮报错
- Javascript面向对象研究心得
- diy机器人图片 手绘纸箱_废物利用，她用几个纸箱让家里变成动物园，孩子回家乐坏了！收藏...
- Java边缘填充_任意画一个多边形，用边缘填充算法填充
- Fault Tolerance 要求、限制和许可
- FPGA学习笔记---时序逻辑与组合逻辑分析比较
- 数据有为 智在决策 | 观远数据2019智能决策峰会圆满落幕
- MYSQL 慢查询日志分析
- 怎么用计算机技术预测蛋白质结构,蛋白质结构预测及方法介绍 一搜索无重复 - 生物科学 - 小木虫 - 学术 科研 互动社区...
- [Linux]搭建Jdk7与Tomcat7
- 如果将网络工程师分级你是那个级别？
- 自定义容器实现类似Windows屏保功能
- 微光互联 TX800-U 扫码器无法输出中文到光标的问题
- Odoo免费开源信息化平台满足所有企业应用场景与需求
- 计算机等级考试第一次报什么,计算机等级考试一年是考两次，3月和9月各一次 如果第一次没有考过第二次考要再报名缴费吗？...
- 乐安全 支持x86_不用苦等五一 四款近期主打平板推荐