css
_cris
一场渐行渐远的旅途。
展开
-
CSS基础知识
转载:CSS基础作者:刘宁Leo https://segmentfault.com/a/11900000133257781 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2 bo...转载 2018-04-17 16:24:26 · 563 阅读 · 0 评论 -
如何修改input输入框placeholder文字颜色
开发过程中在使用input、textarea标签placeholder作为提示性文字时,往往文字颜色达不到我们的预期效果,因此需要对placeholder属性提示文字默认颜色进行修改,修改的过程也很简单添加样式即可。input::-webkit-input-placeholder { color: #dadada; } input::-moz-placeholder { ...原创 2018-09-06 11:15:14 · 14399 阅读 · 0 评论 -
CSS权重计算
什么是CSS权重?1)权重决定了你css规则怎样被浏览器解析直到生效。2)当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。3)每个选择器都有自己的权重。如果两个选择器同时作用到一个元素上,权重高者生效。CSS中选择器的不同,对应的权重不同1)行内样式 权重1000<div class="drc-video" style="width:100px">...原创 2018-06-20 12:57:08 · 725 阅读 · 0 评论 -
结合实例通俗易懂理解BFC布局
写在文前在面试或者看文档资料的时候,我们经常会看到一个概念BFC,网上去搜,资料一大堆。好的坏的,看的一脸雾水。于是,博主查阅各种资料,摘录,来写一下BFC布局。BFC概念1. BFC是什么?我们先来理解两个概念:Box、Formatting ContexBox: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 di...原创 2018-06-19 17:31:51 · 983 阅读 · 0 评论 -
HTML中table标签的跨多行和多列布局方法
先放一张布局效果效果图在实现这一布局效果时,主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列,在其他行或者列中也是占位的。比如:第一项项目基本信息是跨过5行,因此在接下来的4行中,第一列已经是默认被占了,行中的td列是从第二列开始布局;最后一行,项目得分占据6列,因此第二个td实际对应的是该行的第七列。具体实现代码如下:HTML布局代码:<!-- 明细表 --&...原创 2018-06-25 16:51:13 · 34725 阅读 · 1 评论 -
table中td标签中内容过长时,设置td长度固定的方法
在使用table标签时,我们设置了td的宽度且设置了单行溢出加省略号的样式,但是发现,td还是随内容的多少会撑开,如下图:这样就不符合我们预期想要的效果,我们只需要在table标签上加属性: width="100%" style="table-layout:fixed"cellpadding,cellspacing这两个属性用于清除td标签的间隙。此外td设置样式:overflow: hidde...原创 2018-06-25 16:36:59 · 19623 阅读 · 2 评论 -
最全position定位方式解析
position: 定位方式position: static; position: relative; position: absolute;position: fixed;position: inherit;position: initial;position: unset;position: sticky;通常,我们总是知道前面4种方式,突然发现原来现在有7种方式了。下面依次来解...原创 2018-06-08 12:06:55 · 6604 阅读 · 0 评论 -
2019最新Web前端经典面试试题及答案,持续更新
Ps: 文章所述内容,来源渠道平时积累以及网上摘录。按日期持续更新...目录:转载请注明来源。-2018/6/8 1.position的定位方式2.描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程3. 描述一下渐进增强和优雅降级之间的不同-2018/6/101.如何解决跨域问题2.XML和JSON的区别?3.快速排序的思想并实现一个快排?-2018/6/16w...原创 2018-06-08 11:38:18 · 25710 阅读 · 3 评论 -
修改input输入框placeholder文字默认颜色
input输入框,placeholder默认颜色修改,照如下添加样式:input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } input:-moz-placeholder, textarea:-moz-p...原创 2018-06-22 10:43:25 · 8361 阅读 · 0 评论 -
手机端h5页面,消除行内块级元素(inline-block)间距的有效办法
博主在做项目的时候,遇到行内块级元素因为换行带来的间隙的问题。在PC端时,使用父级元素添加样式:letter-spacing:-0.5em,直接子代元素添加样式:letter-spacing:normal;可以很容易的解决间隙带来的问题,但是在手机端采用通用的方式,并没有生效。经过多种方法比对之后,最有效的办法如下:// 父级元素标签,添加样式 font-size: 0;保险起见,额外再加上let...原创 2018-05-29 14:29:57 · 2399 阅读 · 1 评论 -
margin与padding值设置为百分数时,其值的计算参照最近父级元素width
在前端开发过程中,设置样式参数margin 与 padding 值为百分数时,其具体值的计算方法需参照最近父级的width计算。1)exp1: margin-top 为百分数其中标签的嵌套关系为:<div class="boxparent"> 父级box <div class="listbox"> 子box </d...原创 2018-09-21 14:55:16 · 1398 阅读 · 0 评论