html前端页面布局
前端小布丁
这个作者很懒,什么都没留下…
展开
-
html页面布局—定位
相对定位:1)、相对的是自身原有的位置2)、相对定位移动后,会保留原有位置(可以使用定位占用,但普通写法时,无法占用)3)、不会影响文档流position:relative; — 开启该元素的定位具体的位置:left、top//父级.main{ width: 500px; height: 500px; border:1px solid; position: relative;...原创 2020-01-31 19:52:05 · 553 阅读 · 0 评论 -
html中页面布局—浮动
folat:浮动none:不浮动,默认left:向左浮动right:向右浮动auto:根据自身所占位置,自动居中1)、自身必须有宽高2)、inline-block或folat都会使auto失效3)、需要填写具体值来调整元素位置浮动产生的影响:1)、自身的父元素无法获取宽高2)、后续的元素会自动补位3)、浮动会脱离当前文档流,覆盖标准流的元素4)、auto会失效5)、块元素...原创 2020-01-31 15:58:44 · 1600 阅读 · 0 评论 -
padding和margin—内边距和外边距
标准盒模型:元素(块元素或内联块)的实际大小 = 内容 + padding + borde , width / height 只是去设置盒模型中的内容区域。标准盒模型的结构:将文件在浏览器中打开,鼠标右击检查,就可以查看了。之前所学习的对齐方式:text-align line-height vertical-align全部都是在内容区域中的对齐。而盒模型的属性是针对整个内容区域来布局调...原创 2020-01-30 18:11:48 · 2021 阅读 · 0 评论 -
html页面布局
块元素:独占一行,可以设置宽高以及内外边距。行元素:只占内容大小的区域,不可以设置宽高和内外边距。块元素具备盒模型的属性。行元素不具备盒模型的属性。display:元素的显示方式black:块元素inline-block:行内块元素(内联块元素)none:无(隐藏),不单单是视觉上的,页面布局中也彻底消失,不占位置消除inline-block导致的元素间隔的方法:方法1:删除标签...原创 2020-01-30 17:31:31 · 326 阅读 · 0 评论