CSS

ywcm
141 阅读4分钟

五种布局方式

  1. 静态布局

     特点： 元素的尺寸一律使用px，宽度使用min-width，小屏横滚动，大屏居中显示
 缺点：不能随着屏幕尺寸变化而变化

  2. 流式布局

     特点：主要宽度划分区域使用%，高度使用px， 会随着屏幕的分辨率适配调整，但整体布局不变
 缺点：尺寸跨度大的时候会不能正常显示

  3. 自适应布局

     特点：使用@media根据不同的分辨率范围切换不同的布局，大小不变，位置变化
 静态布局的一个系列

  4. 响应式布局

     开头需加：<meta name="applicable-device" content="pc,mobile"><meta http-equiv="Cache-Control" content="no-transform ">
 特点：每个屏幕分辨率下面都会有一个布局范围，大小位置都会变化
 流式布局+自适应布局（媒体查询@media）
 缺点：媒体查询是有限的，不能一一枚举要匹配多个屏幕分辨率，工作量大，设计也需要几套

  5. 弹性布局

     特点：使用rem/em更加灵活，适合移动端，不过现在可以使用vh，vm

分割线

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex / display: inline-flex
兼容的话需要加display:box，加浏览器前缀

flex属性：
flex-direction：指定主轴的方向
row / row-reverse / column / column-reverse
flex-wrap: 项目超出容器长度如何换行
nowrap / wrap / wrap-reverse
flex-flow: flex-direction flex-wrap
justify-content：主轴对齐方式
flex-start / flex-end / center / space-around / space-between
align-items：交叉抽对齐方式
flex-start / flex-end / center / stretch /  baseline
align-content：多个交叉轴才起作用
flex-start / flex-end / center / stretch / space-around / space-between

容器内项目属性：
order：排序，小的排前面，默认为0
flex-grow：放大比例，占剩余空间的比例，默认为0
flex-shrink：缩小比例，默认为1，同比例缩小，设为0不缩小
flex-basis：分配多余空间之前，设定项目占主轴空间，默认为auto，项目本来大小
flex：flex-grow flex-shrink flex-basis
align-self：默认auto，继承容器的align-items，没有父元素默认stretch
也可单独设置flex-start / flex-end / center / stretch /  baseline

eg.自适应的正方形
vh，vw
width:30%; 
padding-top(bottom):30%;
height:0;
padding的百分比依据的是父元素宽度，高度的百分比依据的是父元素高度

分割线

h5、Android、iOS尺寸单位

像素px：组成屏幕的最小单位
分辨率：2560 x 1600（13英寸inch）
      意思是长2560个像素，宽1600个像素，对角线是13inch
ppi：每英寸包含的像素个数，屏幕像素密度
dpi：约等ppi，用于打印机，每英寸包含的开发像素点，屏幕像素密度
pt（iOS）：绝对长度单位，= 1/72 inch
dp（Android）：设备独立像素（css的px类似dp），相对长度单位
sp（Android）： (可缩放独立像素)相对长度单位
window.devicePixelRatio（h5）: 
    独立设备像素比 = dp(andriod)/px(h5)

分割线

CSS中的一些属性百分比值，相对于谁计算

  • font-size: 当前的字体大小等于100%
  • line-height: line-height的计算值就是当前字体的值乘以该百分比
  • width: 正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度
  • height:当父元素width属性为auto时，子元素宽度仍然可以使用百分比设置。但是对于height，只要子元素还是在正常文档流当中的，如果父元素的height属性为auto，则子元素height设置为百分比会被忽略(auto*100/100=NaN)
  • margin、padding:无论是垂直或水平方向，均是相对于父元素的宽度，正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度
  • 定位元素的left/right/bottom/top百分比值:top,bottom设置百分比定位是按包含块padding-box的高度来计算的，同样left,right,设置百分比定位是按包含块padding-box的宽度来计算的

Less

概述：less.bootcss.com/ 函数：less.bootcss.com/functions/

分割线

web尺寸获取

网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth

参考：www.cnblogs.com/wujindong/p…

分割线

avatar
文章
阅读
粉丝