布局——圣杯和双飞翼布局

  1. css可以继承的属性有哪些？

Font 系列 text系列 color line-height

  1. border-radius的值的问题

四个值的顺序是 左上 右上 右下 左下。

  1. white-space 规定段落中的文本换不换行 往往值是nowrap 不换行
  2. Word-wrap 属性允许长的内容可以自动换行  属性值是 break-word 允许 默认是不允许
  3. 写三角形

宽高必须是0

  1. margin对布局的影响  双飞翼布局 圣杯布局 （）

Margin是 外边距，属性值是数字 数字又分正负。

正数：margin：20px；

负数：在static元素中（标准流下）margin-left为负数当前元素向左走 margin-top为负当前元素向上走

Margin-bottom为负数后当前元素不动后面的元素向上走，margin-right为负数当前元素不动后面的元素向左走

注意的，margin为负会增大当前元素的宽（前提是当前元素没有设置width）

场景

给ul一个margin-right 就无形之中给ul加了20px宽度。

在float下

Margin为负 也是我们常用的双飞翼，圣杯布局

中间自适应 两端固定

给元素margin-left为负当前元素向左走，margin-right为负后一个元素向左走会覆盖当前元素。

在absolute下

Margin为负

让元素居中，前提是知道元素的宽高。

div{

Position：absolute；

Left：50%；

Top：50%；

Margin-left:-width/2;

Margin-top:-height/2

}

Margin为负无论在什么条件下都是释放自己的空间，如果自己的margin不够，就把自己的宽高贡献出去。

原文地址：https://www.cnblogs.com/lizi-1com/p/9762163.html

时间： 2024-11-10 22:52:01

布局——圣杯和双飞翼布局的相关文章

垂直居中,水平居中，垂直+水平居中，圣杯和双飞翼布局

一:先说一下行内元素和块级元素: 行内元素:a.img.input.label .select.small.span.textarea ... 块级元素:div .dl.h1.h2.form. pre - 格式化文本.table .ul.ol.p... 更多的介绍看这个:http://www.cnblogs.com/Jackie0714/p/4923639.html 二:水平居中: 1.有宽度和高度的块级元素一般都用margin:0 auto.行内元素的话,一般都是用text-align:cen

圣杯和双飞翼布局

圣杯布局: 原理:给包裹层设置左右padding值空出left和right的位置,使用负边距,左边margin-left:-100%,右边margin-left:-100px:此时左右两个盒子位于主盒子两侧但是会遮挡住主盒子的内容,所以再给左盒子position:relative,left:-100px,右盒子position:relative:right:-100px,使左右两个盒子定位正确. /*html部分*/ <div class="container"> <

关于圣杯、双飞翼布局

<!DOCTYPE html><html><head> <title>附加案例</title> <style type="text/css"> body{ background: #ccc; margin: 0; padding: 0; } .container{ --width: 400px; width:calc(var(--width) * 2); height: var(--width); margin:

百分比、圣杯和双飞翼布局

1. 百分比布局:核心 所有的百分比都是相对父级的 Div{width:50%;}div的宽是它父级元素宽的百分之五十 谷歌浏览器默认字体大小16px,最小字体是10px. 面试题html{font-size:62.5%} 因为62.5%*16=10px 这样方便计算整个页面的字体大小都 是10px,因为字体可以继承. Css中哪些属性是可以继承的? Font text line-height color visibility list-style 2.圣杯布局: 两端固定,中间自适应 <!DO

三栏式布局(所谓的圣杯和双飞翼)

× 目录 [1]float [2]absolute [3]flex[4]总结 前面的话 常常听说圣杯布局和双飞翼布局,以为是两个很高级的语汇.但实际上,他们只是三栏式布局的两种布局方法而已.本文将介绍三栏式布局的3种思路 思路一: float [1]圣杯布局 圣杯布局使用float.负margin和relative,不需要添加额外标签..main元素设置padding,为两侧定宽元素留出位置.内容元素设置100%宽度,占据中间位置.而两侧定宽元素通过设置负margin和relative的偏移属性

CSS中的圣杯布局与双飞翼布局

一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2.2,设置两侧盒子(左.右)的宽度 ,使其宽度固定: 2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键: 2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子的宽度: 2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都

CSS中经典的双飞翼布局(

笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: 左列和右列宽度恒定,中间列的宽度根据浏览器窗口的大小自适应. 2.如何实现双飞翼布局? (1)首先我们要得到如下的布局样式: <div class="container"> <div class="column" id="center_pa

圣杯布局和双飞翼布局的理解和区别

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

css布局之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局 今天看了很多圣杯布局和双飞翼布局的技术博客,通过自己的理解总结一下吧. 1.二者相同点: 实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果是一样的. 2.不同点: 圣杯布局知识点:浮动,负边距,相对定位,不需要添加额外标签. 双飞翼:只用到浮动,负边距,不需要使用相对定位,需要添加一个额外的标签. 注意:html结构中中间部分要写在左右布局之前,为了优先渲染. 下面就先来看一下圣杯布局的实现过程吧: 先写出基本DOM结构: