），表格前后没有换行符。table-row-group 此元素会作为一个或多个行的分组来显示（类似）。table-header-group 此元素会作为一个或多个行的分组来显示（类似 ）。table-footer-group 此元素会作为一个或多个行的分组来显示（类似 ）。table-row 此元素会作为一个表格行显示（类似）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 table-column 此元素会作为一个单元格列显示（类似 table-cell 此元素会作为一个表格单元格显示（类似和 ） table-caption 此元素会作为一个表格标题显示（类似 inherit 规定应该从父元素继承 display 属性的值。
属性值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> title > < linkrel = " stylesheet" href = " https://cdn.bootcss.com/normalize/8.0.0/normalize.css" > < style> .container { background-color : #868686; width : 100%; height : 300px; } .content { background-color : yellow; width : 100px; height : 100px; position : static; left : 10px; } style > head > < body> < divclass = " container" > < divclass = " content" > div > div > body > html > 对 content 的 position 设定 static 后，left就失效了，而元素（content）就以正常的 normal flow 形式呈现。
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" > < title> title > < linkrel = " stylesheet" href = " https://cdn.bootcss.com/normalize/8.0.0/normalize.css" > < style> .container { background-color : #868686; width : 100%; height : 300px; } .content_0 { background-color : yellow; width : 100px; height : 100px; } .content_1 { background-color : red; width : 100px; height : 100px; position : relative; } .content_2 { background-color : black; width : 100px; height : 100px; } style > head > < body> < divclass = " container" > < divclass = " content_0" > div > < divclass = " content_1" > div > < divclass = " content_2" > div > div > body > html > 相对于normal flow中的原位置来定位。
.content_1 {background-color: red;width: 100px;height: 100px;position: relative;/* 这里使用了relative */left: 20px;/* 这里设置了left和top */top: 20px;}
效果图：
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" > < title> title > < linkrel = " stylesheet" href = " https://cdn.bootcss.com/normalize/8.0.0/normalize.css" > < style> .container { background-color : #868686; width : 100%; height : 300px; margin-top : 50px; } .content { background-color : red; width : 100px; height : 100px; position : absolute; top : 10px; } style > head > < body> < divclass = " container" > < divclass = " content" > div > div > body > html > 生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外
fixed相对于window固定，滚动浏览器窗口并不会使其移动，会脱离normal flow。
文档流是相对于盒子模型讲的，文本流是相对于文章段落讲的。
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
我们通常会遇到这样一个问题，给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。
css在盒模型中规定
通常我们只关注了相邻div之间的margin合并而没有考虑父级和子集的合并。我们一定要注意，嵌套也属于毗邻的哟。
解决方案
让父级具有“包裹性”将父级over-flow设为hidden将父级display设为inline-block将父级float或absolute改变父级的结构给父元素设置padding给父元素设置透明border
table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> title > head > < style> .left { background-color : red} .right { background-color : green} style > < body> < table> < tbody> < tr> < tdclass = ' left' > td > < tdclass = ' right' > td > tr > tbody > table > body > html > 浮动元素是脱离文档流的，但不脱离文本流。
那么它有什么特点呢？
对自身的影响：
float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
对兄弟元素的影响：
对父级元素的影响：
高度塌陷
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> title > head > < style>
* { margin : 0; padding : 0;
}
.container { width : 200px; background-color : red;
} .left { background-color : yellow; float : left; height : 50px; width : 50px;
}
.right { background-color : yellow; float : right; height : 50px; width : 50px;
}
style > < body> < divclass = container> < spanclass = left> span > < span> span > < spanclass = right> span > div > < divclass = " container" style =" height : 200px; background : blue" > div > body > html > 效果图
解决办法：
父元素设置 overflow: auto 或者 overflow: hidden
.container::after { content : '' ; clear : both; display : block; visibility : hidden; height : 0;
}
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> title > head > < style>
* { margin : 0; padding : 0;
}
.container { width : 400px; height : 200px;
} .left { background-color : yellow; float : left; height : 100%; width : 100px;
}
.right { background-color : red; margin-left : 100px; height : 100%;
}
.container::after { content : '' ; display : block; visibility : hidden; clear : both
} style > < body> < divclass = container> < divclass = left> div > < divclass = right> div > div > body > html > 上面代码中最重要的是 margin-left: 100px;，这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div。
三栏布局的思想是左边一个浮动元素，右边一个浮动元素，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位。
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> title > head > < style>
* { margin : 0; padding : 0;
}
.container { width : 400px; height : 200px;
} .left { background-color : yellow; float : left; height : 100%; width : 100px;
}
.right { background-color : green; float : right; height : 100%; width : 100px;
}
.middle { background-color : red; margin-left : 100px; margin-right : 100px; height : 100%;
}
.container::after { content : '' ; display : block; visibility : hidden; clear : both
} style > < body> < divclass = container> < divclass = left> div > < divclass = " middle" > div > < divclass = right> div > div > body > html > 效果图
< divclass = container> < divclass = left> div > < divclass = right> div > < divclass = " middle" > div > div > 效果图
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器指定为flex布局
.box{display: flex;
}
行内元素指定为flex布局
.box{display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;
}
flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction属性决定主轴的方向（即项目的排列方向）。
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {flex-flow: < flex-direction> < flex-wrap> justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
order flex-grow flex-shrink flex-basis flex align-self order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
负值对该属性无效。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
屏幕分辨率 像素 PPI（Pixel Per Inch）：每英寸包括的像素数 DPI（Dot Per Inch）：即每英寸包括的点数 设备独立像素 设备像素比（dpr） Meta Viewport css中相对的布局单位有以下几种：em、rem、vh、vw、vmin、vmax、%、calc()
em 相对于当前元素或当前元素继承来的字体的宽度，但是每个字母或汉字的宽度有可能是不一样的，那么一般来说，就是一个大写字母 M 的宽度（事实上，规范中有一个 x-height 概念，建议取 X 的高度，但并没有推荐绝对的计算执行标准，还需要看浏览器的实现，也有的地方采用 O 的高度）；一个非常容易出错的点在于：很多同学会认为 em 相对于父元素的字体大小，但是实际上取决于应用在什么 CSS 属性上。对于 font-size 来说，em 相对于父元素的字体大小；line-height 中，em 却相对于自身字体的大小。
rem 相对于根节点（html）的字体大小，根节点一个大写字母 M 的宽度（同上）
以 rem 为核心，诞生了淘宝的 flexible 响应式布局的方案。
vw 相对于视口宽度，100vw 就相当于一个视口宽度
vh 同理，1vh 表示视口高度的 1/100，100vh 就是一个视口高度
vmin 相对于视口的宽度或高度中较小的那个，也就是 1vw 和 1vh 取最小（Math.min(1vw, 1vh)）；vmax 相对于视口的宽度或高度中较大的那个，（Math.max(1vw, 1vh)）
calc 也是一个响应式布局神器，它使得 CSS 有了运算的能力
width : calc ( 100vw - 80px)
最简单的处理方式是加上一个 meta 标签
< metaname = " viewport" content = " width=device-width, initial-scale=1" > 其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
css2 允许用户根据特定的 media 类型定制样式，基本语法如下
@media screen and ( max-width : 360px) { html { font-size : 12px; }
}
意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。
p { height : var ( --test-height) ;
} function changePHeight (height)document.documentElement.style.setProperty('--test-height', `$ { height} px) ;
}
< metaname = " viewport" content = " width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" > 禁用了用户缩放功能，使页面宽度和设备宽度对齐，一般这种操作也是移动端的响应式适配的标配。
页面根节点 HTML 元素上，显式设置了 font-size：
! function ( e, t) { var n = t. documentElement, d = e. devicePixelRatio || 1 ; function i ( ) { var e = n. clientWidth / 3.75 ; n. style. fontSize = e + "px" } if ( function e ( ) { t. body ? t. body. style. fontSize = "16px" : t. addEventListener ( "DOMContentLoaded" , e) } ( ) , i ( ) , e. addEventListener ( "resize" , i) , e. addEventListener ( "pageshow" , function ( e) { e. persisted && i ( ) } ) , 2 <= d) { var o = t. createElement ( "body" ) , a = t. createElement ( "div" ) ; a. style. border = ".5px solid transparent" , o. appendChild ( a) , n. appendChild ( o) , 1 === a. offsetHeight && n. classList. add ( "hairlines" ) , n. removeChild ( o) }
} ( window, document)
这是一个 IIFE，在 DOMContentLoaded、resize、pageshow 事件触发时，进行对 html 的 font-size 值设定，计算方式为：font-size = document.documentElement.clientWidth / 3.75
网易的做法大体类似，同样采用了 rem 布局，但区别是网易并没有 JavaScript 介入计算 html 的 font-size，而是通过媒体查询和 calc 手段，“枚举”了不同设备下不同的 HTML font-size 值。3.7 rem = 55.3px(calc(13.33333333vw) * 3.7)
直接进行代码分析：
< divclass = " col-6 col-sm-3" > div > < divclass = " col-6 col-sm-3" > div > < divclass = " col-6 col-sm-3" > div > < divclass = " col-6 col-sm-3" > div > .col-6 class 和.col-sm-3 class样式在源码里面可以简单归纳（不完全）为：
.col-6 { -webkit-box-flex : 0; -webkit-flex : 0 0 50%; -ms-flex : 0 0 50%; flex : 0 0 50%; max-width : 50%;
} .col-sm-3 { -webkit-box-flex : 0; -webkit-flex : 0 0 25%; -ms-flex : 0 0 25%; flex : 0 0 25%; max-width : 25%;
}
类似 flex: 0 0 25% 的声明，为了理解它，我们从 flex 属性入手：flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写（类似 backgroud 是很多背景属性的简写一样），它的默认值为 0 1 auto，后两个属性可选。语法格式如下：
.item { flex : none | [ <'flex-grow' > <'flex-shrink' >? || <'flex-basis' > ]
}
flex-grow：属性定义项目的放大比例，默认为 0。我们看到 Bootstrap 代码里这个值一直为 0，即如果存在剩余空间，也不放大。 flex-shrink：属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。 flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间，它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。
Bootstrap 这里对 flex 设置为比例值，这也是响应式自然而然实现的基础。
如何做到在不同的屏幕比例下，只有一个属性发生作用呢？
我们在源码里发现 .col-sm-* 的样式声明全部在
@media ( min-width : 576px) { ...}
的媒体查询中，这就保证了在 576px 宽度以上的屏幕，只有在媒体查询之外的 .col-* 样式声明发挥了作用。
在屏幕宽度小于 576px 时候，命中媒体查询，命中 .col-sm-3 的样式声明。它的优先级一定大于 .col-6（媒体查询优先级高），这时候就保证了移动端的样式“占上风”。
再结合 col-6 col-sm-3 的样式声明，我们可以简单总结一下：Bootstrap 主要是通过百分比宽度（max-width: 50%; max-width: 25%;），以及 flex 属性，再加上媒体查询，“三管齐下”实现了栅格化布局的主体。
window. addEventListener ( "resize" , ( ) => { if ( window. orientation === 180 || window. orientation === 0 ) { console. log ( '竖屏' ) } ; if ( window. orientation === 90 || window. orientation === - 90 ) { console. log ( '横屏' ) }
} )
横竖屏适配代码之css实现
@media screen and ( orientation : portrait) {
}
@media screen and ( orientation : landscape) {
}
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清屏下看着1px总是感觉变胖了。
解决方法有以下几个：
1、在ios8+中当devicePixelRatio=2的时候使用0.5px
p { border : 1px solid #000;
}
@media ( -webkit-min-device-pixel-ratio : 2) { p { border : 0.5px solid #000; }
}
2、伪元素 + transform 实现
.scale-1px { position : relative; border : none; } .scale-1px:after { content : '' ; position : absolute; bottom : 0; background : #000; width : 100%; height : 1px; -webkit-transform : scaleY ( 0.5) ; transform : scaleY ( 0.5) ; -webkit-transform-origin : 0 0; transform-origin : 0 0; }
3、viewport + rem 实现
在devicePixelRatio = 3 时，输出viewport：
使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果
.box-shadow-1px { box-shadow : inset 0px -1px 1px -1px #c8c7cc;
}
#define TabbarHeight ( [ [ UIApplication sharedApplication] statusBarFrame] . size. height> 20 ? 83 : 49 ) _tabBarView. frame = CGRectMake ( 0 , CurrentScreenHeight - TabbarHeight, CurrentScreenWidth, TabbarHeight) ;
1、inline-block设置
.img-responsive { display : inline-block; height : auto; max-width : 100%;
}
2、flex设置
div { width : 500px; height : 500px; display : flex; justify-content : center; align-items : center;
}
img { width : auto; height : auto; max-width : 100%; max-height : 100%;
}
position: absolute 中的 %
position: relative 中的 %
position: fixed 中的 %
margin 和 padding 的 %
border-radius 的 %
background-size 的 %
transform： translate
text-indent 的 %
font-size 的 %
line-height 的 %
引用资料：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】 进行投诉反馈！
