-
position : absolute属性 的两种情况
当父级元素没有开启定位的话,则子级元素是相对于页面的绝对定位。
当父级元素开启了定位的话,则是相对于父级元素的。
查看全部 -
水平居中布局 text-align:center + display:inline-block 的优缺点
1 优点 : 浏览器兼容性好
2.缺点 :子元素的文本内容会由于父级元素设置了text-align:center也居中对齐,需要在子元素中再次设置text-align属性。
查看全部 -
居中布局 水平居中 垂直居中 水平加垂直居中
查看全部 -
继承父级text-align属性的子级,直接在子级中重新设置text-align属性就行了查看全部
-
父级属性设置:
position:relative;
子级元素设置:
left: 50%;
transform: translateX(-50%);
查看全部 -
父级属性设置:
text-align: center;
子级属性设置:
display: inline-block;
查看全部 -
第一种方法:inline-block+text-algin;
代码演示{
父级盒子用:text-algin:center
子级盒子用:display:inline-block
}
Text-algin属性:是为文本内容设置对齐方式,left左对齐;right右对齐;center居中;
display属性:inline内联元素;block块级元素;inline-block行内块元素;
查看全部 -
> 圣杯布局的核心
自适应位置不同,会不会导致最终实现方案不同,我们通过代码验证一下。
通过基础代码[html和css代码,宽度和背景色]。
拆解。三列。先实现 两列(定宽+自适应)。然后在实现两列(自适应+定宽)
效果:中间是自适应了。但是最后一列,折到第二行了。
原因就是因为中间一列,和最后一列的问题。兄弟元素中,中间没浮动,右边的浮动。
A.浮动的元素是不允许超过前面的元素的。所以依旧是垂直方向排列,而不能呈现水平方向
B.不动的元素是不允许超过前面的元素的。所以依旧是垂直方向排列,而不能呈现水平方向
吐字不清还是我耳朵没听清呢。不知道说的是A还是B。
前面浮动,后面不浮动,后面是可以向前占有位置的。根据这句来说,可以推理出来,应该说的是B。
推理:前面不浮动,后面浮动。前面不能覆盖后面,是没覆盖啊,所以折到第二行也是对的。所以还是不太明白。
剖析结果:浮动在前面没事,不会折行,后面就不行。那就想法儿把浮动放在前面。
解决的方法就是,改动下html的结构,将right改到center的前面去。
> 总结
尽管这种三列布局,和之前的三列布局不一样,但用的处理办法还是曾经用过的两列布局的招数,依旧沿用的是之前的解决方案。只不过进行了拆分,然后重新进行了整合和调整,最终依旧可以实现了这种情况。【感受:真的是将已经会的,然后重新组合拆分,好像真的能焕发新的生命力。推陈出新,也就是这个意思吧。所以不能单纯一味的相信喜新厌旧,因为旧的东西用好了,也是可以发挥很大能量,解决更多新问题,实现新功能的。】
缺点:
能实现不就好了吗,但不行,还要考虑另外一种情况。我们做网站,都需要被搜索引擎抓取
center自适应的放在了最后面。但搜索引擎是按照解析html的顺序来抓取的,也就是谁在前,优先抓取谁。
但页面的主要内容都在center,却在最后才被抓取。对搜索引擎并不友好,真正友好的应该是放在left和right的前面。
但如果真的是 center放在第一个的话【由于html的结构顺序改了,导致页面的布局也改变了】
布局就成了 center中间独占一行,然后left,right左右两列都被折到第二行了。
当前的center也只能放在最后了。
因此,当页面的结构不同的话,解决方案也是不同的。这块儿在实际开发中,一定要注意。
查看全部 -
> 圣杯布局
- 概念:也叫三行三列。
需要注意的是这个”三列“,一般多出现在第2行中。
圣杯布局的示例,其实是一个完整页面的布局。
三行,可以用3个div,div本来就是垂直方向排列
三列,和之前讨论的三列布局有些不同。不同在自适应这一列出现的位置上。
之前讨论的三列布局是定宽+定宽+自适应,也就是自适应是在左边还是右边(可以试试看,示例中,自适应是在右边,自己可以试试自适应在左边该如何写),而现在这个布局,自适应是在中间的,也就是可以总结为,定宽+自适应+定宽的情况。
疑问:仅仅是位置变化了。影响应该问题不大吧?
还真不是,位置不同,实现方式方案整个就完全不一样了。
圣杯布局最核心的是指三行三列的第二行的三列【左右定宽+中间自适应】的具体实现。
圣杯的解决重点就是三列问题,只不过是对应自适应在中间的这种情况。
这个重点搞定了。圣杯布局也就算是学会了。
- 特点。
自适应处在中间,而非两边。
查看全部 -
> 三列布局的实现方式
- 代码验证
先3列统一设置高度。左中设置定宽。右边只设置背景色,默认是width:100%自适应。
如果换成4列布局[也就是最后一列自适应,第三列还是定宽这类]的话,方案依旧可适用。
学习要摸索规律,举一反三。多多思考。
查看全部 -
> 三列布局。
-概念:左边两列定宽,右边自适应。
差异点,相比两列布局,只是增加了一个定宽的列而已。复杂度没有增加多少。
-实现方法,仍然有3种方式。定宽+定宽+自适应。
除此之外,还有 定宽+自适应+定宽的这种情况,区别就在于
自适应是在两边,还是在中间排列。
如果是中间的话,就变得相对复杂了。
查看全部 -
> 两列布局的第三种解决方案优缺点
- 优点
浏览器兼容性好
- 缺点
但会收到table的制约。宽度自动分配。会出现表格单元格双边框的问题。
解决方法就是通过parent元素上设置table-layout:fixed。
- 总结
第一种方法能用。但问题比较多。
第二种方法问题少很多了。
第三种更优一些。
讲解方式上可以认为是递进的,但实际开发中其实没太大关联,还是要分场景应用合适的方法。
查看全部 -
> 两列布局的第三种解决方案
- 概述
html=>有一个变化,会在left和right外围增加一个parent父级元素。
css =>parent应用table效果,left/right左右应用表格的td单元格效果。left左侧定宽。
- 逻辑梳理
但是右边right没有width。解决是width为100%(为啥要显式声明呢?)。
table-layout:fixed(留个思考题,是干啥的。)
解决:table特性-表格的单元格的宽度会自动分配,也就是说没有设置width值的时候,单元格的width会等分。如果有一列定宽,则将其余宽度自动分配给另一列。
查看全部 -
> 两列布局的第二种解决方案的优点和缺点
优点:
简单易用。没有第一种方案的3个bug问题。
缺点:
overflow开启BFC,同时还处理了内容溢出。会导致溢出内存想显示但却显示不了的问题。同时一个元素开启浮动,同级的另一个元素不开启浮动,老版本浏览器会出现之间有空白区域浏览器兼容性问题【留悬念,用IETest试试。结论是不存在此问题。但还是值得一试,印象会更深刻。】
查看全部 -
> 两列布局的第二种解决方案
* 概述
- html结构:还是两层结构,1个父级,2个子集元素。
- css代码:float和overflow
* 验证
- 大概思路:左侧left定宽,右侧right自适应width:100%(默认值如此,可以不用设置),然后左侧left 设置浮动float,此时看似已经实现左右两列布局,但实际左侧left覆盖了右侧自适应right的部分布局(也就是右侧自适应被左侧挡住的那部分),解决方法是设置右侧自适应right的overflow为hidden。
- 主要核心点是overflow。表示一初始隐藏。但还有另外一个作用。就是 开启BFC模式。
- 开启BFC:也就是说当前元素的内部环境与外界完全隔离,即内部环境和外界完全没关系了。需要注意的是开启BFC模式的,不仅仅只通过overflow:hidden这一种方式。
* 总结
- 和第一种解决方案的相似之处是简单易用。只是将margin-left改为overflow而已。
查看全部
举报