css3种布局方式：默认文档流、浮动布局、定位布局-----看张鹏老师视频笔记

骑猪看日落 2022-08-05 19:29 257阅读 0赞

>   
> 
> 
> **一、css布局的方式：**
> 
>   
> 
> 
>   
> 
> 
> 1、默认的，就是按文档流的顺序，即按html的结构顺序。
> 
>   
> 
> 
> 2、浮动方式：
> 
>   
> 
> 
> 3、定位方式：
> 
>   
> 
> 
> **二、浮动![惊讶][ohmy.gif]**
> 
>   
> 
> 
> 1、浮动是将，块元素的，霸道属性，即独占一行的行为，取消，允许别人与他一行。
> 
>   
> 
> 
> **浮动的核心思想：**浮动其实是，这个块，从原来的文档流模式中，分离出来，它后面的对象，就视它不存在。
> 
>   
> 
> 
> 浮动口诀：浮动浮动，先浮后动，先浮，就是浮动的对象，会先飘起来，即离开原来的位置；后动，就是它后面的对象，会向它原来的位置上，动起来。
> 
>   
> 
> 
>   
> 
> 
> 2、常用的布局效果，例如，一行并列式，就是在一行中，显示几个块元素，如何实现的呢？
> 
>   
> 
> 
> 答：如果想让，多个块，显示在同一行中，可以将，这些块，都设置为浮动，并且浮动方向相同。
> 
>   
> 
> 
>   
> 
> 
> 3、css把网页元素，分为两类，一种是块，一种是内联元素。
> 
> body，div，p，h1都是块
> 
> ul与li默认情况下是块元素，要想让他们在一行中显示，就要用到浮动。
> 
>   
> 
> 
>   
> 
> 
> 4、如果有两个div1和div2，div1左浮动后，如何让div2内的文字或图片显示出来（即显示在div1同一行的后面）？
> 
> 答：d i v 2 的 w i d t h **≥ **d i v 1 的 w i d t h **+ **d i v 2 内文字或图片的宽度 ，
> 
>    否则就显示不出来（图片显示不出来，文字还在原来的位置不动）
> 
>   
> 
> 
>   
> 
> 
> 5、如何知道有没有兼容性？
> 
> 答：我们在制作时，你多使用不同的浏览器查看你的结果，这样，你就能知道，各种浏览器的差别。
> 
>        总结出，当IE6父元素，中的子元素，的高度超过了，父元素的高度，IE6默认，会把父元素的高度，自动增加。
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
> **三、清除浮动**![惊讶][ohmy.gif]：就是可以去掉前面对象浮动，对后面对象的影响。
> 
>   
> 
> 
>   
> 
> 
> **1、为什么要清除浮动？**
> 
> 答：当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，
> 
> 可以通过清除浮动的方法来解决，浮动元素的影响。
> 
>   
> 
> 
> **2、清除对后面元素的影响**
> 
>       清除浮动的方法：
> 
>       在后面元素样式中加上  clear：both
> 
>   
> 
> 
>      补：属性：clear
> 
>    属性值：none 默认值，允许两边都可以有浮动对象
> 
>        left     不允许左边有浮动对象
> 
>        right   不允许右边有浮动对象
> 
>        both   左右两边都不允许有浮动对象
> 
>   
> 
> 
>   
> 
> 
> **2、清除对父元素的影响**
> 
>        清除浮动的3种方法：都是给父元素的样式里加的
> 
>   
> 
> 
> （1）额外标签法：增加一个空标签，就是没有内容的标签。
> 
>   这种方法应该说是最简单的一种，是W3C组织推荐的方法，
> 
>  W3C建议在（父）容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素
> 
>   
> 
> 
>     <div id="main">
> 
>      <div id="left">左盒子</div>
> 
>      <div id="right">右盒子</div>
> 
>     **<div class="clear"></div>**  /\*增加一个空的div，然后在css样式表中写 .clear\{clear:both;\}\*/
> 
>        </div>
> 
>        <div id="footer">底部</div>
> 
>   
> 
> 
>    缺点：会增加代码（即有一个父元素需要清除浮动，你就需要加一个空标签）。
> 
>   
> 
> 
> （2）父元素使用overflow的方法：给父元素，加overflow:hidden （至于为什么，不太明白）
> 
>   
> 
> 
>       缺点：如果子元素使用了定位布局，就会很难实现。
> 
>   
> 
> 
>       补： (1)  css中溢出的使用
> 
>          功能：设置当对象的内容超过其指定高度及宽度时如何管理内容（即如何管理超出的部分）
> 
>          用法：overflow：visible （默认值，不剪切内容，也不添加滚动条，即超出就超出）
> 
>                                   auto     （在必需时对象内容才会被裁切或显示滚动条）
> 
>            hidden （不显示超过对象尺寸的内容）
> 
>          scroll    （总是显示滚动条）
> 
>   
> 
> 
>  (2)zoom：只用IE内核的浏览器支持，原来是指缩放比例
> 
>  功能：设置或搜索对象的缩放比例
> 
>  用法：normal（默认值，即使用对象的实际尺寸）
> 
>            百分数 如zoom：0.5，表示是实际尺寸的百分之五十大小
> 
>      zoom:1 解决IE6高度自适应问题
> 
>   
> 
> 
> （3）利用伪对象after方法：定义一个类，使用伪对象after，控制浮动元素的影响
> 
>   网上最流行的清除浮动方法：
> 
> .clearFix:after\{ 
> 
> clear:both;
> 
> display:block;
> 
> visibility:hidden;
> 
> height:0;
> 
> line-height:0;
> 
> content:"";
> 
> \}
> 
> .clearFix\{zoom:1;\}  /\*解决IE6/7兼容问题\*/
> 
>   补：:before和:after属于一种伪对象，它是可以加给某个标签的；content后面是你要加的内容
> 
>    语法：标签:after\{"要加的内容";\}
> 
>   
> 
> 
>      例如：
> 
>      css样式中
> 
>   p:before\{content:"我是在前面加的内容";\}  
>   p:after\{content:"我是在后面加的内容";\}
> 
>   body中
> 
>    <p>\[我是原p标签中的内容\]</p>   
> 
>   
> 
> 
>   
> 
> 
> 3、为什么，原来在一行中的两个块，会因为浏览器窗口的大小改变，而改变其原来的位置，如何解决？
> 
> 答：当浏览器窗口宽度不能放下左右div宽度之和时，右边div被挤到左边div的下边
> 
>         解决方法：在左右两个块外面，加一个父元素，用于控制它们的整体宽度
> 
>   
> 
> 
>   
> 
> 
> 4、设置一个块为水平居中时，都会给这个块设置一个宽度值。
> 
>        （因为如果不设宽度，它默认宽度就会平铺整个浏览器宽度，居中不居中就没意义了。）
> 
>         即水平居中要满足2个条件：
> 
>       【1】设置一个宽度值width
> 
>       【2】设置 margin：0 auto；（即设置左右margin为auto ，上下margin不一定非是0任意值都可以）
> 
>   
> 
> 
>   
> 
> 
> 5、当父元素，没有指定，高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加。
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
> **四、定位布局![惊讶][ohmy.gif]**：就是可以通过元素的position属性控制元素的位置。
> 
>   
> 
> 
>   
> 
> 
> 1、当我们要想使用绝对定位时，必须要有两个条件：
> 
>      【1】必须给父元素加定位属性，一般建议使用 position:relative;
> 
>      【2】给子元素，加绝对定位 position:absolute;同时要加方向属性。
> 
>   
> 
> 
> 2、相对定位与绝对定位区别：
> 
>       （1）绝对定位时以父元素为基准点，进行定位---会脱离文档流。
> 
> 绝对定位写法：
> 
>         父元素 position:relative;
> 
>       子元素  position:absolute;
> 
>           top:100px;
> 
>           left:100px;
> 
>       （2）相对定位时根据其自身为基准点，进行定位---离开原位置，但还占着原来的空间。
> 
> 相对定位的写法：
> 
> 子元素   position:relative;
> 
>             top:100px;
> 
>           left:100px;
> 
>   
> 
> 
> 3、图片是像块元素的内联元素，但是它可以加宽高
> 
>   
> 
> 
> 4、有些html元素标记，有默认的内外边距
> 
>   
> 
> 
> 5、一般而言，当设置了一个块的宽度后，需要设置与之并列的块的宽度，才能保证样式正常显示。
> 
>   
> 
> 
>   
>

![20141203221626859][]

今天是我的生日，作家李玲瑶说学习是送给自己最好的礼物，所以这篇文章就是我送给自己的生日礼物了，哈哈。

2014.12.3

[ohmy.gif]: /images/20220806/211ae249629242ee94bdc38bdcce9734.png
[20141203221626859]: /images/20220806/8f71c858eec04ab4a5d27ed226ea9cf1.png