css
Aman920_
这个作者很懒,什么都没留下…
展开
-
css中的inline-block
inline-block,行内块元素。Inline-block元素写在前面的结论:从外部看带有一些块级元素的特征(占行),同时内部看又拥有行内元素的特征(横向排列),有点像浮动。下面以button元素为例,默认display为inline-block初始效果:三个块级div,一个button,未设置浮动,默认形式.当单击按钮后:由效果可以看出黄块处于浮动,灰原创 2016-12-08 11:39:23 · 528 阅读 · 0 评论 -
水平垂直居中处理,总有你想要的
temp .out{ width: 100%; background-color: yellow; height: 100px; } .in{ width: 30%; height: 50px; background-color: green; } .out1{原创 2017-04-22 16:15:29 · 521 阅读 · 0 评论 -
真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧:text-align:justify;text-justify:inter-ideograph;但问题是,我怎么就看不到效果呢?无论是英文还是中文,在IE和chrome下都不起作用。后来,终于在StackOverflow上找到解决方法了。样式:转载 2017-05-16 12:56:35 · 9278 阅读 · 1 评论 -
flex语法及练习
FLEX布局1.在外层容器设置display:flex; 内部的节点称为项目。2.flex有两条轴,水平的主轴,和垂直的交叉轴3.容器的6个属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-contentflex-direction表示主轴的方向:row(水平向右(默认))/row-r原创 2017-07-10 21:03:40 · 712 阅读 · 0 评论 -
多情况下的边界塌陷问题
情况一:相邻块级容器的上下边距塌陷,这种实际遇到的少,因为不是非要都设置上下边距解决方法有2(欢迎补充):1.将块级设置为浮动2.使用padding来实现同样的表现效果情况二:父级容器和子级容器的上边距塌陷解决方法有3:1.父级设置border,可以设置为透明,2.父级设置padding-top3.父级设置overflow属性,触发b原创 2017-07-12 00:42:09 · 1040 阅读 · 0 评论 -
伪类:before和:after的使用
刚刚在用伪类:before实现一个小三角组合(使用border),发现一个以前没注意到的事情,就是我在:before中设置了 border:10px solid transparent;border-right:10px solid blue; 结果出现了一个竖着的梯形,这我就很奇怪了啊,我将height设置成0后也还是纹丝不动,于是就在控制台中查看一下,它的display属性值为inline,原创 2017-06-11 22:24:26 · 1115 阅读 · 0 评论 -
input标签的size和maxlength属性探究
同样是在复习中发现的一些问题,input的size属性表示显示的字符数,而maxlength表示最多输入字符的个数,网上也都这么说的,在w3c、mdn中查看也没细说。maxlength属性没啥问题,和它说明的特性一样敬业,补充一点:就是设置的默认值长度可以不受maxlength限制。但是这个size属性就搞不懂了,我在chrome中将size设置为1,可以显示5个字符,设置为2呢可以显示6个字符,你原创 2017-08-08 15:25:43 · 4285 阅读 · 0 评论 -
box-shadow理解与记忆
起念用的时候总对参数的顺序记忆不清,以及具体要设置多少,主要是blur和spread这两个值的影响没有认真搞清楚定义和用法box-shadow: h-shadow v-shadow blur spread color inset;理解如同box-shadow这名字,可以理解为阴影也是个box,只是被放在了下面h-shadow v-shadow是这个阴影盒的左上角坐标位置blur官方称为模糊距离原创 2017-08-26 02:14:54 · 960 阅读 · 0 评论 -
input type为text和button的不对齐问题 以及 之间的小空格
今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊”就像这样子:咦 怎么会 我看看 代码没毛病啊 同样的height、同样的line-height,各有一个width(复习一下,input属于inline-block元素)倒腾了好久 感觉甚是诡异 现在回想 怎么没有赶紧百度下 踩过这个坑的前辈们也是不少啊 首先要说明的是这个现象只会出现在Chrome中 没想到这次会是C原创 2017-05-25 22:27:17 · 10401 阅读 · 1 评论 -
16种方法实现水平居中垂直居中
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文:16种方法实现水平居中垂直居中水平居中1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin:0 auto即可.3) 若子元素包含 float:left 属性, 为了让子元素水平居转载 2017-04-22 09:46:47 · 2222 阅读 · 0 评论 -
sublime3 less高亮以及提示
参照不少网友的做法都行不通,网上很多看着都像不只是在说代码提示和高亮,还包括了编译,本人是用koala,所以暂时也没想着去倒腾node,所以只想在sublime3上让less高亮提示可以这么干。 1、安装Git bash 2、进入到sublime 的package目录下(Preference =》Browse packages) 3、运行gitbash,输入 git clone https:/原创 2017-02-21 20:23:22 · 1851 阅读 · 0 评论 -
less基础语法
参照不少网友的做法都行不通,网上很多看着都像不只是在说代码提示和高亮,还包括了编译,本人是用koala,所以暂时也没想着去倒腾node,所以只想在sublime3上让less高亮提示可以这么干。 1、安装Git bash 2、进入到sublime 的package目录下(Preference =》Browse packages) 3、运行gitbash,输入 git clone https:/原创 2017-02-21 22:27:40 · 542 阅读 · 0 评论 -
关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...
今天在做题的时候遇到这样一道题:看一下感觉不难,然后就撸起来了。大体采用绝对定位,ie的盒模型(比标准盒模型好酸多了),感觉应该没啥问题的,走你->主体代码是这样的: *{ margin: 0; padding: 0; } html,body{ height: 100%; } heade原创 2017-03-25 12:06:10 · 15449 阅读 · 1 评论 -
css3属性中background-clip与background-origin的用法释疑
困惑在哪里?background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提转载 2017-04-20 17:35:45 · 514 阅读 · 0 评论 -
CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
标签的情况tag:nth-child(n):很好理解。1.各层级中的第n个元素;2.且该元素是tagtag:nth-of-type(n):和上面不一样。1.在各层级中第n个出现的tag元素,与它是在父级下的第几个位置无关。类的情况.class:nth-child(n):和tag模式基本是一致的。1.各层级中的第n个元素;2.是class类.class:nth-of-typ原创 2018-01-30 11:20:23 · 1695 阅读 · 0 评论