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:

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一起使用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348