网站内容运营,深圳西乡做网站,公众平台安全助手,wordpress汉化商城主题免费下载华子目录 布局方式普通文档流布局浮动布局#xff08;浮动主要针对与black#xff0c;inline元素#xff09;float属性浮动用途浮动元素父级高度塌陷 position属性定位篇相对定位#xff08;relative为属性值#xff0c;配合left属性#xff0c;和top属性使用#xff09… 华子目录 布局方式普通文档流布局浮动布局浮动主要针对与blackinline元素float属性浮动用途浮动元素父级高度塌陷 position属性定位篇相对定位relative为属性值配合left属性和top属性使用绝对定位absolute属性值固定定位fixed属性值垃圾广告案例偏移量 布局方式
1.普通文档流布局我们得网页内容从上往下从左往右进行的布局其中块元素独占一行我们可以使用marginpaddingdisplayline-height去进行布局 2.浮动布局浮动可以使用一个元素脱离自己原本的位置并在父级元素的内容区中向左或向右移动直到碰到父级元素内容区的边界或者其他浮动元素为止 3.定位布局让一个元素在一个指定位置进行显示 绝对定位基于父级坐标进行移动 相对定位基于元素本身进行移动
普通文档流布局
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: red;border: 10px solid black;}.box2{width: 100px;height: 100px;background-color: blue;border: 10px solid red;}.box3{width: 100px;height: 100px;background-color: green;border: 10px solid black;}/style
/head
bodydiv classbox1/divdiv classbox2/divdiv classbox3/div
/body
/html浮动布局浮动主要针对与blackinline元素
让开发人员可以更好地实现左右水平布局以前的解决方式是把元素转为行内块
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: red;border: 10px solid black;display: inline-block;/*把块级元素转化为行内块元素*/}.box2{width: 100px;height: 100px;background-color: blue;border: 10px solid red;display: inline-block;/*把块级元素转化为行内块元素*/}.box3{width: 100px;height: 100px;background-color: green;border: 10px solid black;display: inline-block;/*把块级元素转化为行内块元素*/}/style
/head
bodydiv classbox1/divdiv classbox2/divdiv classbox3/div
/body
/html但是转为行内块元素也有一定的缺点 1.性能比较差 2.如果盒子内容超出了宽高排版也会塌陷 3.基线对齐和元素与元素之间会出现空格 浮动优点
1.元素与元素之间没有空格存在
2.浮动元素可以使得块级元素水平排列一行排列不下就换行排列float属性
1.left向左浮动
2.right向右浮动
3.none默认值所有元素默认不浮动!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: red;border: 10px solid black;float: right;/*向右浮动*/}.box2{width: 100px;height: 100px;background-color: blue;border: 10px solid red;float: left;/*向左浮动*/}.box3{width: 100px;height: 100px;background-color: green;border: 10px solid black;float: left;/*向左浮动*/}/style
/head
bodydiv classbox1/divdiv classbox2/divdiv classbox3/div
/body
/html浮动用途
1.文本环绕主要浮动的目的主要是为文本环绕而产生 2.取消元素之间的空格
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: red;}.box1 img{width: 100px;height: 100px;float: left;/*把img浮动了p标签感受不到浮动但是文字inlineinline-black可以感受到浮动也就是可以对浮动元素进行环绕*/}/style
/head
bodydiv classbox1img src../img/天使美女.jpg alt天使美女p大概傻大个法大纲规范三国杀矮冬瓜法大纲刚发的嘎阿纲傻瓜蛋傻大个啥风格烦得很昂返回的是沙沟湖大哥大哥昂很多事/p/div
/body
/html浮动元素父级高度塌陷
当父级元素没有设置高度时高度会由文档流内容撑开而当子元素浮动之后脱离了文档流所以父级高度也就不会被撑开了这对我们后续的布局结构会造成很多困扰
解决方法
1.定高
2.为父级元素设置overflow:hidden
3.设置清除浮动样式
clear:清除浮动属性
clear:left清除左浮动
clear:right清除右浮动
clear:both同时清除左右浮动position属性定位篇
相对定位relative为属性值配合left属性和top属性使用
相对定位能让元素保持文本流位置的同时可以通过方位属性x/y轴进行相对原位置的偏移单纯写个定位是没有用的必须要配合方向
特点
1.相对定位不设置偏移量不会有任何变化和对页面的影响
2.参照自身位置进行定位
3.不会脱离文档流!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: red;position: relative;left: 100px;/*距离左边多少px*/top: 100px;/*距离上方多少px*/}/style
/head
bodydiv classbox/div
/body
/html绝对定位absolute属性值
绝对定位能让元素完全脱离文档流会使用方位属性lefttop等相对于最近的有定位有relative属性的的父级元素进行偏移
特点
1.找不到最近的定位有relative属性的父级则相对于body标签
2.一般配合相对定位使用参照物
3.完全脱离文档流父相子绝
父元素为相对定位子元素为绝对定位子元素会根据移动后的父元素位置显示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;border: 10px solid red;margin: 100px auto;position: relative;}.box1{width: 100px;height: 100px;border: 10px solid red;margin: 20px auto;}.box2{width: 20px;height: 20px;border: 10px solid red;position: absolute;/*绝对定位必须存在方位属性否则无效。如果存在relative则relative的地方就是父级如果没有relative则默认以body为父级*/left: 0;top: 0;}/style
/head
bodydiv classboxdiv classbox1div classbox2/div/div/div
/body
/html固定定位fixed属性值垃圾广告案例
固定定位把元素固定在网页的一个位置拖动鼠标滑轮元素不移动偏移量
四个方向: top: ↑ 顶部偏移right: → 右侧偏移bottom: ↓ 底部偏移left: ← 左边偏移左上为尊 左上的优先级高一般不会写上下 左右方向
一般只用top和left
