前端 day 021

一、浮动拓展

     1.添加浮动的元素不占据空间（脱离文档流）

     2.只要子元素有浮动，父元素必须有高度（如果父元素没有高度，父元素会坍塌）

二、页面布局拓展

     1.网页的版心（有内容的区域）

         1.ps中按cctrl+R显示出标尺，从标尺中拉出线条

     2.网页的外围结构

          1.id名称划分结构，外围宽度可以不写，或者写{width=100%；}

          2.版心宽度不能用百分比表示

     3.怎么让版心左右居中

          margin:0 auto;

三、列表的列表符号

     1.list-style-type:;  

       circle  

        square             

        none 清除列表符号

      2.List-style-image:url(./image/list.jpg); (路片的路径)

           把一张图片当作列表符号

      3.List-style-position：；

          inside    (内容区域里面)

          outside   (内容区域外面)

      4.list-style-none:;     

         清除默认列表符号

四、边框

       1.边框的位置

         在元素宽高之外

        2.border:10px solid pink;（简写/复合式写法）

             完整写法为： Border-width:10px;

                       Border-style:solid;

                       Border-color:pink;

             常用线条：

                     solid（实线）dashed（虚线）dotted（点状线）double（双线）none（没有线）

        3.给单一方向添加边框

              border-left:10px solid pink;

              border-right:10px solid pink;

              border-top:10px solid pink;

              border-bottom:10px solid pink;

 

      4.border的其他设置方法

         border-width/border-style/border-color

               1.这三个属性可以单独拿出来进行设置

               2.这三个属性每个最多能接收4个属性值

五、背景

1.背景颜色

    background-color:;

2.背景图

   background-image:url(图片的路径)

     背景图的显示状态：

1. 背景图是不占据空间的
2. 背景图大小 < 容器大小时，直到铺满为止
3. 背景图大小 = 容器大小时，正好显满一张
4. 背景图大小 > 容器大小时，只显示容器区域内地方的图

3. background-repeat:;

        属性值;

            Repeat      平铺（默认值）

            No-repeat   不平铺

            Repeat-x    横向平铺

            Repeat-y     纵向平铺

 

4.控制背景图的位置

   Background-position:;

   属性值：

       第一个值：水平的位置，第二个值：垂直的位置（可以为负）

      eg:（几种表达方式）

       100px  200px     距离左侧100px，距离顶端200px；     

       -100px  -200px    左移100px，上移30px；

       10%  20%        距离左侧10%px，距离顶端20%px；

       left   buttom     背景图的左侧和底部，贴着容器的左侧和底部

       Right  center     背景图右侧贴着容器右侧，上下居中

       Center buttom     左右居中，背景图底部贴着容器底部

       Center            水平、垂直都居中  

5.背景图的固定

   Background-attachment；；

     属性值：

         fixed

6.简写

           background:red;

           background：url(./images/gou.png)；

           background:no-repeat;

           background:center;       可以简写成：

           Background:red url(./images/gou.png) no-repeat center;

7. img和背景图

    1.区别：url()导入的图片：网页渲染，不占空间

                  img导入的图片：html结构，占据空间

    2.什么情况下使用背景图，什么情况下使用img

         图片类型：

         .jpg      图片没有透明，没有动画

         .png      支持透明

         .gif       支持 透明也支持动画

六、css盒模型（它是网页布局的基石）

1. 结构

           盒模型从里到外包括：

                  内容区                  鸡蛋

                  内填充（补白）          泡沫

                  盒子边框（可选）        快递盒子

                  外边距                  盒子外部的距离

七、padding的用法

          1.padding是长在内容和盒子之间的，在盒子内部

          2.padding是为了调整子元素在父元素里面的位置关系

          3.padding的特点是padding会把盒子撑大

          4.如果想让盒子保持原有大小，需要在元素宽高的基础上减去padding的宽高值

          5.给单一方向设置padding的值：

               Padding-left/right/top/buttom:;

          6.padding的设置方法

                     padding：1个值        四周

                     padding：2个值        上下、左右

                     padding：3个值        上、左右、下

                     padding：4个值        上、右、下、左

          7.padding不能设置为负值

          8.padding不会对背景图造成影响

          9.如果一个盒子没有设置固定的宽和高，添加padding不用减去宽高值

.logo_con{

            width: 1002px;

            height: 100px;

            background: purple;

            margin:0 auto;

        }

 

    <div id="login">

            <div class="login_con">

                <div class="login_left">登录注册</div>

                <div class="login_right">输入关键字</div>

            </div>

        </div>