公输的前端学习记录day14（CSS浮动）

已于 2023-09-19 17:53:14 修改
阅读量43 收藏 1
点赞数 1
文章标签： 学习 css 前端
于 2023-09-03 23:37:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73624861/article/details/132651292
版权

目录：

  1. 浮动
  2. 常见网页布局
  3. 清楚浮动
  4. PS切图
  5. 学成在线案例

一：浮动

1.1传统网页布局的三种方式

  • 普通流（标准流/文档流），就是标签按照规定好的默认方式排列。之前学的都是，标准流是最基本的布局方式。
  • 浮动
  • 定位

注：实际开发中，一个页面基本包含了这三种布局方式，后面移动端学习新的布局方式。

1.2 为什么需要浮动

浮动可以改变元素标签的默认排列方式。

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

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

1.3什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 ｛ float：属性值；｝

值：none，不浮动，默认

left     right

1.4浮动特性（重难点）

（1）浮动元素会脱离标准流（脱标）

脱标的盒子不再保留原先的位置。会漂浮在普通流盒子的上边。

（2）会一行内显示且元素顶部对齐

（3）会具有行内块元素的特性。

任何元素都可以浮动，不管是什么模式的元素，添加浮动后都具有行内块元素相似的特性。

如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度。

浮动的元素之间是没有空隙的

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

二：常见网页布局

样式：

top

banner

main

footer

通栏不需要指定宽度，与浏览器一样宽

注：（1）浮动和标准流的父盒子搭配

（2）一个元素浮动了，理论上其余兄弟元素也要浮动。

并不是什么时候浮动都会压住标准流，当标准流占满一行，下一个元素浮动会贴下沿，即：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

三：清除浮动

3.1为什么要清楚浮动

我们前面浮动元素有一个标准流的父元素，他们都有一个共同特点，都是有高度的。

有的内容特别多，盒子高度不能写死。

理想中的状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高。

由于很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时就会影响下边的标准流盒子。

3.2清楚浮动的本质

清楚浮动的本质是清楚浮动元素造成的影响

如果父盒子本身有高度，则不需要清楚浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流。

语法：选择器 ｛ clear：属性值；｝

属性值：left，不允许左侧有浮动元素，

right，不允许右侧有浮动元素

both，同时清楚左右两侧浮动的影响

实际开发中，几乎只用clear：both；

清除浮动的策略是闭合浮动。

3.3清除浮动的方法

  1. 额外标签法，也称隔墙法，是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素

法一：隔墙法

    在浮动元素末尾添加一个空标签，如：＜div style="clear:both" ＞＜div ＞,或者其他标签如＜br/＞等）

    优点：通俗易懂，书写方便

    缺点：添加许多无意义标签，结构化较差。  注：新添加的空标签必须是块级元素。

法二：父级添加overflow属性

   属性值：hidden，auto，scroll（一般写hidden）

   优：代码简洁

   缺：无法显示溢出的部分

法三：after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after ｛

content:"";

display:block;

height:0;

clear:both;

visibility:hidden;

｝

.clearfix ｛ /*IE6,7专有 */

  zoom：1;

｝

父元素添加clearfix类名。

  优：没有增加标签，结构更简单

  缺：照顾低版本浏览器

代表网站：百度，淘宝，网易等。

法四：双伪元素清楚浮动

给父元素添加

.clearfix:before,.clearfix:after ｛

  content:"";

  display:table;

｝

.clearfix:after ｛

  clear:both;

｝

.clearfix ｛

 zoom: 1;

｝

优：代码更简洁

缺：照顾低版本浏览器

代表网站：小米，腾讯等

 

 

公输哥哥
关注
语文初中语文八年级下册公输PPT学习教案.pptx
10-11
语文初中语文八年级下册公输PPT学习教案.pptx
2公输——学生学习课件
11-23
- **内容特点**：书中包含了墨子的言行记录，反映了小生产者阶层的利益和愿望。其学说与儒家学说形成鲜明对比，在战国时期具有重要的影响力。 - **语言风格**：文章逻辑性强，语言质朴，具有很强的说服力。 ### 3. ...
公输的前端学习记录day12（css）
m0_73624861的博客
09-01 44
页面布局要学习三大核心：盒子模型，浮动和定位。
公输的前端学习记录day6（CSS）
m0_73624861的博客
08-25 47
1.1HTML的局限性HTML只关注内容的语义。主要做结构的，显示元素内容。1.2css-网页的美容师css是层叠样式表（Cascading Style Sheets ）的简称，有时也称css样式表或级联样式表。css也是一种标记语言。css主要用于设置HTML页面中的文本内容（字体大小对齐方式等），图片的外形（宽高，边框样式边距等）以及版面的布局和外观显示样式。简单来说：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
公输的前端学习记录day10
m0_73624861的博客
08-31 46
background-repeat：repeat（平铺）丨no-repeat（不平铺）丨repeat-x（沿x轴平铺）丨repeat-y。（1）如果都是方位名词，则两个值前后顺序无关，如：left top和top left效果一致。一般情况下默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。background-attachment：scroll（滚动）丨fixed（固定）（2）如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐。第一个一定是x坐标，第二个一定是坐标。
公输的前端学习记录day11-1
m0_73624861的博客
08-31 46
练习价值：
公输的前端学习记录day15（css）
m0_73624861的博客
09-04 52
四. PS 切图 Date page4.1常见的图片格式1.jPg图像格式，JPEG(JPG)对色彩的信息保留较好.高清，颜色较多，我们产品类的图片经常用jPg格式的2.gif图像格式 .GIF最多只能储存256色. 常用来显示简单图形及字体，但可以保存透明背景和动画效果，实际常用于一些图片小动画效果.3.png 是一种新兴的网络图形格式，结合了GIF和JPEG_的优点具有存储形式丰富的特点，能够保持透明背景如果想要切成背景透明的图片，选择png格式。
公输的前端学习记录day19-css定位
m0_73624861的博客
09-10 62
注：子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
公输的前端学习记录day9
m0_73624861的博客
08-29 50
常见的行内标签有＜a＞＜strong＞＜b＞＜em＞＜i＞＜del＞＜s＞＜ins＞＜u＞＜span＞等，其中＜span＞是最典型的行内元素，有的地方也称内联元素。注：文字类元素不能使用块级元素，如＜p＞主要用于存放文字，一次＜p＞里面不能放块元素，特别是不能放＜div＞，同理＜h1＞~＜h6＞也是。＜h1＞~＜h6＞，＜p＞，＜div＞，＜ul＞，＜ol＞，＜li＞等，＜div＞是最典型的块元素。＜img/＞＜input/＞＜td＞同时具有块元素和行内元素的特点，有些资料称行内块元素。
公输的前端学习记录day7（css）
m0_73624861的博客
08-26 40
按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：（1）行内样式表（行内式）（2）内部样式表（嵌入式）（3）外部样式表（链接式）
公输的前端学习记录day3
m0_73624861的博客
08-22 65
案例目的：练习文件夹的建立和排布，练习基本HTML标签的使用，练习锚点链接的使用，图片的插入。PS：-----今天私事比较多，就先这样了。
3公输——小学生学习课件
11-23
3公输——小学生学习课件
【学习笔记】手写Tomcat 二
LearnTech_123的博客
09-11 1121
在昨天的基础上，再进一步优化，能够响应HTML文件，图片等静态资源。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 817
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
看Threejs好玩示例，学习创新与技术(二)
最新发布
htsitr2的专栏
09-14 305
它的主要特点是确保生成的点之间保持一定的最小距离，从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用，尤其是在需要生成自然分布的对象（如树木、石头等）时。如果不进行裁剪，那么效果如下（初步的锯齿感是因为矩形内采样的结果）。为啥这么复杂呢，为啥不开始存储每个方块的UV呢？下面代码的vTexCoords（=savedModelMatrix，已修改）记录方块所在的位置，vWorldPosition表示方块中像素的偏移。在上面那副图中，聪明的你一定初步猜到了每个方块的纹理是怎么得到的。
计算几何学习
网安小白
09-12 433
学习计算几何过程中对经典算法的记录
Qt之OpenCv 灰度处理、均值滤波、边缘检测学习
weixin_57695658的博客
09-11 1290
本章来学习一下opencv常见的操作，首先看下我们的Qt制作好的界面：源码在后面。
这段代码哪错了 #include <iostream> #include <iomanip> using namespace std; class Staff { protected: int code; string name; static int count; public: Staff(string n) { name = n; code = count; count++; } void SetName(string s) { name = s; } string GetName() { return name; } int GetCode() { return code; } static int GetStaffCount() { return count; } }; class Teacher : virtual public Staff { protected: string subject; public: Teacher(string n, string m) : Staff(n) { subject = m; } void SetSubject(string s) { subject = s; } string GetSubject() { return subject; } }; class Officer : virtual public Staff { protected: string work; public: Officer(string n, string m) : Staff(n) { work = m; } void SetWork(string s) { work = s; } string GetWork() { return work; } }; class Teacher_Officer : public Teacher, public Officer { public: Teacher_Officer(string n, string m, string s) : Staff(n), Teacher(n, m), Officer(n, s) {} }; int main() { Teacher t1("孔子", "儒家文学"); // 创建教学类员工t1 Teacher t2("公输班", "建筑学"); Officer o1("端木赐", "财务科长"); // 创建教辅类员工o1 Teacher_Officer to3("颜回", "儒家文学", "副院长"); // 创建教师教辅类员工to3 cout << "共有教职工" << Staff::GetStaffCount() << "人" << endl; cout << t1.GetCode() << ", " << t1.GetName() << ", " << t1.GetSubject() << endl; cout << t2.GetCode() << ", " << t2.GetName() << ", " << t2.GetSubject() << endl; cout << o1.GetCode() << ", " << o1.GetName() << ", " << o1.GetWork() << endl; cout << to3.GetCode() << ", " << to3.GetName() << ", " << to3.GetSubject() << ", " << to3.GetWork() << endl; return 0; }
05-17
这段代码有两个问题： 1.需要将 `count` 初始化为 0，因为静态成员变量不会自动初始化为 0。 2.在 `Teacher_Officer` 类的构造函数中，应该只给 `Teacher` 和 `Officer` 传递它们自己的参数，而不是将 `Staff` 类的参数也传递进去。 修改后的代码如下： ``` #include <iostream> #include <iomanip> using namespace std; class Staff { protected: int code; string name; static int count; public: Staff(string n) { name = n; code = count; count++; } void SetName(string s) { name = s; } string GetName() { return name; } int GetCode() { return code; } static int GetStaffCount() { return count; } }; int Staff::count = 0; class Teacher : virtual public Staff { protected: string subject; public: Teacher(string n, string m) : Staff(n) { subject = m; } void SetSubject(string s) { subject = s; } string GetSubject() { return subject; } }; class Officer : virtual public Staff { protected: string work; public: Officer(string n, string m) : Staff(n) { work = m; } void SetWork(string s) { work = s; } string GetWork() { return work; } }; class Teacher_Officer : public Teacher, public Officer { public: Teacher_Officer(string n, string m, string s) : Teacher(n, m), Officer(n, s) {} }; int main() { Teacher t1("孔子", "儒家文学"); // 创建教学类员工t1 Teacher t2("公输班", "建筑学"); Officer o1("端木赐", "财务科长"); // 创建教辅类员工o1 Teacher_Officer to3("颜回", "儒家文学", "副院长"); // 创建教师教辅类员工to3 cout << "共有教职工" << Staff::GetStaffCount() << "人" << endl; cout << t1.GetCode() << ", " << t1.GetName() << ", " << t1.GetSubject() << endl; cout << t2.GetCode() << ", " << t2.GetName() << ", " << t2.GetSubject() << endl; cout << o1.GetCode() << ", " << o1.GetName() << ", " << o1.GetWork() << endl; cout << to3.GetCode() << ", " << to3.GetName() << ", " << to3.GetSubject() << ", " << to3.GetWork() << endl; return 0; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值