怎样不用代码就能建网站,文化馆网站数字化建设介绍,网站建设必须注意的事项,可以直接做海报的网站1. 浮动
浮动可以使一个元素脱离自己原本的位置#xff0c;并在父元素的内容区中向左或向右移动#xff0c;直到碰到父元素内容区的边界或者其它浮动元素为止。
值描述left元素向左浮动right元素向右浮动
普通文档流#xff1a;浏览器在默认情况下规定一个块元素在父元素…
1. 浮动
浮动可以使一个元素脱离自己原本的位置并在父元素的内容区中向左或向右移动直到碰到父元素内容区的边界或者其它浮动元素为止。
值描述left元素向左浮动right元素向右浮动
普通文档流浏览器在默认情况下规定一个块元素在父元素内的排列规则 从上往下排列 从左开始排列 一个块元素占一行
.parent {width: 800px;height: 400px;border: 10px solid blue;
}
.box1 {width: 250px;height: 80px;background-color: #ed7d31;
}
.box2 {width: 400px;height: 100px;background-color: #70ad47;
}
.box3 {width: 200px;height: 200px;background-color: #7030a0;
}
div classparentdiv classbox1/divdiv classbox2/divdiv classbox3/div
/div浮动之后的文档流
.parent {width: 800px;height: 400px;border: 10px solid blue;
}
.box1 {float: left;width: 250px;height: 80px;background-color: #ed7d31;
}
.box2 {width: 400px;height: 100px;background-color: #70ad47;
}
.box3 {width: 200px;height: 200px;background-color: #7030a0;
9.1 浮动元素父级高度塌陷
当父级元素没有设置高度时高度会由文档流内容撑开。而当子元素浮动之后脱离了文档流所以父级高度不会被撑开这对我们后续的布局结构会造成很多困扰。 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 在父元素的末尾添加空的块元素。设置clear:both;清除浮动 为父元素设置overflow:hidden;解决高度为0 2. 定位
定位postion属性可以让我们将元素从文档流中取出然后使用方位词属性left top right bottom精准的控制它的位置。
不同的定位值可以使元素拥有不同的表现形式例如放在另外一个元素上面或者固定在浏览器的显示区某个位置。
10.1 relative
相对定位能让元素保持原文本流位置的同时可以通过方位属性进行相对于原位置的偏移。 不会脱离文档流 不影响元素本身的任何特性 如果不加方位词偏移那么没有任何影响
10.2 absolute
绝对定位能让元素脱离文档流原地起飞...使用方位属性相对于最近的有定位的父级元素进行偏移
方位属性left和top 优先级比 right和bottom高比如一个元素既拥有left也拥有right最终位置以left为准。 脱离文档流 元素宽高默认值为0可以设置宽度高度可以设置内外边距 找不到最近的定位父级则相对于body标签 一般配合相对定位使用参照物 设置了绝对定位,没有设置层级;html后写居上 margin:auto 暂时失效
10.3 fixed
固定定位能让元素脱离文档流使用方位属性相对于浏览器可视区进行偏移 脱离文档流 元素宽高默认值为0 margin:auto失效
10.4 层级
定位元素之间如果出现覆盖问题那么越到后面的元素优先级越高当然我们可以使用z-index层级属性来调整优先级。数值越大越靠上。 z-index属性只针对定位元素有效 取值为一个整数数字默认auto 或 0 可正可负
