css
mr_orange_klj
这个作者很懒,什么都没留下…
展开
-
去除inline-block元素间间距的N种方法
一、现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:.space a { display: inline-block; padding: .5em 1em;转载 2017-06-29 21:39:32 · 377 阅读 · 0 评论 -
div使用margin:0 auto居中后,如何使子div实现流式布局
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图:部分代码如下:1 style>2 #div1{border:1px solid red;float:left;}3 #div2,#div3{float:right;border:1px solid blue;}4 style>5 6 div id="div1原创 2017-06-28 16:16:26 · 837 阅读 · 0 评论 -
css通用小笔记03——浏览器窗口变小 div错位的问题
我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充。一.使用min-width属性:我们先看看下面这段代码(html): 1 html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 head>转载 2017-06-29 22:26:27 · 802 阅读 · 0 评论 -
css: display:inline-block的几个问题
display:inline-block使用起来有几个问题,这里总结一下。1.inline-block元素即使没有内容,父元素也会被撑开.用以下代码设置元素样式: 效果:虽然内部的div没有任何内容,而且审查元素的高度为0,但是父元素被撑开了。原因:inline-block的元素 没有内容的时候,父元素会根据 font 产生一个 line原创 2017-07-18 15:18:09 · 661 阅读 · 0 评论 -
inline-block元素与父div底边之间的间距问题(inline-block与vertical-align:baseline)
在一些情况下,inline-block的元素距离父div底边会有距离,让我们看一下例子:例子1,两个inline-block元素,设定了固定的宽高,第一个有文字,第二个没有文字:<!--css--> .div1{ background-color: red; color: white;}.div2{ background-color: blue; dis...原创 2017-07-18 15:17:38 · 2059 阅读 · 0 评论 -
div在宽度设为100%时,若设置左边填充,则右边将会溢出的问题
问题详情:设置body,html宽度高度均为100,然后在body中添加一个div,该div宽度高度也为100%;然后设置该div的padding-left为100,则浏览器会出现滚动条,该div会在窗口右侧溢出100px解决办法:css中添加如下代码:* { -webkit-box-sizing: border-box; -moz-box-sizing: border-b原创 2016-03-03 18:32:05 · 3758 阅读 · 2 评论 -
你知道line-height怎么用么?(转)
转自:https://blog.csdn.net/liuzijiang1123/article/details/77499001?locationNum=9&fps=1今天学习了一下line-height这个属性,然后试着自己总结一下 参考文章:http://www.imooc.com/article/7767 http://www.cnblog...转载 2018-07-22 20:33:31 · 425 阅读 · 0 评论 -
float:left float:right 与 clear:left clear:right
float:left的元素后跟clear:right,将不会撑开容器,只有设置clear:left或clear:both才行。原创 2018-08-11 12:38:15 · 432 阅读 · 0 评论 -
html5 div内放置img标签,div下边框与图片底边有一定距离
解决办法:设置img的vertical-align属性为"middle".原因:首先,浏览器并没有所谓的"HTML 5 模式",而是只有三种:怪异模式(Quirks),几乎标准的模式(Limited Quirks)和标准模式(Standards),其中几乎标准的模式和标准模式之间的唯一差异在于是否对元素给定行高(line-height)和基线(baseline)。几乎标准模式中,如果标转载 2017-04-20 20:53:45 · 5434 阅读 · 0 评论 -
css3 box-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8转载 2017-04-19 23:06:24 · 244 阅读 · 0 评论 -
CSS的选择器
最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器;css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。1.基础的选择器选择器含义示例*通用元素选择器,匹配任何元素转载 2016-12-13 17:05:36 · 224 阅读 · 0 评论 -
css选择器
什么是选择器呢?每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素1.1 类别选择器类选择器根据类名来选择前面以”.”来标志,如:.demoDiv{color:#FF0000;}在转载 2015-01-16 15:02:23 · 439 阅读 · 0 评论 -
css:first-child、last-child、nth-child、 nth-last-child
w3cschool对这此类选择器的说明:fistst-child:选择属于其父元素的首个子元素的每个 元素,并为其设置样式:p:fist-child{ background:#ff0000;}应当这样理解:“其父元素”中的“其”是指定的元素。“首个子元素”是指定元素的父元素的首个子元素。“首个子元素的每个元素”是指定元素的父元素们的首个子元素们中的指定元素.原创 2015-01-16 15:47:35 · 503 阅读 · 0 评论 -
div页面居中
要使div在页面居中,可以将div定位设为absolute,左右为50%,margin_letf=-width/2 margin-right=-height/2。这样的缺点是浏览器窗口小于div大小时,由于填充值是负的,因此左边和上边有一部分被遮住了。因此最好在此基础上用js加以控制:在body的onresize属性中,定义一个判断窗口大小的方法,需要用的的属性:窗口宽度 document原创 2015-01-16 14:44:14 · 1191 阅读 · 0 评论 -
css样式表之冲突问题详解[转]
CSS样式表的问题是老生常谈了。笔者早在10年前就粗略地接触过一些,那个时候还在上大学^_^。不过,随着时间的推移,好多东西都忘的一干二净。偏偏又自认为已经学过。唉,笔者编写Web UI之时,便总在这些地方犯错误。下面回顾一下css样式表的冲突问题,基础知识,css高手见笑了。冲突的来源: css层叠样式表对同一个标签具有多种定义方法,而每种方法的影响范围(顺序、具体性)却有权重转载 2015-01-16 14:54:01 · 3716 阅读 · 0 评论 -
背景图片自适应大小(css3)
body { background: url(/happytime/img/index.jpg) no-repeat center center fixed; background-size: 100%;//此处要注意,可以填cover也可以填100%。建议填100% } 备注:折腾了俩个多小时原创 2015-01-16 15:12:12 · 22321 阅读 · 0 评论 -
html body 100% 解析和应用
常见的html, body { height: 100%;} 解释 这是为了兼容各个浏览器。IE 处于混杂模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度,这样的话可以使布局适应浏览器窗口大小。窗体 》body》div转载 2015-01-16 15:20:13 · 928 阅读 · 0 评论 -
为页面设置页脚的方法
比如设置一行版权声明,必须居于页面底部。如果页面内容很多,则该页脚被挤到最下;如果页面没有内容,则位于浏览器最下方。css代码:html,body { height: 100%; /* The html and body elements cannot have any padding or margin. */}/* Wrapper for page co原创 2015-01-16 15:19:11 · 1191 阅读 · 0 评论 -
chrome浏览器自动填充表单导致输入框样式改变
如果启用了自动填充表单,chrome浏览器会自动填充表单,自动填充的表单组件会使用.webkit-autofill的css样式,背景为浅黄色。且改属性是!import的。如果表单内的组件采用了自定义的样式,将可能被覆盖。原创 2015-12-11 17:18:19 · 1315 阅读 · 0 评论 -
CSS 多类选择器
写的代码多了,就会发现,自己越来越无知了,总以为html css很简单,已经掌握的很熟练了,其实我还差的很多。 平时没有用过css的这种写法 .a.b{display:block;} 上网一查才明白。 参考:http://www.w3school.com.cn/css/css_selector_class.asp1、在 HTML 中,一个 class 值中可能包含转载 2016-12-13 16:54:24 · 189 阅读 · 0 评论 -
div在父级元素中浮动定位
如果要让一个div呈现浮动在父级div中的情况,可以将父级div的定位设置为“relative”,将需要浮动覆盖的dv定位为“absolute”,再定位left、top等数据。这样该div会无视其他同级div的布局,在父级div中呈现绝对位置。’fixed‘定位让div相对于浏览器窗口的绝对定位,实现在浏览器窗口中固定div的位置,使其不管网页滚动条的变化,始终在浏览器窗口中某一位置固定。原创 2015-01-16 14:46:25 · 9826 阅读 · 2 评论