Day3-课堂笔记-CSS

作者: 晓晓的忍儿 | 来源:发表于2018-08-15 12:54 被阅读0次

Day3-课堂笔记-CSS
css课堂笔记
CSS 课堂笔记
29 进阶：用jQuery做个轮播
CSS 自学笔记（中）
CSS 自学笔记（上）
0627java进度笔记整理
HTML的20/80原则
CSS 自学笔记（下）
3/14今日读书《匠人精神》补更

1.选择器的权重

1）类型选择器:

元素选择器：0001
class选择器：0010
id选择器：0100
层级(包含)选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
权重越值大，优先级越高

2.浮动

1）标准流：

块标签一个占一行，从上往下布局。行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行

2）脱流：

浮动、定位

3）浮动：

就是让竖着显示的标签横着显示
float:left和right
注意：如果要使用浮动，那么同级的的所有标签也要浮动，如果父标签浮动，那么子标签也会跟着浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*div{
                float: left;
            }*/
            
            /*#red{
                float: left;
            }*/
            #top{
                width: 100%;
                height:100px;
                background-color: red;
                float: left;
            }
            #left{
                width: 25%;
                height: 480px;
                background-color: green;
                float: left;
            }
            #center{
                width: 60%;
                height: 480px;
                background-color: darkmagenta;
                float: left;
            }
            #right{
                 width: 15%;
                 height: 480px;
                 background-color: forestgreen;
                 float: left;
            }
            #bottom{
                 width: 100%;
                 height: 80px;
                 background-color: darkgoldenrod;
                 float: left;
            }
        </style>
    </head>
    <body >
        <!--<div id="" style="width: 500px;" align="center">
            <div id="top"style="width: 500px;height: 80px;background-color: red;">
            div1
            </div>
            <div id="left" style="width: 150px;height: 300px;background-color: green;">
                div2
            </div>
            <div id="center" style="width: 250px;height: 300px;background-color: darkmagenta;">
                div3
            </div>
            <div id="right" style="width: 100px;height: 300px;background-color: forestgreen;">
                div4
            </div>
            <div id="bottom" style="width: 500px;height: 60px;background-color: darkgoldenrod;">
                div5
            </div>
        </div>-->
        <!--============-->
        <!--<div id="top"style="width: 100%;height:100px;background-color: red;">
        div1
        </div>
        <div id="left" style="width: 25%;height:480px;background-color: green;">
            div2
        </div>
        <div id="center" style="width: 60%;height: 480px;background-color: darkmagenta;">
            div3
        </div>
        <div id="right" style="width: 15%;height: 480px;background-color: forestgreen;">
            div4
        </div>
        <div id="bottom" style="width: 100%;height: 80px;background-color: darkgoldenrod;">
            div5
        </div>-->
        <div id="top">
            div1
        </div>
        <div id="left">
            div2
        </div>
        <div id="center">
            div3
        </div>
        <div id="right">
            div4
        </div>
        <div id="bottom">
            div5
        </div>
    </body>
</html>

结果：

div模型.JPG
练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #main{
                width: 500px;
                height: 600px;
                left: 400px;
                top: 50px;
                position: absolute;
                text-align: center;
            }
            #top{
                width: 100%;
                height: 100px;
                background-color: green;
                float: left;
            }
            #left{
                width: 20%;
                height: 400px;
                background-color: brown;
                float: left;
            }
            #right_top{
                width: 80%;
                height: 100px;
                background-color: yellow;
                float: left;
            }
            #center{
                width: 60%;
                height:300px;
                background-color: blue;
                float: left;
            }
            #right_center{
                width: 20%;
                height: 100px;
                background-color: aquamarine;
                float: left;
            }
            #right_botoom{
                width: 20%;
                height: 250px;
                background-color: red;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="top">
                div1
            </div>
            <div id="left">
                div2
            </div>
            <div id="right_top">
                div3
            </div>
            <div id="center">
                div4
            </div>
            <div id="right_center">
                div5
            </div>
            <div id="right_botoom">
                div6
            </div>
        </div>
        
    </body>
</html>

结果：

练习.JPG

3.文字环绕：被文字环绕的标签浮动，文字标签不浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                float: left;
                width: 60px;
                height: 60px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了，<br />地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看,<br />了
            地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了，<br />地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了
        </div>
        </div>
        </div>
        </div>
    </body>
</html>

结果：

文字环绕.JPG

4.清除浮动

1清除浮动：

是指清除因为浮动而产生的问题(高度塌陷)--问题不是任何时候都会产生的

1）添加空的div

在父标签里(高度塌陷的标签)的最后添加一个空的div，并且设置这个div的样式表：clear：both
缺点：可能会产生大量的额外的代码

2）设置overflow:

在父标签的样式中overflow的值设为hidden

3）万能清除法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*方案二*/
            /*.clear{
                overflow: hidden;
            }*/
            /*清除浮动放啊*/
            .clear:after{
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .clear{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: green; " class="clear">
            <div style="width: 30%;height: 200px; background-color: blueviolet; float: left;"></div>
            <div style="width: 30%;height: 200px;background-color: black;float: left;"></div>
            <!--清除浮动方案1-->
            <!--<div id=""style="clear: both;"></div>-->
                
            
        </div>
        <div style="height: 100px; background-color: red;"></div>
    </body>
</html>

结果：
为清除：

塌陷.JPG

已清除：

清除塌陷.JPG

5.Display

HTML中标签分为块和行内
CSS中标签分为3类：块、行内块、行内(display)
block:块(一个占一行，默认宽度100%，高度根据内容来定；直接设置宽高有效)
inline-block：行内块(一行可以有多个，默认宽高由内容来定，直接设置宽高有效)
input
inline:行内(一行可以有多个，默认宽高有内容来定，直接设置宽高无效)
span
注意：
通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换--前提是在标准流中
inline-block标签的右边默认都有一个空隙，不能和其他标签无缝连接(无法解决)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span id=""style="width: 50px;height: 50px;background-color: greenyellow;">
            dfsdf
        </span>
        <span id="" style="display: inline-block;width: 50px;height: 60px;background-color: red;">
            sdfsfsf
        </span>
        <span id="" style="display: block;width: 50px;height: 60px;background-color: red;">
            sdfsfd<br/>sfdfsf
        </span>
    </body>
</html>

结果：

Display.JPG

6.定位

1）距离

top：标签顶部距离其他标签的位置
bottom：标签底部距离其他标签的位置
left：标签左边距离其他标签的位置
right：标签右边距离其他标签的位置

2）position

想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
initial：(默认值)没有参考对象
absolute：绝对定位，相对父标签进行定位且其position的值不是static和initial
relative:正常位置定位(根据自己在标准流中的开始位置来定位)
fixed:相对于浏览器定位
sticky:不够一屏(不滚动)的时候相对于标准流定位，滚动的时候相对于浏览器定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                
                width: 400px;
                height: 1000px;
                background-color: red;
                /*top: 120px;*/
                /*margin-top: 320px;*/
                /*top: 200px;*/
                position: relative;
            }
            #d2{
                width: 50px;
                height: 50px;
                background-color: black;
                bottom: 70px;
                right: 40px;
                position: fixed;
            }
            #d3{
                
                height: 50px;
                background-color: green;
                bottom: 20px;
                position: sticky;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                
            </div>
        </div>
        <div id="d3" >
            
        </div>
    </body>
</html>

结果：

简书.JPG

7.盒子模型

每个标签都是由四个部分组成：

1）内容：

显示标签内容的部分，可见(给标签设置宽和高的值，就是设置内容部分的大小)

2)padding(内边距):

可见，不能显示内容(通过设置padding来改变其值，默认值0)

3)border(边框)：

可见，如果有内边距边框就显示在内边距上，否则显示在内容上

4)margin(外边距)：

不可见，但会占据浏览器的控件

5)radius(设置圆角)

例
border-bottom-right-radius:；;
border-radius:;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*注意：以后在写网页的时候，在样式表的最前面关闭自带的所有的margin和padding*/
            /**{
                margin: 0;
                padding: 0;
            }*/
            body,a,p{
                margin: 0;
                padding: 0;
            }
            div{
                background-color: rosybrown;
                /*设置内容大小*/
                width: 100px;
                height: 100px;
                /*设置padding的值，有四个*/
                /*可单独设置*/
                padding-left: 10px;
                padding-top: 10px;
                /*可以一起设置*/
                padding: 10px;/*四边边距都是10*/
                padding: 20px,40px;/*上下20,左右40*/
                /*设置边框*/
                /*可以单独设置*/
                /*格式:宽度  样式  颜色*/
                /*样式：solid-实线 dotted-点状线 double-双线 dashed-虚线*/
                /*border-left:5px solid red ;*/
                /*同时设置四条边的宽度样式颜色*/
                border: 3px solid black;
                border-left: 10px solid red;
                /*外边距*/
                /*单独设置边*/
                margin-top:50px ;
                margin-left:50px ;
                /*同时设置多个*/
                /*设置顺序为顺时针*/
                margin: 100px;
                /*设置圆角*/
                border-top-left-radius: 20px;
                border-bottom-right-radius: 20px;
                /*border-radius:30px ;*/
            }
        </style>
    </head>
    <body>
        <div id="">
            abs
        </div>
    </body>
</html>

结果：

简书1.JPG

8.居中

1)垂直居中

固定标签的高度
设置属性line-height的值和高度一样

2）水平居中

text-align:center

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                height: 100px;
                /*width: 100%;*/
                line-height: 100px;
                text-align: center;
                background-color: hotpink;
            }
            p{
                display: inline-block;
                /*margin-top:25px ;*/
                height: 50px;
                line-height: 50px;
                width: 200px;
                background-color: green;
                /*position: absolute;*/
                
            }
        </style>
    </head>
    <body>
        <div id="">
            <p>窗前明月光，疑是地上霜</p>
        </div>
    </body>
</html>

结果：

简书2.JPG