![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
ztfmlt
这个作者很懒,什么都没留下…
展开
-
css position
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。 3、absolute(绝对定位):生成绝对定位的元素,相对于 s原创 2017-10-29 14:05:25 · 173 阅读 · 0 评论 -
css 隐藏元素的方法
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } {原创 2017-10-29 18:52:04 · 181 阅读 · 0 评论 -
三栏布局
1、两边固定,中间自适应 1.1使用position:absolute和margin,这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"原创 2017-11-01 15:48:16 · 161 阅读 · 0 评论 -
原生js实现轮播
好久之前项目中用到的demo,当时写的时候算是又学了一边css.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0;} div{ width原创 2017-11-20 15:14:26 · 184 阅读 · 0 评论 -
retina屏 1px变宽问题的理解和解决方法
引出:这是移动端开发常遇到的问题,自己虽没做过移动端,但是感觉这是一个坑,所以记录下来,以后备用。 为什么border:1px看起来比1px要宽呢?网上查了一下发现,这里的2个1px实际含义是不一样的,viewport 的设置和屏幕物理分辨率是按比例而不是相同的. 移动端 window 对象有个 devicePixelRatio 属性, 它表示设备物理像素和 css 像素的比例, 在 retina原创 2017-11-23 15:22:18 · 258 阅读 · 0 评论 -
css BFC
BFC是什么? BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 怎么生成BFC 1、position为absolute或fixd; 2、float属性不为none; 3、diaplay为inline-block, table-cell, table原创 2017-12-12 14:19:22 · 185 阅读 · 0 评论 -
CSS清除浮动
在项目的实际开发过程中,经常会遇到浮动样式float。float带来方便的同时,也带来了一些麻烦,浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独原创 2017-11-19 23:11:56 · 175 阅读 · 0 评论