网页布局的三种方式

1.盒子模型(Box Model)
    1.1边框border

        【属性:border-width粗细;border-style样式(solid实线,dashed虚线,dotted点线); border-color颜色】    
        【复合写法:border:5px solid red;分开写法:border-top:5px solid red;】
        【表格细线边框:border-collapse:collapse;合并相邻的边框】
    1.2内边距padding

        【属性:padding-left/top/bottom/right】
        【1个值(上下左右);2个值(上下,左右);3个值(上,左右,下),4个值(上,右,下,左)】
        【盒子已经有高度和宽度,再指定内边框会撑大盒子;应让width/height减去多出来的距离大小】
    1.3外边距margin

        【属性:margin-left/top/bottom/right】
        【外边距可以让块级盒子水平居中,条件:1盒子指定了宽度;2盒子左右的外边距都设置为auto;margin:0 auto;】
        【行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可】
   1.4清除内外边距

        【*{margin:0;padding:0;}】
    【注:行内元素为了照顾兼容性,尽量只设置左右内外边距,可转化为块级元素或者行内块元素】
    【去掉li前面的小圆点:li {list-style:none;}】
2.圆角边框border-radius:length;
    【radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果】
    【正方形变圆,设置为高度或者宽度的一半/50%;矩形,设置为高度的一半】
3.浮动float
    【属性:none;left;right;】
    【脱离标准普通流的控制(浮)移动到指定位置(动);浮动的盒子不再保留原来的位置】
    【如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列;添加浮动后,为行内块元素】
    【约束浮动:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符号网页布局第一准则】
    清除浮动:父盒子不给高度,子盒子浮动不占有位置,父级盒子高度为0,就会影响下面的标准流盒子
        (1)【额外标签法:在浮动元素末尾加上一个空标签,例如<div style=”clear:both”></div>;新标签必须为块级元素】
        (2)【父级添加overflow:属性值设置为hidden、auto、scroll】
        (3)【:after伪元素法:给父级添加;.clearfix:after{content:””; display:block; height:0; clear:both; visibility:hidden;}    .clearfix:{*zoom:1;}】
        (4)【双伪元素清除浮动:.clearfix:before,.clearfix:after{content:””;display:table;}    .clearfix:after{clear:both;}    .clearfix:{*zoom:1;}】
4.CSS属性书写顺序(重点)
    (1)【布局定位属性:display/position/float/clear//visibility/overflow】
    (2)【自身属性:width/height/margin/padding/border/background】
    (3)【文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word】
    (4)【其他属性:content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient】
5.页面布局整体思路
    (1)【必须确定页面的版心(可视区),我们测量可知】
    (2)【分析页面中的行模块,以及每个行模块中的列模块,就是页面布局第一准则】
    (3)【一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则】
    (4)【制作HTML结构,我们还是遵循,先有结构,后有样式的准则,结构永远最重要】
    (5)【所以,先理清除布局结构,再写代码尤为重要,这需要我们多谢多积累】
6.导航栏注意点:实际开发中,我们不会直接用链接a而是用li包含链接(li+a)的做法
    【li+a语义更清晰;如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑,从而影响网站排名】    
    【注:1让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示;、
        2这个导航栏可以不给宽度,将来可以继续添加文字;
        3由于导航栏里面文字不一样多,最好给链接a左右padding撑开盒子,而不是指定宽度】
7.定位=定位模式+边偏移
    (1)定位模式position

        【属性值:static静态;relative相对;absolute绝对;fixed固定】
    (2)边偏移

        【属性:top;bottom;left;right】
    (3)静态定位static

        【默认定位,无偏移】
    (4)相对定位relative

        【参照点为自己原来的位置;不脱标,继续保留原来的位置】
    (5)绝对定位absolute

        【如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Docunment文档)】    
        【如果祖先元素有定位,则以最近一级的有定位祖先元素为参考点移动位置】
        【绝对定位不再占有原来的位置(脱标)】
    (6)子绝父相

        【1子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他兄弟盒子】
        【2父盒子需要加定位限制子盒子在父盒子内显示】
        【3父盒子布局时,需要占有位置,因此父亲只能是相对定位】    
    (7)固定定位fixed

        【1以浏览器的可视窗口为参照点移动元素】
        【2和父元素没有关系;3不随滚动条滚动;4固定定位不再占有原来的位置】
    (8)粘性定位sticky

        【1以浏览器的可视窗口为参照点移动元素】
        【2粘性定位占有原来的位置;3必须添加人top,bottom,left,right中的一个】
    (9)定位叠放次序z-index

        【选择器{z-index:1;}】
        【数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上】    

    原文作者:一题,hour++
    原文地址: https://blog.csdn.net/weixin_63507313/article/details/122801262
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞