day 49 html 学习 css 学习

画圆

   <style>

        div{width: 100px;

            height:100px;

            border: solid red 3px;

            /*当弧度为。圆角半径为30时 得到的图像*/

            border-radius:30px}

    </style>

    <style>

        div{width: 100px;

            height:100px;

            border: solid red 3px;

            /*当弧度为。圆角半径为55时 得到的图像 这里注意，圆角半径为50时不是圆形*/

            border-radius:55px}

    </style>

css中圆角，当使用一个值时，确定为圆角；当使用两个值时，确定一个椭圆圆角，

  <style>

        div{width: 100px;

            height:100px;

            border: solid red 3px;

            /*当弧度为。圆角半径为55时 得到的图像 这里注意，圆角半径为50时不是圆形*/

            border-radius:20px 40px}

    </style>

清除浮动

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。

<style>

        /*div{border: 2px solid red}*/

        .d1{float: left;width: 100px;height: 100px;background-color: #8eb031}

        /*没有设置clear: left;时的效果，直接在上一个块的右边飘过去了*/

        .d2{float: left;width: 120px;height: 120px;background-color: rosybrown}

    </style>

</head>

<body>

<div>

    <div class="d1"></div>

    <div class="d2"></div>

 <style>

        /*div{border: 2px solid red}*/

        .d1{float: left;width: 100px;height: 100px;background-color: #8eb031}

        /*在这里清除了左标签浮动，直接下一行显示d2图像*/

        .d2{clear:left;float: left;width: 120px;height: 120px;background-color: rosybrown}

    </style>

</head>

<body>

<div>

    <div class="d1"></div>

    <div class="d2"></div>

为什么父元素会坍塌？

这是因为内部的元素因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的父容器不会被撑开。

例子

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>副吉他弦</title>

    <style>

        div{border: 1px solid green}

        .d1{float: left;width: 100px;height: 100px;background-color: #8eb031}

        /*在这里清除了左标签浮动，直接下一行显示d2图像*/

        .d2{float: left;width: 110px;height: 110px;background-color: rosybrown}

</head>

<body>

<div>

    <div class="d1"></div>

    <div class="d2"></div>

</div>

</body>

效果图：父元素高度塌陷了

怎么解决？

方法1：

在使用float元素的父元素最后加一个div：

 <style>
        div{border: 1px solid green}
        .d1{float: left;width: 100px;height: 100px;background-color: #8eb031}
        /*在这里清除了左标签浮动，直接下一行显示d2图像*/
        .d2{float: left;width: 110px;height: 110px;background-color: rosybrown}
　　　　　　/*加了一个块级标签，不浮动，可以看到*/
        .d3{width: 250px;height: 150px;background-color: grey}
    </style>
</head>
<body>
<div>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>

效果如下：可以看到加了一个d3 没有设置浮动，直接在以原点为基准，创建出来了一个块级div3 然后父级的块被撑起来了

可以看出，父容器已经不再坍塌了

方法2：

在使用float元素的父元素添加overflow:hidden;（只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。）

		#container {

			border: 1px solid green;

			overflow: hidden;

			zoom: 1;

		}

效果和方法1是一样的。

方法3：重要常用这种方法*****

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>副吉他弦</title>

    <style>

        div{border: 1px solid green;}

        .d1{float: left;width: 100px;height: 100px;background-color: #8eb031}

        /*在这里清除了左标签浮动，直接下一行显示d2图像*/

        .d2{float: left;width: 110px;height: 110px;background-color: rosybrown}

        /*加一句这 可以灵活的解决父级塌陷问题 重要，用这种方法解决父级塌陷*/

        .clearfix:after{content: "";

            display: block;

        clear:both}

    </style>

</head>

<body>

<div class="c clearfix">

    <div class="d1"></div>

    <div class="d2"></div>

</div>

</body>

float属性

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

清除浮动

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。

父标签塌陷问题

.clearfix:after {

  content: "";

  display: block;

  clear: both;

}

overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

定位（position）

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>定位</title>

    <style>

        .c1{height: 200px;

            width:200px;

            background-color: #8eb031}

        .c2{height: 200px;

            width:200px;

            /*相对定位的写法和效果*/

            background-color:rebeccapurple;

            position:relative;

            left: 200px;

            top:200px;

            }

        .c3{height: 200px;

            width:200px;

            background-color:salmon}

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>定位</title>

    <style>

        *{margin: 0;

        padding: 0}

        .c1{height: 200px;

            width:200px;

            background-color: #8eb031}

        .c2{height: 200px;

            width:200px;

            /*绝对定位的写法和效果*/

            background-color:rebeccapurple;

            position:absolute;

            left: 200px;

            top:200px;

            }

        .c3{height: 200px;

            width:200px;

            background-color:salmon}

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

示例代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>定位</title>

    <style>

        *{margin: 0;

        padding: 0}

        .c1{height: 200px;

            width:200px;

            background-color: #8eb031}

        .c2{height: 200px;

            width:200px;

            /*相对定位的写法和效果*/

            background-color:rebeccapurple;

            position:absolute;

            left: 200px;

            top:200px;

            }

        .c3{height: 200px;

            width:200px;

            background-color:salmon;

            position: absolute ;

            left: 10px;

            top:2000px}

        .c4{height: 60px;

            width:180px;

            background-color:grey;

            /*设置fixed 标签，当滑动滚动条时，它在位置不动*/

            position: fixed;

            right:20px;

            bottom: 15px;

            text-align: center;

            line-height: 60px;

            }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

<div class="c4"> 你好啊啊</div>

</body>

</html>

设置背景图案上加一层可调节透明度的黑色，达到调节背景明暗的效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>磨砂背景</title>

    <style>

        body{background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514202734157&di=6567baf0d1f4ffa734799c27ed72fbda&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_960x600%2Fg1%2FM00%2F0A%2F02%2FooYBAFPPI-aIIgUnABCqJHX4L7oAABxegKslqAAEKo8268.jpg");

            background-repeat: no-repeat;

            background-size: cover;

            height: 720px;

          }

        /*给body 的背景颜色加上一个模，让他显得黑 相当于给背景图片加了一层滤镜颜色*/

        div{position: fixed;

            /*全为0的时候就直接在背景图片的上层覆盖显示*/

            top:0;

            right: 0;

            bottom: 0;

            left: 0;

            /*rgba是设置颜色和透明度，透明度为1时则不透明*/

            background-color:rgba(0,0,0,0.8);

           }

    </style>

</head>

<body>

<div>

</div>

</body>

</html>

z-index

#i2 {

  z-index:;

}

设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。

让一个模态框太正中间显示的方法 内用中要办法

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>磨砂背景</title>

    <style>

        body{background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514202734157&di=6567baf0d1f4ffa734799c27ed72fbda&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_960x600%2Fg1%2FM00%2F0A%2F02%2FooYBAFPPI-aIIgUnABCqJHX4L7oAABxegKslqAAEKo8268.jpg");

            background-repeat: no-repeat;

            background-size: cover;

            height: 720px;

          }

        /*给body 的背景颜色加上一个模，让他显得黑 相当于给背景图片加了一层滤镜颜色*/

        div{position: fixed;

            /*全为0的时候就直接在背景图片的上层覆盖显示*/

            top:0;

            right: 0;

            bottom: 0;

            left: 0;

            /*rgba是设置颜色和透明度，透明度为1时则不透明*/

            background-color:rgba(0,0,0,0.8);

           }

    </style>

</head>

<body>

<div>

</div>

</body>

</html>