锐客网

  1. 首页 > it技术 > >

CSS布局&CSS居中&媒体查询

关于CSS布局&CSS居中&媒体查询三者的见解
css布局： 单栏布局：
  • 分为最大宽度和固定宽度，80%以上的页面使用该方法。
  • 为了编写简单和使用方便一般使用固定宽度。
双列布局：
  • 一列固定宽度，一列自适应宽度（在html中需要先写固定宽度再写自适应宽度）。
三栏布局：
  • 两侧固定宽度，中间自适应宽度（在html中需要先写固定宽度再写自适应宽度））。
圣杯与双飞翼布局：
  • 圣杯布局也双飞翼布局也都达到了上述的三栏布局效果；
  • 圣杯布局也双飞翼布局主要是为了突出中间的固定宽度的主体部分；
  • 二者在html中先写自适应宽度再写固定宽度，为了突出主体的重要性；
  • 圣杯布局在浏览器缩小到一定程度时候，会出现样式错误。但是在双飞翼布局中解决了上述问题，但是代码量也更大了。
水平等距排列：
  • 主要是使用浮动和负margin达到该效果。
流式布局：
  • 百分比布局，也叫流式布局，因为宽度是百分比，但是高度是按px来写的;
  • 适用页面特点：左侧固定+右侧自适应或者左右固定宽度+中间自适应（专业一点说法：关键元素高宽和位置都不变，只有容器元素在做伸缩变换）
flex布局：
  • Flexbox为css提供了功能强大的弹性布局方式。
  • 在PC端兼容性稍差，移动端是其天然适合的场景（关于flex布局后续有独立的一文作详解）。
display：flex;

grid布局：
  • 网格布局（Grid）是最强大的 CSS 布局方案。
  • 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
  • Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
    • Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
    • Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
  • 目前对于老式浏览器兼容性差，对与IE11仍有问题。
移动端布局：
  1. 设置meta；
  2. 适配是移动端的关键，一般使用媒体查询或者复杂的动态rem解决，使用flex也是移动端布局的常用方案。
css居中： 水平居中：
  • text-align:center; 给文字或者图片的父元素设置text-align：center，使文字或者图片达到水平居中的效果。对于其他行内元素一样有效，例如inline-block后的容器。
  • margin：0 auto；在块级元素中，给它设置一个宽度，并且使其margin-left等于margin-right便可达到水平居中的效果。因为块级元素充满一整行，所以需要设置一个宽度，否则就没有水平居中的说法。
垂直居中：
  1. 利用padding-left等于padding-right,达到垂直居中的效果；
  2. 绝对定位达到垂直居中效果；先设置元素position：当absolute；left：50px；top：50%； 元素为设置宽高的时候可以使用transform：translate（-50%，-50%）；在元素设置了宽高的时候，可以使用负margin其宽高的50%达到效果。前者兼容性稍差，不支持老式的浏览器，例如IE9之前的IE；
  3. vertical-align实现居中效果，vertical-align:middle; 可以让行内元素或者表格元素在它的父容器基线上对齐实现垂直居中;
  4. table-cell实现居中，把元素display：table-cell；并设置vertical-align:middle；（垂直方向）和text-align:center; （水平方向）; 可以实现垂直居中，但是display:table-cell会把元素渲染为行内元素，对于宽度会有一定影响，因为元素会收缩;
  5. display：flex；告诉容器其内容该如何布局
    写法：
    • dispaly：flex；(设置弹性布局)
    • align-items: center; （设置垂直居中）
    • justify-content:center; （设置水平居中）
CSS响应式——媒体查询 媒体查询：
  • 在css2已经可以使用@media，但是功能比较少；在css3后，@media变得更加强大；
  • css语法主要分为两种，一种的是@开头的例如@media，@import等等，还有一种就是选择器；
  • @media print｛｝主要用于开发者需要网页打印的样式与浏览器展示不一样时，用于书写打印文件的样式；
  • @media screen and （max-width： 990px）｛｝表示屏幕最大宽度为990px时，则大括号内容生效；
and操作符：
  • and操作符用于将多个media feature组合成一个查询，同时用于组合media type和media feature，一个基本的media query类似这样，一个media feature作用于所有的mediatype；由于现在一般都是展示在视窗上，所以也可以这样写：@media （min-width：700px）｛｝；
  • 如果只想在横向显示时应用就可以使用and操作符把media type和media feature结合起来；@media（min-width：700px; ）and(orientation:landsape){}; 这样上面的media query只在可视窗口最小是700px并且横向显示的时候才返回true；例如：在我们需要竖屏的时候且用户设备为横屏的时候，可以利用css让用户竖屏；
  • @media screen 表示在屏幕情况下看到的样式。
media features： 【CSS布局&CSS居中&媒体查询】media features是媒体查询的参数，例如上面：min-width：800px。
  1. width：浏览器宽度
  2. height： 浏览器高度
  3. device-width： 设置屏幕分辨率的宽度值；
  4. device-height： 设置屏幕分辨率高度值；
  5. orientation： 浏览器窗口的方向是纵向还是横向，当窗口的高度值大于等于宽度时该特性值portrait，否则为landscape；
  6. aspect-ratio：比例值，浏览器的纵横比；
  7. devce-aspect-ratio：比例值，屏幕的纵横比；
  8. color： 设备使用多少位的颜色值，如果不是彩色设备，值为0；
  9. color-index： 色彩表的色彩数；
  10. monochrome： 单色帧缓冲器每个像素的字节；
  11. resolution： 分辨率值，设备分辨率值；
  12. scan： 电视机类型设备方式，progressive或interlace；
  13. grid： 只能指定两个值0或1，是否基于栅格的设备。
媒体查询的用法：
  • 注意先后顺序，写的时候一般放在下方，还要注意选择器的权重，一般来说媒体查询的权重高一些。@import也可以引用媒体查询
  • 响应式一般要配合浮动一起使用，也可以和flex和grid一起使用。

    推荐阅读


    上一篇：我等你到下辈子

    下一篇：半箫琉璃