选择器优先级、字体属性、背景属性、边框属性、display属性、盒子模型、浮动

今日学习内容总结

      在昨日的学习中，我们对from表单和css的各类选择器都进行了相应的学习。而今天的学习内容以css为重心。还是学习css的相应内容。

伪元素选择器#

      伪类元素选择器是通过css操作文本内容的选择器，作用是为某个元素的前面或者后面添加子元素。格式：

Copy
    1. 标签::before{属性: 值;}。在标签之前添加子元素

    2. 标签::after{属性: 值;}。在标签之后添加子元素

    3. content:在伪元素选择器中代表内容；

    4. visibility: hidden:将伪元素选择器隐藏

      使用案例：

Copy
    # css
    <style>
        div:before{
            content: 'hhhh';
            height: 50px;
            height: 100px;
            background-color: deepskyblue;
            display: block;
        }
        div:after {
            content: "22222";
            height: 50px;
            width: 100px;
            background-color: red;
            display: block;
            visibility: hidden;
        }
    </style>    

    # body
    <div>
        <p>内容</p>
    </div>

      实现效果为在内容上方有一个宽100px高为50px的hhhh内容。hhhh就是在div标签之前添加的元素中所代表的的内容。颜色背景为浅蓝色。而在div标签之后添加的内容用visibility功能隐藏了。使用场景：

Copy
    1.用于后面清除浮动带来的负面影响
    2.用于网站的内容防爬

选择器优先级#

      两个方向：相同选择器和不同选择器。

Copy
    1.相同选择器
    	就近原则 :谁离标签越近就听谁的。
    2.不同选择器 
    	行内选择器 > id选择器 > 类选择器 > 标签选择器

字体#

字体样式#

      css中的字体样式一般包含有就9中，常见的有7种。这7种依次为：

Copy
　　1.字体样式：font-family；

　　2.字体大小：font-size；

　　3.字体加粗：font-weight；

　　4.字体斜体：font-style；

　　5.颜色：color；

　　6.文本装饰线条：text-decoration；

　　7.文字阴影：text-shadow；

      写法案例:

Copy
    # 文字字体
    p { font-family:‘宋体'，'黑体', 'Arial’ }；

    # 文字大小
    p{font-szie：20px}

    # 字体粗细
    p { font-weight:bold;}

    # 字体颜色的三种方式
        # 方式1
        color: red;
        # 方式2:
        color: rgb(128, 128, 128);
        # 方式3:
        color: #4f4f4f;
    # 其实还有很多获取颜色的方式，比如截图软件，或者pycharm提供的取色器

    # 字体倾斜
    p { font-style: normal; }  # 其默认的属性值为normal，即正常显示的字体样式，其另外的两个属性值都讲呈现斜体的效果哦。

字体属性#

      字体属性主要体现在文字对齐，文字装饰以及首行缩进上。

Copy
    # 文字对齐
    	text-align:center/left/right

    # 文字装饰
    # a标签默认带下划线  并且有颜色(没有点击过是蓝色 点击过是紫色)
      text-decoration: none;  主要就是用于去除a标签的下划线
      text-decoration: line-through;               删除线
      text-decoration: overline;		   上边线
      text-decoration: underline;	       	   下划线

    # 首行缩进
    	text-indent: 32px;  # 首行缩进32px

      其实我们还可以使用浏览器做样式的动态调整，查找到标签的css，然后左键选中，通过方向键上下动态修改数值。

背景属性#

Copy
    # 背景颜色
    background-color : 任意合法的颜色 和 transparent　

    # 背景图片
    background-image : url(想要加载的图片）
        # 1. 背景图片平铺
　　　　background-repeat : 
　　　　　　 repeat：默认值水平垂直方向都平铺
　　　　　　 repeat-x : 水平方向平铺
　　　　　　 repeat-y : 垂直方向平铺
　　　　　　 no-repeat : 默认不平铺　
        # 2. 背景图片的尺寸
　　　　background-size ：value1    value2     宽度    高度    （单位px）
　　　　　　　　　　　　　　value%   value%    宽度    高度    （单位%）
　　　　　　　　　　　　　  cover ：全覆盖  将背景图等比放大知道背景图完全覆盖到元素的所有区域
　　　　　　　　　　　　　  contain : 包含  将背景图等比放大，直到下边或者右边有一个边缘碰到元素为止
        # 3. 背景图片固定 
　　　　background-attachment : fixed;(固定）
　　　　　　　　　　　　　　　　  scorll(滚动）

边框属性#

Copy
    # 1.自定义调整每个边的边框
      border-left/top/right/bottom-color: black;
      border-left/top/right/bottom-width: 5px;
      border-left/top/right/bottom-style: solid;
    # 2.统一调整每个边的边框
      border: 5px solid black;  顺序无所谓 只要给了三个就行
      """
      dotted	点状虚线边框
      dashed	矩形虚线边框
      solid	实线边框
      """
    # 3.画圆
      border-radius: 50%
      如果长宽一样那么就是圆 不一样就是椭圆

display属性#

      只要块儿级标签可以设置长宽，行内标签是不可以的(长宽有内部文本决定)。

Copy
    display:inline  让标签具备行内标签的特性(不能设置长宽)
    display:block   让标签具备块儿级标签的特性(可以设置长宽)
    display:inline-block  使元素同时具有行内元素和块级元素的特点
    display:none    隐藏标签(重点)  页面上不会保留位置也不显示
    visibility:hidde  也是隐藏标签 但是位置会保留

盒子模型#

      所有的标签其实都有一个盒子模型。盒子模型的组成成分：

Copy
    # 盒子模型
    # 内部物品											          
    content(内容)
      	内部物品与盒子内部的距离	 padding(内边距、内填充)
    盒子的厚度											 
         border\边框
    盒子与盒子之间的距离	margin(外边距)

      1.body标签默认自带8px的margin值，我们在编写页面之前应该去掉。

      margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

      使用语法：

Copy
    # 使用单独属性设置四边的距离
    #d2 {
            border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
            margin-top: 20px;       /*上边距为20px*/
            margin-right: 30px;     /*右边距为30px*/
            margin-bottom: 40px;    /*下边距40px*/
            margin-left: 50px;      /*左边距为50px*/
      }

    # 直接使用margin属性设置所有外边距
    #d2 {
            border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
            margin: 20px 30px 40px 50px; /*和上图所示效果完全一样,相当于上个案例的简化写法*/
      }

      使用margin简化写法注意事项:

Copy
    1. 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 

    2. 如果只提供一个，将用于全部的四边。 

    3. 如果提供两个，第一个用于上、下，第二个用于左、右。 

    4. 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 

      padding用法与margin一致，padding 是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

      一个元素的内边距区域指的是其内容与其边框之间的空间，内边距控制的是元素内部空出的空间，相反，margin 操作元素外部空出的空间。

      padding属性构成

Copy
    padding-top：内容上边距
    padding-bottom：内容下边距
    padding-left：内容左边距
    padding-right：内容右边距

浮动#

浮动简介#

      HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。

      float的四个值：

Copy
    left ：元素向左浮动。
　　right ：元素向右浮动。
　　none ：默认值。
　　inherit ：从父元素继承float属性。

浮动的影响#

      浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)。

      如果浮动的div前面有同级别html元素，该浮动的div会排在html元素后面浮动，不会覆盖html元素。 浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。

解决浮动造成的影响#

      前面div的浮动会影响后面的div的布局，如果想消除该影响可以使用clear:left | right | both。规定元素的哪一侧不允许其他浮动元素。

      代码示例：

Copy
    # css
    <style type="text/css">

    .outside{

        font-size:12px;

        font-family: Arail;

        padding:10px;

        background-color:#fffcd3;

        border:1px solid black;

        width:50%;

    }

    .inside1{

        padding:10px;

        border:1px dashed black;

        background:#a9d6ff;

        margin:5px;

        float:left;

        /* 1.div1向左漂浮之后，宽度为0

           2.div1移到父元素的左边

           3.div1的原始位置被空出来，由后面的html元素来补上。

        */

    }

    .inside2{

        padding:10px;

        border:1px dashed black;

        background:#a9d6ff;

        margin:5px;

        float:right;

    }

    .inside3{

        padding:10px;

        border:1px dashed black;

        background:#ffacd3;

        clear:both;

        /* left消除左边漂浮的影响

           right消除右边漂浮的影响

           both消除两边漂浮的影响

          */

    }

    </style>

    # body
    <div class="outside">

        <div class="inside1">内部div1</div>

        <div class="inside2">内部div2</div>

        <div class="inside3">内部div3</div>

    </div>