CSS
Liekkas_BX
心中的两个梦想汇成一句话:天道酬勤,追梦晚霞。当你眼中只看到了梦想,哪管路途中的阻碍?
展开
-
IE6 兼容问题整理
1、IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明 2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距) 解决方法:display:inline3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字的上面与转载 2016-10-17 17:27:31 · 347 阅读 · 0 评论 -
html —— table 标签 与 display:table 样式
目录:一、table 相关标签介绍及使用二、div 布局设置display:table一、table 相关标签介绍及使用相关标签按包含关系从大到小排序:table ——> col | colgroup | thead | tbody | tfoot;thead | tbody | tfoot ——> tr;tr ——> th | td;说明:table:重要属性有border(单...原创 2018-04-01 11:52:55 · 14143 阅读 · 0 评论 -
bootstrap笔记 —— @media 与 Bootstrap 网格系统
Bootstrap 的网格系统是基于媒体查询(media query)实现的,即根据当前设备的尺寸等信息控制具体采用哪种 css样式。一、@media 媒体查询(一)、基础语法:@media mediatype and|not|only (media feature) { CSS-Code;}几点说明:1、mediatype取值:all(所有设备)|p原创 2017-10-21 19:40:23 · 5861 阅读 · 0 评论 -
CSS —— 继承body 确保最高优先级
样式优先级:内联>内部css>外部css.知道这还不够,有时样式较多时,从某个样式class 中定义某个元素或类的样式,可能没效果,最简单粗暴的方法:直接继承body,如使用layui的layer时,要修改默认按钮的样式,css可如下设置,之后通过skin 属性使用layer-ext-yourskin:/* 通过body前缀,是为了确保你皮肤的优先级你可以通过调试工具重置更多样式原创 2017-10-19 10:12:09 · 1428 阅读 · 0 评论 -
CSS —— html元素类型与居中问题详解
深刻理解盒子模型与元素类型,有助于快速确定布局方式:一、盒子模型从外到里:margin、border、padding、content。关键:height与width指的是content文本区的尺寸。二、元素类型及本质区别1、inline:内联元素。本质特点:默认baseline对齐,且content尺寸刚好包含文本(所以设置width、height无效)原创 2016-07-25 15:05:32 · 633 阅读 · 0 评论 -
CSS —— 元素hidden与opacity=0的区别
之前调试页面时偶然发现,hidden与opacity看似都不可见,但实有区别:visibility:hidden则相当于完全从文档流中删除了该元素,但所占据的尺寸仍然保留。opacity:0则仅仅不可见,但仍可被浏览器发现,也就能触发各种事件。通过浏览器调试工具即可得出此结论。简单的验证: 研究透明度与隐藏的区别 body{ text-align: cent原创 2016-07-25 18:41:02 · 8932 阅读 · 0 评论 -
CSS —— html布局选择与注意事项
一、定位1、相对定位:relative按不同元素类型默认布局出现在应该出现的位置,可设置相对移动位置。为默认值。注意事项:外边距合并情况,仅当父元素与子元素都是默认定位(relative),或指定为relative,且父元素合并边没有border时才会发生。2、绝对定位:absolute(1)、所有父类元素都没指定position时,相对于body绝对定位。(2)、原创 2016-07-25 22:13:58 · 2436 阅读 · 0 评论 -
CSS —— z-index与background重叠研究
一、z-index规定页面的重叠次序,对指定position为relative、absolute的元素有效(fixed没有细究)。二、background通过自己的探索发现,元素在z轴向分为三层,示意图如下:说明:其从上到下叠放次序依次为:content内容层——背景图片层——背景颜色层原创 2016-07-26 00:47:13 · 16995 阅读 · 0 评论 -
CSS —— !important 与 CSS Hack
一、!important使使用的样式具有最高优先级(优先于内联样式、内部样式)。1、W3C解释:CSS企图创造一个平衡作者和用户之间的级层样式表。默认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被html文件中里的定义覆盖,反之不行;书写在下面的定义可以覆盖写在上面的定义,反之不行。然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CS转载 2017-04-08 09:17:14 · 650 阅读 · 0 评论 -
css —— 选择器优先级及jQuery遍历元素常用方法
一、部分常用css选择器1、子元素选择器:>作用:只选取直接子元素。优点:使html元素层次很清晰的呈现。2、相邻兄弟元素选择器:+作用:选取相邻兄弟元素中的第二个。适用于兄弟元素(可以是不同元素)第一个与后面的(某个或所有)样式不一样的场合。例:背景1背景2择若为div内部两个标签设置不同背景,css可为:div a { backgroun原创 2016-07-26 09:23:23 · 2401 阅读 · 0 评论 -
CSS —— html 自动换行
涉及三个属性:white-space:规定如何处理空白,是否换行,默认值:normal(超出时自动换行);word-wrap:normal (默认,只在内容的断点换行,即不能断开单词)或 break-word(长单词内也可换行);word-break:normal(默认,只在内容的断点换行)或 break-all (允许断开单词)、keep-all(只在半角或连字符处允许换行)。 ...原创 2018-07-28 14:41:37 · 16424 阅读 · 0 评论