CSS
文章平均质量分 63
苏金标
给生活一个大大的微笑
展开
-
CSS——position:relative和position:absolute
position:relative1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置。(在父级节点的content-box区定位,父级节点有文字的话,元素的默认位置则是紧随文字)2. 不会改变行内元素的display属性。3. 并没有脱离普通流,只是视觉上发生的偏移。position:absolute1. 如何定位浮动? 设置了TRBL 相对最近的设定了position:rel原创 2021-10-11 15:56:52 · 143 阅读 · 0 评论 -
input 如何设置placeholder的样式
.content input::-webkit-input-placeholder {/* WebKit browsers */color: #999;font-size: 16px;}.content input::-moz-placeholder {/* Mozilla Firefox 19+ */color: #999;font-size: 16px;...原创 2019-06-03 17:57:40 · 3090 阅读 · 0 评论 -
前端布局神器display:flex
2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么?Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex...转载 2019-05-29 10:35:59 · 120 阅读 · 0 评论 -
纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构: 1 2 3 <divclass="box box1"> <span>...转载 2019-05-29 10:20:15 · 113 阅读 · 0 评论 -
margin的合并问题
marging的合并是指:块级元素的上外边距与下外边距有时会合并为单个外边距。所以这里要注意:是两个块级元素,内联元素是不包含在里面的 是上下不包含左右 只发生在当前的文档流中竖值方向上发生了会产生什么效果1.第一种情况是父子HTML代码: <div class="big"> <div class="child">...原创 2019-05-28 17:11:22 · 1456 阅读 · 0 评论 -
:nth-child(n)的一些理解
:nth-child(n) 对于一个从安卓转前端的人来说很容易理解错,我先不不说这个字段怎么理解。以用例来说:HTML的代码:<div class="div test"><div>我是第一个孩子</div><h2>我是一个标题头</h2><div><div>我是子div</d...原创 2019-05-28 11:36:30 · 6874 阅读 · 3 评论 -
block,inline和inline-block概念和区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。 大体来说HTML元素各有其自身的布局级别(block元素还是inlin...原创 2019-05-30 10:51:36 · 99 阅读 · 0 评论