CSS Reset 1.作用
(1)清除浏览器默认样式
(2)全局样式定义
(1)项目开发初期就定义好
(2)reset.css 在引入的时候一定要放在第一位
(3)不同的产品reset.css不一样
table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `border-collapse` 值为 `seperate` 时生效 }4.一个并不完整也并不通用的reset.css样例
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;}布局解决方案 居中布局 1.水平居中
父元素和子元素宽度未知。
child
要达到的效果是这样:
主要代码:
.parent { display: flex; justify-content: center; }
没啥好解释,直接看 神奇的flex实现栗子 吧 (~ ̄▽ ̄)~
方法二:absolute + transform主要代码:
.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }
原理是:left: 50%;在子元素的左侧添加了一段距离,这段距离是父元素宽度的50%,接着因为translateX(50%) 设置百分比时的参照物是自身宽度,所以向左偏移了自身宽度的50%,就居中啦 ╮(‵▽′)╭
动动小手看看栗子
方法三:inline-block + text-align主要代码:
.parent { text-align: center; } .child { display: inline-block; }
这种方法有一个问题是:parent设置了text-align: center;后, 因为这个属性可继承,会导致child中的文字也会居中,而这个效果是我们未必需要的,所以我们很多时候需要在.child中加一句 text-align: left;
自己看看栗子
方法四:table + margin主要代码:
.child { display: table; margin: 0 auto; }
table的特点:宽度为内容宽度 的块状元素,所以也可以用margin: 0 auto;居中。
优点:只设置子元素样式就可以了,不需关心父元素。
看看栗子
不喜欢这第四个方案,table是辣么有语义的一个样式,为什么随便把人家变成table ( ̄. ̄)
2.垂直居中父元素和子元素高度未知。
意欲达到的效果:
方法一:flex+ align-items.parent { display: flex; align-items: center; }
同水平居中的方法一
栗子
方法二:absolute + transform.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
同水平居中的方法二
栗子
方法三:table-cell + vertical-align.parent { display: table-cell; vertical-align: middle; }
vertical-align 可以作用在 inline元素,inline-table元素,以及table-cell元素上。
栗子
3.水平垂直居中父元素和子元素宽高都未知。
方法一:flex + justify-content + align-items.parent { display: flex; justify-content: center; align-items: center; }
综合了水平居中和垂直居中的方法一
栗子
方法二: absolute + transform.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
综合了水平居中和垂直居中的方法二
栗子
方法三: absolute + margin: auto; (常用).parent { position: relative; } .child { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
栗子
方法四:[inline-block + text-align] + [table-cell + vertical-align].parent { display: table-cell; vertical-align: middle; text-align: center; } .child { display: inline-block; }
栗子
多列布局 1.一列定宽 + 一列自适应方法1:float + marginleft
right
right
.left {float: left; width: 100px;} .right { margin-left: 120px;} //有20px是间距方法2:(对方法一的改进)float + margin + (fix)
因为方法1在低版本浏览器有兼容性问题,所以改进一下。
// 首先在right外面加了right-fix这个divleft
right
right
CSS改动:
STEP1:
// .left 和 .right 设置暂时不变 .right-fix {float: right; width: 100%;}
效果为:(注意:我们把right-fix设置为白色背景,只是为了方便观察。)
STEP2:
可以看到,由于right-fix宽度为100%,所以跑到了left下面一行。想要回到同一行,需要给right-fix设置一个负的margin-left值-100px。
.right-fix { margin-left: -100px; }
关于为什么设置了margin-left: 100px;就可以使得回到同一行呢?是因为设置了负的margin-left值之后,浏览器计算right-fix元素的宽度后,会加上-100px,也就是减掉100px,这也就是left的宽度,所以left 与 right-fix 加起来没有超过整行的宽度。
想要进一步了解负的margin值可以参考这篇文章:CSS布局奇淫巧计之-强大的负边距
效果如图:
STEP3:
不幸的是,因为html文档中right-fix处于left后面,所以left被right-fix遮住了,实际应用中right-fix虽然没有背景色,但是我们还是不会希望它覆盖在left上面。
所以,我们需要提高 left 的层级。如何提高呢?由于设置了position: relative;的元素层级要高于普通元素,所以加上这样一条:
.left{ position: relative; }
具体可以参考张鑫旭写的一篇讲解position:relative;很详细的文章:CSS 相对/绝对(relative/absolute)定位系列(四)
最终达到我们要的效果:
到jsfiddle中自己试试去
方法3:float + overflow.left{ width: 100px; margin-right: 20px; } .right { overflow: hidden; }
原理是:设置了overflow:hidden; 之后,会触发BFC模式,而BFC模式内部的布局不受外部影响,所以不会受浮动影响,不会围绕left而是跑到left右边去了。
方法4:table.parent{ display: table; width: 100%; table-layout: fixed; //加速table渲染,实现了布局优先 } .left, .right { display: table-cell; } .left { width: 100px; padding-right: 20px;//因为table-cell不能设margin,所以设置padding来加间距 }
根据table的特性,left设置了100px后,right就占了剩余宽度。
方法5:flex.parent{ display: flex; } .left{ width: 100px; margin-right: 20px; } .right{ flex: 1; }
So easy.
2.多列定宽 + 一列自适应再加一列定宽就行啦 o(≧v≦)o
3.不定宽 + 一列自适应不定宽意思是:
1.可以随意更改宽度:比如改为100px,200px,同时不需要更改其他样式也可以做到两列自适应布局。
2.或不设置宽度而是由里面子元素的宽度决定。
以下方法对应 [一列定宽+一列自适应] 中的方法
方法1: float + margin ?
不好意思,做不到。
方法2: float + margin +(fix) ?
不好意思,也做不到。
方法3: float + overflow ?
阔以!right的样式没有依赖于width的宽度。代码量也少,很棒棒哦!
方法4:table
阔以!right的样式没有依赖于width的宽度,即不关心width的宽度。
方法5:flex
强大的flex当然可以~(傲娇脸 )
4.两列不定宽 + 一列自适应没错,跟你想的一样,加一列不定宽的就行了,样式都一样 ㄟ( ▔, ▔ )ㄏ
5.等分布局C + G = 4*(W + G)
以下例子假设间距G = 20px
结构:
1
2
3
4
方法1:float
.parent{ margin-left: -20px; }//就是上面公式中等号左边的G .column{ float: left; width: 25%; padding-left: 20px;//这里要注意,因为我们用padding来表示间距,所以如果你是给p元素设置了background-color,会发现没有间距,p标签的width才是上图中的W box-sizing: border-box; }
方法2:table
1
2
3
4
.parent-fix{ margin-left: -20px; } .parent { display: table; width: 100%; } .column { display: table-cell; padding-left: 20px;//因为单元格不能设置margin,所以间距只能用padding来做。 }
因为table的width默认是随内容宽度变化的,所以需要手动设置width: 100%;。又因为明确设置了宽度的元素就没办法用将margin设为负值的方式增加20px宽度了,所以需要在外面加一个父元素parent-fix。
这里大家可以自己试试比较一下给parent-fix设置width为100%与不设置width时parent-fix实际宽度(用调试工具里的查看元素看)的区别来理解。
呐,jsfiddle示例在这
方法3:flex
.parent { display: flex; } .column { flex: 1; } .column + .column { margin-left: 20px; }//好用的兄弟选择器 (。・`ω´・)6.一列定宽+一列自适应(当其中较高的一列高度变化,另一列同步变化)
右侧变高,左侧高度随之变化:
↓↓
方法1:table
table的列之间有天然等高的特性。
就是上面 1.一列定宽 + 一列自适应中的方法4:table。
方法2:flex
flex也是天然的等高 <( ̄︶ ̄)> 因为它默认的align-items为stretch,即在交叉轴上默认拉伸占满整个容器。
仍旧是上面1.一列定宽 + 一列自适应中的方法5:flex。
简单到不好意思给栗子
方法3:float
仍旧是参照上面1.一列定宽 + 一列自适应中的方法3:float + overflow,float并没有天然等高,所以要在这个基础上做改动。
.left{ width: 100px; margin-right: 20px; } .right { overflow: hidden; } //增加部分 .left, .right{ padding-bottom: 9999px;//使得有背景色的部分变的很高 margin-bottom: -9999px;//用负的margin抵消掉很高的padding,让高度变回left和right中较高的那部分的内容高度,以便parent用overflow: hidden;去隐藏掉超出部分 } .parent { overflow: hidden;//隐藏掉超出边界的部分 }
其实left的实际高度并没有变,是一种伪等高,只是背景变高。
栗子
7.全等四宫格这是练习题,置几试试吧。
1234
方法1:flex
.parent { display: flex; flex-wrap: wrap; align-content: space-between; } .outer { flex-basis: 100%; display: flex; justify-content: space-between; }
一颗仅供参考的栗子
方法2:float
我的栗子
方法3:table
一个栗子不一定对
全屏布局 1.定宽(px)+自适应只有主内容区 right 随内容滚动。
方法1.position
topleftrightbottom
html, body, .parent {height: 100%; overflow: hidden;}//为了让整个页面不滚动 .top { position: absolute; top: 0; left: 0; right: 0; //注意这个很棒的设置!可以自动占满整行 ヾ(o◕∀◕)ノ height: 100px; } .left { position: absolute; left: 0; top: 100px; bottom: 50px; width:200px; } .right { position: absolute; left: 200px; right: 0; top: 100px; bottom: 50px; //这也是上下占满除了top和bottom之外的所有高度 overflow: auto;//让主内容区可以滚动 } .help-right {//假装有很多内容 width: 1000px; height: 1000px; } .bottom{ position: absolute; bottom: 0; left: 0; right: 0; height: 50px; }
动手写写才记得住
方法2.flex
topleftrightbottom
html, body, .parent {height: 100%; overflow: hidden;} .parent {display: flex; flex-direction: column;} .top { height: 100px; } .middle {flex: 1; display: flex;} .left { width:200px; } .right { flex: 1; overflow: auto; } .help-right { width: 1000px; height: 1000px; } .bottom{ height: 50px; }
栗子
2.百分比定宽(%)+自适应方法1.position , 方法2.flex :
把原来的用px写的定宽改成百分比就可以了。是相对于body的高度和宽度来变化的。感觉top和bottom高度设置百分比不是很实用。
3.自适应+自适应方法1.position
定宽的高度和宽度影响旁边栏的布局,所以实现不了 - 。-
方法2.flex
阔以实现,而且相当简单 ╮(╯▽╰)╭ 把刚刚设置了高度和宽度的地方去掉就可以了 ∑(っ °Д °;)っ
惊人的栗子
方法3.Grid
阔以实现,但是因为还是W3C的草案,所以会经常变化,不稳定,而且浏览器支持也不好。
响应式 想要达到的效果只写一个网站,在多个终端显示,在小屏幕上会隐藏部分元素。
现在的情况在PC端浏览器中可以正常访问的网站,到了手机上之后,内容就会变得特别小。
原因:所有的移动设备都有一个viewport(视窗),这个视窗不是手机屏幕大小,而是一个虚拟的窗口,比如iPhone4的viewport宽度为980px(如下图所示)。显示的时候再按照比例将这980px的内容压缩显示到实际的屏幕宽度中。
@media screen and (max-width: 320px) { //最大宽度为320px,即视窗宽度小于等于320px div{..} .class-name{...} } @media screen and (min-width: 320px) and (max-width: 769px){ //最小宽度为320px,最大宽度为769px,即视窗宽度大于320px,小于769px }页面优化 目的
减少卡顿
利于SEO
便于代码维护
(1)多个css文件合并成一个
(2)少量css样式内联
(3)避免用import的方式引入css文件,因为每个import语句都会产生一个css请求,并且是同步的请求。
(1)减少图片大小
选择合适的图片格式,小尺寸、半透明的用png,大尺寸、色彩绚丽用jpg(因为jpg会对图片进行压缩)
压缩图片
(2)css值缩写
margin,padding,border,font,border-radius等属性
(3)省略值为0 的单位
margin: 0 10px; line-height: .5; background-position: 50% 0;
(4)颜色值最短表示
red rgb(0,0,0) rgba(0,0,0,0) #000000 #000
(5)css选择器合并
.left, .right {...}
(6)文件压缩
用工具对文件进行自动压缩,去掉空格。
css通常放在head中,而js通常放在body底部,因为js会阻碍其他资源加载。
减少标签数量。 选择器长度body .menu ul li a { ... } //太长了 .menu a { ... } //更好避免耗性能属性
比如:
expression filter border-radius box-shadow gradients给图片设置固定宽高,并且图片实际宽高与设置宽高相同,否则浏览器会回流设置多次宽高 所有表现用css实现 4.通过规范提高代码可读性,可维护性
(1)规范:缩进,变量名等
(2)语义化:除了标签,css、id名最好也尽量有意义
(3)尽量避免Hack,一定要用也要统一的标识,比如IE7用*
(4)模块化:相关联的结构做成一个个模块,复用性更强
(5)添加注释
1.注释的文字两侧需加空格,防止因编码问题导致注释失效
2.为避免命名污染,可以给class加前缀,比如:
g- 布局命名 m- 模块命名
3.语义化命名
//结构化命名 top { ... } //改用语义化命名 nav { ... }
4.属性的书写顺序
模块化 什么是模块化一系列相关联的结构组成的整体
带有一定的语义,而非表现
比如,翻页器(或叫分页器paging)、轮播图。
怎么做?为模块分类命名(如.m-, .md-)
以一个主选择器开头(模块根节点)
使用以主选择器开头的后代选择器(模块子节点)
//根节点 .m-nav { ... } //子节点 .m-nav ul{ ... } .m-nav li{ ... } .m-nav a{ ... } .m-nav .z-crt a{ ... }/* 交互状态变化 */
若有一个模块只是比上述模块多了一个按钮,其余部分完全相同,怎么办?
怎样扩展?为根节点加一个class就好了,这里我们加一个 m-nav-1。
//变化的部分在 .m-nav-1 这个新class中写 .m-nav-1 { ... } .m-nav-1 a{ ... } .m-nav-1 .btn{ ... }网易的规范和代码库
规范页:包含了CSS规范、HTML规范和工程师规范
代码库:包含了常用的布局方式、常见模块和元件的实现以及一些bug、技巧等
——————
教是最好的学。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111910.html
CSS Reset 1.作用 (1)清除浏览器默认样式(2)全局样式定义 2.特别注意 (1)项目开发初期就定义好(2)reset.css 在引入的时候一定要放在第一位(3)不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...
摘要:推荐事件事件流事件流就是事件处理执行的过程。事件注册事件类型事件处理函数是否在捕获阶段触发。这个就是事件对象第二行的就是事件对象。除了阻止事件传递到父节点,还阻止了当前节点的后续事件。缺陷流量代价,安全性问题,大小限制。 文档树 DOM:Document Object Model 即:用对象的形式表示HTML、CSS。 DOM包含: DOM Core DOM HTML DOM Sty...
摘要:所以文字最终可以在整个中垂直居中显示。默认值为,即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式,就成功垂直居中了,都是多余了的。 请一定看到最后,flex太令人惊喜! ヾ(o◕∀◕)ノ 入个门 先来考虑这样一个问题:一行文字在一个固定高度的父div中怎样做到垂直居中?我们都知道设置父div的line-height 等于它的height就可以了,像下面...
摘要:所以文字最终可以在整个中垂直居中显示。默认值为,即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式,就成功垂直居中了,都是多余了的。 请一定看到最后,flex太令人惊喜! ヾ(o◕∀◕)ノ 入个门 先来考虑这样一个问题:一行文字在一个固定高度的父div中怎样做到垂直居中?我们都知道设置父div的line-height 等于它的height就可以了,像下面...
阅读 448·2021-10-09 09:57
阅读 444·2019-08-29 18:39
阅读 792·2019-08-29 12:27
阅读 3010·2019-08-26 11:38
阅读 2636·2019-08-26 11:37
阅读 1268·2019-08-26 10:59
阅读 1347·2019-08-26 10:58
阅读 966·2019-08-26 10:48