网页制作门户网站案例,net域名网站,自己做网站系统,网站开发询价函目录 1.显示模式display
2.定位position
3.元素溢出overflow
4.float浮动 1.显示模式display
显示模式常见元素特点块级元素div标签、h1-h6、p、form、header、footer、section、ul、li、ol、dl、dt独占一行#xff0c;默认垂直布局#xff0c;没有设置宽高时宽度继承父级…目录 1.显示模式display
2.定位position
3.元素溢出overflow
4.float浮动 1.显示模式display
显示模式常见元素特点块级元素div标签、h1-h6、p、form、header、footer、section、ul、li、ol、dl、dt独占一行默认垂直布局没有设置宽高时宽度继承父级高度由内容撑开。可以设置宽高具有盒子模型的特点行内元素span标签、strong、em、i、a、b一行可存放多个默认水平布局默认宽度和高度由内容撑开不能设置宽高只能设置左右的外边距、上下左右的内边距和边框。一般容纳文本或者其他行内元素不嵌套块级和行内块级元素行内块元素img、input一行存放多个默认水平布局默认宽度和高度由内容撑开可以设置宽高具有盒子模型的特点
2.定位position
可让标签压在一起显示 静态定位position-static不受left、rigth等方位设置的影响。 相对定位 position: relative;改变位置的参照物是自己原来的位置不脱标占位标签显示模式特点不变。受left、rigth等方位设置的影响。 绝对定位 position:absolute;子级绝对定位父级相对定位子绝父相。子级先找最近的已经定位的祖先元素如果祖先元素都没有定位则参照浏览器可视区域位置。宽高生效具备了行内块的特点。受left、rigth等方位设置的影响。 定位居中 固定定位 position:fixed; 元素的位在网页滚动时不滚动。脱标不占位参照物是浏览器窗口。受left、rigth等方位设置的影响。 粘性定位position-sticky根据滚动位置在相对relative和固定fixed之间切换。
!DOCTYPE html
html
head
style
/* 注意Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀请参见下面的实例。您还必须至少指定 top、right、bottom 或 left 之一以便粘性定位起作用。*/
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
/style
/head
bodyp请试着在这个框架内b滚动/b页面以理解粘性定位的原理。/pdiv classsticky我是有粘性的/divdiv stylepadding-bottom:2000pxp在此例中当您到达元素的滚动位置时粘性元素将停留在页面顶部top: 0。/pp向上滚动以消除粘性。/pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./p
/div/body
/html 堆叠层级按照标签书写顺序后来者居上作用设置定位元素的层级顺序改变定位元素的显示顺序。
z-index: xx默认是0为整数取值越大显示顺序越靠上 3.元素溢出overflow
属性描述overflow规定如果内容溢出元素框会发生什么情况。overflow-x规定在元素的内容区域溢出时如何处理内容的左/右边缘。overflow-y指定在元素的内容区域溢出时如何处理内容的上/下边缘。 4.float浮动
作用让块状元素水平排列
属性名float
属性值left/right
特点顶对齐具备行内块显示模式特点浮动的盒子可能“脱标”脱离标准流的控制不再占标准流的位置
清除浮动
场景浮动元素脱标如果父级没有高度子级无法撑开父级高度可能导致页面布局错乱。如果一个元素比包含它的元素高并且它是浮动的它将“溢出”到其容器之外
解决办法清除浮动 额外标签法在父级元素内容的最后添加一个块级元素一般将标签类名设置为clearfix设置CSS属性 clear:both 单伪元素法给父级元素添加类名clearfix在CSS中写如以下代码 双伪元素法推荐常用给父级元素添加类名clearfix在CSS中写如以下代码 overflow给父级元素添加CSS属性 overflow:hidden 【记录学习过程的笔记欢迎大家一起讨论会持续更新】
