CSS布局问题_牛客博客

一、位置和宽度

clientWidth = width+左右padding
clientHeigh = height + 上下padding
clientTop = boder.top(上边框的宽度)
clientLeft = boder.left(左边框的宽度)
offsetWidth = width + 左右padding + 左右boder
offsetHeith = height + 上下padding + 上下boder
offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框内边缘的距离。如果父级都没有定位，则是到body 顶部的距离
offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent）左边框内边缘的距离。如果父级都没有定位，则是到body左边的距离
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
scrollTop :内容层顶部到可视区域顶部的距离。
scrollLeft:内容层左端到可视区域左端的距离.

二、margin负值问题

三、BFC

BFC:

它是独立渲染区域，它内部元素的渲染不影响外界元素

形成条件：

（overflow:hidden)

使用BFC可以清除浮动

四、float布局

圣杯布局和双飞翼布局；：

（自适应）

技术要点：

使用float布局

两侧使用margin负值，使两侧内容和中间内容横向重叠，

为防止中间内容被两侧覆盖，圣杯布局用padding，双飞翼布局用margin

圣杯布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
                /*使用padding防止中间内容被两侧覆盖*/
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
                        /*设置margin-right为负值，从原理上来说
                        是#right元素不动，其右边的元素的向左移动，但由于#right右边无元素，
                        从效果上来说，margin-right设置为负值后，#right元素的宽度被掩盖，
                        没有宽度，因此能够挤到第一行*/
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
                        /* clear:both*/
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

双飞翼布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }
               /*通过margin为两侧留白*/
        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

手写clearfix:

clearfix 和 clear 的区别：

用 clear 清除：在浮动元素后增加一个空标签

用clearfix清除：给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。

五、flex

设置display: flex属性可以把块级元素在一排显示。

在容器（父元素）上设置display: flex，可以改变项目（子元素）的排列顺序。默认为从左往右依次排列,且和容器（父元素）左边没有间隙。

在项目（子元素）设置flex属性,可以设置项目相对于容器的占比 flex:n。flex属性的值只能是正整数,表示占比多少。

设置了flex之后，子元素的float、clear和vertical-align属性将失效

（flex容器内存在两根轴：水平的主轴main axis 和垂直的交叉轴cross axis

有6个属性设置在容器上：

flex-direction：项目的排列方向 row/row-reverse/column/column-reverse

flex-wrap：设置换行 nowrap/wrap/wrap-reverse

flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content：定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around

align-items：定义项目在交叉轴上对齐方式 flex-start | flex-end | center | baseline | stretch

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

有6个属性设置在项目上：

（flex-grow flex-shrink flex-basis 不常用）

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0 order: <integer>

flex：定义各项目所占的比例

align-self：单独设置该项目的对齐方式，默认继承父元素的align-items属性，若设置，则可覆盖继承的align-items属性

用flex画骰子的一个面时，记住！！选择器要用 .item:nth-child(n) 这个结构伪类选择器

补充——其他的结构伪类选择器有：

:first-child	article span:first-child 选择子元素中的span并且该span第一个子元素
:first-of-type	article span:first-of-type 选择子元素中span中的第一个元素
:last-child	article span:last-child 选择元素中span 标签并且是最后一个
:last-of-type	article span:last-of-type 选择类型为span 的最后一个元素
:only-child	article span:only-child 选择是唯一子元素的span 标签
:only-of-type	article span:only-of-type 选择同级中类型是span 的唯一子元素
:nth-child(n)	article span:nth-child(2) 选择第二个元素并且是span标签的
:nth-of-type(n)	article span:nth-of-child(2) 选择第二个span 元素，不管中间的其他元素
奇数元素	table tr>td:nth-child(odd)
偶数元素	table tr>td:nth-child(even)
:nth-last-child(n)	从最后一个元素开始获取
:nth-last-of-type(n)	从最后一个元素开始选择span 标签
:not(selector)	ul li:not(:nth-child(1)) 排除第一个li元素

注：child 和 type的区别：

ele:nth-child(n) : 指的是父元素下第n个元素且这个元素是ele，若没有，则选择失败

ele:nth-of-type(n) ：是以“type”来区分的，ele:nth-of-type(n)指的是父元素下第n个ele元素。

要想着用这些选择器！！！不要在犯傻了！！！！！

画骰子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
                        /*容器设置flex*/
            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
                /*！！！想着用这些选择器！！！！*/
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>