html css 布局篇

桃扇骨 2023-06-05 11:20 8阅读 0赞

float

做了float后有一些不好的影响。

1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

故需清除浮动

1 、父div设置合适高度

2 、在要做float的div后，可以在html加一个空的div，或者在css在其父元素用after中 content:'';，

而后写

clear:both;（有一些浏览器不写这句就不作用

*display:block;*

（最好再写上width:0;height:0;visibility:hidden;保证这个元素看不见，不影响布局）

（建议是用after）

3、父级div定义overflow:hidden（或overflow：auto）

（注意：给导航栏单独每一项加下划线时不要用3，因为会把下划线隐藏）

（还有一些奇奇怪怪不好用的方法，比如把父元素也设置浮动，就不提了）

div

默认一个div占一行，那么如何让多个个div同一行？

1、用float

如果分两列，可以先把两列的div分别包含在两个div里面

如果分三列，要都float：left，或者两个float：left一个float：right；

缺点：如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整，不易控制。

2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧剩余宽度。

缺点：如果有多个div 比如三个及以上了？

3、使用display的inline-block属性(不用inline，inline高度不可控)

（会上下错位，原因：

①同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline

②对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方案：

改变vertical-align属性（右侧div设置vertical-align: top;）

4、①对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

②左边固定宽度，使用position:absolute

③右边margin-left为左边一块的固定宽度

(此处暂时不考虑弹性盒子，我先练习不用弹性盒子的)

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML&CSS Day07 CSS Flex布局

文章目录 1.flex布局 2.flex布局属性容器属性元素属性 3.

浅浅的花香味﹌/ 2024年03月16日 16:24/ 0 赞/ 58 阅读

相关 HTML&CSS Day06 CSS定位布局

文章目录 1.定位布局 \- 1.1.静态定位（ Static positioning） \- 1.2.什么是相对定位?（ Relativ

﹏ヽ暗。殇╰゛Y/ 2023年10月12日 13:44/ 0 赞/ 19 阅读

相关 HTML&CSS Day05 CSS浮动布局

文章目录 1.CSS布局 \- 什么是网页的布局方式? \- 标准流(文档流/普通流)排版方式

旧城等待，/ 2023年10月12日 13:42/ 0 赞/ 32 阅读

相关 html css 布局篇

float 做了float后有一些不好的影响。 1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不

桃扇骨/ 2023年06月05日 11:20/ 0 赞/ 9 阅读

相关 HTML+CSS flex弹性布局

flex布局原理 flex是flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父

谁践踏了优雅/ 2022年12月14日 13:39/ 0 赞/ 253 阅读

相关 html怎么用层布局,css怎么布局？

CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局(早期)，float 浮动布局和 flex 布局，还有针对于移动端的响应式布局。 ![

妖狐艹你老母/ 2022年10月06日 13:50/ 0 赞/ 184 阅读

相关 HTML+CSS布局

一、网页的布局 1.固定布局固定网页布局指网站内容被一个固定宽度的容器包裹起来，容器内的区块都有固定的百分比或者像素宽度值。最重要一点是容器是不能移动。不

电玩女神/ 2022年04月15日 00:15/ 0 赞/ 215 阅读

相关 HTML/CSS -- 利用flexBox布局

语法规则可参考：[RYF][] 布局1：高度固定，左宽度已知，右边适应 ![201812272218492.png][] <section>

待我称王封你为后i/ 2022年04月10日 05:55/ 0 赞/ 267 阅读

相关 html css 流式布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

分手后的思念是犯贱/ 2022年03月02日 13:20/ 0 赞/ 342 阅读

相关 JavaWeb篇-HTML&CSS

文章目录 HTML&CSS HTML 标签语法 font标签特殊字符

朴灿烈づ我的快乐病毒、/ 2021年06月24日 13:58/ 0 赞/ 372 阅读