CSS3_黑马基础教程2

最新推荐文章于 2024-11-11 14:35:08 发布

曲调响起琴声悠扬

最新推荐文章于 2024-11-11 14:35:08 发布

阅读量713

点赞数

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_42636335/article/details/121128776

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

#浮动（float）

普通流/标准流/文档流（normal flow）

使用before和after双伪元素清除浮动

#浮动（float）

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

普通流（标准流）
浮动
定位

实际过程中三种都要

普通流/标准流/文档流（normal flow）

所谓的标准流: 就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列

浮动（float）

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果

语法： float：right；

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定的位置

选择器 { float: 属性值; }

浮动详细内幕特性

浮动首先创建包含块的概念（包裹）。浮动的元素总是找离他最近的父级元素对齐，但是不会超出内边距的范围

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

浮动元素排列位置跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素顶部对齐；

A B 浮动

如果上一个元素时标准流，则A元素的顶部会和上一个元素的底部对齐

A不浮动 B浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

块级元素和行内元素添加浮动之后，具有行内块的特性（可以一行放多个，有宽度和高度，盒子大小由内容决定）

浮动的目的就是为了让多个块级元素在同一行上显示

#版心和布局流程

版心（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px，980px，1000px，1200px等

布局流程

为了提高网页制作效率，布局时通常需要遵守一定的布局流程：

1.确定页面的版心

2.分析页面中的行模块，以及每个行模块中的列模块

3.制作HTML结构

4.CSS初始化，然后运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

最为普通，最为常用的结构

两列左窄右宽型

通栏平均分配型

#清除浮动

准确来说，不是清除浮动，而是清除浮动后造成的影响

为什么要清除浮动

很多情况下，父级盒子不方便给高度，考虑到孩子的高度会变。

清除浮动本质

主要为了解决父级元素因为子级浮动引起内部高度为0的问题

清除浮动的方法

其实本质叫做闭合浮动更好一些，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

基本语法：选择器{clear:属性值;}

一般都直接用 clear：both；

额外标签法

是W3C推荐的做法，通过再浮动元素末尾添加一个空的标签，例如 <div style="clear:both"></div>，或其他标签 br 等也可，添加的标签一定是块级标签

通俗易懂但是添加许多无意义的标签结构化较差

父级添加overflow属性方法

overflow:hidden | auto | scroll; 触发BFC BFC可以清除浮动

代码简洁但无法显示溢出部分

使用after伪元素清除浮动

：after 方式为空元素的升级版，不用再单独加标签

 .clearfix:after {  
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;  /* 星号代表ie6、7能识别的特殊符号，带由这个符号的属性只有ie6 7才执行
                zoom 就是ie6 7 清除浮动的方法*/
 }

content"."里边尽量跟一个小点或者其他，尽量不要为空，否则在firebox7.0前的版本会有生成空格

例如：网易、淘宝、百度

使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after {
   content:"";
   display:table;  /*触发BFC 防止外边距合并*/
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

例如：小米、腾讯