块元素
h1 p div ul ol li dl table form
行内元素
a span em strong
行内快 img input th td
两个行内快 默认有一定间距
浮动
1.脱离标准普通流的控制(浮) 浮动到指定位置(动) 俗称脱标
2.浮动的盒子不在保留原先的位置
3.浮动的元素是互相贴靠在一起的(不会有缝隙) 如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐.
4.任何元素都可以加浮动, 不管原先是什么类型元素加上浮动 具有行内快特性
5.如果行内元素有了浮动, 则不需要转换块级.行内快元素就可以直接给高度和宽度
注意
子盒子 一个浮动 全部浮动
浮动的盒子 只会影响后边的标准流 前边的不会浮动
浮动的盒子不会有外边距问题.
注意
清除浮动 有的父盒子不适合给高度. 会影响下边的盒子.
本质: 清楚浮动元素脱离标准流造成的影响 闭合浮动只让浮动在父盒子内部影响. 不影响父盒子外面的其他盒子
额外标签法, 就是在最后个浮动的子元素后面添加一个额外标签, 添加清楚浮动样式
1.额外标签法 比如给最后一个元素添加个浮动. 把门关上 必须为块级元素才能添加.不能是行内元素
2.父亲添加overflow:hidden 子不教父之过
3.after 之伪元素 父亲添加 一串代码.
4.父亲添加双伪元素.
代码布局顺序 1. 布局定位属性 (dispaly postionn/float/clear/visibility/ overflow) 2. 自身属性(wide, height, margin,padding, border,background) 3. 文本属性 (color,font,text-decoration-textalign,vertical-align, white-space-break-word)4.其他属性(css3)(content, cursor.border-radius),box-shadow-text-shadow
截屏2023-04-07 09.52.13.png
截屏2023-04-07 09.53.04.png
布局整体思路
1.先确定行 再看列
2.看列的宽度高度
3.行里浮动比较多
截屏2023-04-07 09.57.20.png
网页布局常用样式
截屏2023-04-07 18.16.08.png
$定位
截屏2023-04-10 14.46.17.png
网友评论